useRef有什么用？

news2024/11/15 23:20:19

看一下官网定义

useRef是一个React Hook，它能帮助引用一个不需要渲染的值

这句话透露出一个信息，不需要渲染的值可以用useRef引用，那需要渲染的值用什么引用呢？当然是useState了，需要渲染的值指的就是状态嘛！
看下官网的例子，可以方便你理解：

import React,{useState, useEffect, useRef} from 'react';

const DemoRef = () => {
    const [count, setCount] = useState(0)
    let timer = null;
    useEffect(() => {
        timer = setInterval(()=>{
            //这里注意一下不要直接传递下一个状态setCount(count+1),这样做的话，你会发现一直是0-->1来回闪烁，
            //这是因为set函数不会更新已经运行在代码中的count状态变量，而传递一个更新函数setCount(count=>count+1)
            //则会获取待定状态，并从中计算下一个状态
            setCount(count=>count+1)
        },1000)
    }, [])

    const onClick = () => {
        console.log(timer,'timer')
        clearInterval(timer)
    }

    return (
        <div>
            <p>count:{count}</p>
            <button onClick={onClick}>点击清除</button>
        </div>
    )
}
export default DemoRef;

在这里插入图片描述
结果如图，会发现timer一直是null，这是因为每次setState之后，组件都会重新运行一遍，然后let timer = null；每次都每次都会重新赋值为null。这样很明显，内存泄漏。
这时就可以使用useRef来处理这个了

import React,{useState, useEffect, useRef} from 'react';

const DemoRef = () => {
    const [count, setCount] = useState(0)
    let timer = useRef();
    useEffect(() => {
        timer.current = setInterval(()=>{
            //这里注意一下不要直接传递下一个状态setCount(count+1),这样做的话，你会发现一直是0-->1来回闪烁，
            //这是因为set函数不会更新已经运行在代码中的count状态变量，而传递一个更新函数setCount(count=>count+1)
            //则会获取待定状态，并从中计算下一个状态
            setCount(count=>count+1)
        },1000)
    }, [])

    const onClick = () => {
        console.log(timer,'timer')
        clearInterval(timer.current)
    }

    return (
        <div>
            <p>count:{count}</p>
            <button onClick={onClick}>点击清除</button>
        </div>
    )
}
export default DemoRef;

在这里插入图片描述
通过这个例子就能看出useRef的一个功能，那就是引用一个值，使其跳过组件的重新渲染过程。
useRef还有一个功能，那就是操作Dom。看下面这个例子

import React,{useRef} from 'react';

const RefDom = () => {
    const inputRef = useRef();
    

    const onClick = () => {
        console.log(inputRef.current)
        inputRef.current.value = 'lili'
    }

    return (
        <div>
            <input type="text" ref={inputRef}/>
            <button onClick={onClick}>点击自动填充</button>
        </div>
    )
}
export default RefDom;