使用useRef获取DOM元素
使用useRef获取DOM元素是目前useRef最常用的用法。
基本用法
function App() {
const box = useRef();
return (
<div ref={box}>
<button onClick={() => console.log(box)}>点击获取div</button>
</div>
)
}
使用useRef跨组件周期保存数据
即使组件重新渲染,保存的数据仍然还在,保存的数据被更改不会触发组件重新渲染。
基本用法
/**
* @description: 组件挂载完成之后开启一个循环定时器,使用useRef的保存数据功能
* 不会随着组件的更新而丢失数据
* @param {*}
* @return {*}
*/
function App() {
const [count,setCount] = useState(0)
const timeId = useRef;
useEffect(() => {
timeId.current = setInterval(() => {
setCount(count => count + 1);
},1000)
}, []);
const handleSetInterval = () => {
clearInterval(timeId.current)
}
return (
<div>
<h1>当前求和为{count}</h1>
<button onClick={handleSetInterval}>点我清除定时器</button>
</div>
)
}
这里我们需要注意的是数据并不是直接保存在useRef返回的这个对象中的,而是保存在这个对象的current属性上的。