useRef 的作用
- useRef 用来获取DOM元素对象
- 保存数据
useRef 的使用方法
import React, {useRef} from "react"; function Ref (){ const box = useRef() return ( <div> <div ref={box}>useRef</div> <button onClick={() => console.log(box)}>+1</button> </div> ) } export default Ref;
说明一下： 当我们需要获取元素对象的时候， 首先引入useRef， 其次调用useRef（）方法接收它的返回值，我们需要获取那个DOM元素就在那个DOM元素上进行绑定，通过ref属性将useRef的返回值绑定到元素身上，这样useRef的返回值，通过useRef返回一个对象，对象内部有个current属性，这个属性就对应着我们需要的元素对象；
使用useRef 保存数据
import React, {useRef, useEffect, useState} from "react"; function Ref (){ let timerId = useRef() const [count, setCount] = useState(0) useEffect(() => { timerId.current = setInterval(() => { setCount(count => count + 1) }, 1000) }, []) const stop = () => { console.log(timerId) clearInterval(timerId.current) } return ( <div> <div>{count}</div> <button onClick={stop}>停止</button> </div> ) } export default Ref;
这里讲一下 ， 为什么不用let一个变量来保存数据， 因为再使用定时器更新状态数据时， 数值的每次变化都会引起组件的更新，每次更新都重新let一个变量，所以在进行解绑操作的时候，你的let变量为null，它并没有保存定时器，所以以上场景需要使用useRef进行保存数据，useRef不会因为组件的更新而丢失数据，虽然组件进行了更新，但是通过useRef保存的数据是不会丢失的，这里通过useRef中的current来进行保存也是官方要求的写法，所以如果你想要保存的数据不会因为组件的更新而丢失，就可以使用useRef来保存数据
