useRef的作用主要有两种
1.操作DOM或者获取其他组件的引用
操作步骤
import { useRef } from 'react'
const xxxx = useRef(null)
<input ref={xxxx} />
xxxx.current
2.多次渲染之间共享数据
import React, { useEffect, useState } from 'react'
import ReactDom from 'react-dom'
export default function App () {
const [count, setCount] = useState(0)
let timeId = null
console.log(timeId)
useEffect(() => {
timeId = setInterval(() => {
setCount((count) => count + 1)
}, 1000)
console.log(timeId)
}, [])
const hClick = () => {
console.log(timeId)
clearInterval(timeId)
}
return (
<div>
count:{count}
<button onClick={hClick}>点击停止定时器</button>
</div>
)
}
ReactDom.render(<App />, document.getElementById('root'))