useRef 的使用

useRef 的作用

1. useRef 用来获取DOM元素对象
2. 保存数据

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来保存数据