浅谈React中useRef的原理及实现

useRef的用法

        初始化：const count = useRef(0)
        读取：count.current
        特点：useRef 返回一个可变的 ref 对象（每次渲染时都会返回一个相同的引用，引用地址不会发生变化），其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。
        useRef能够拿到最新的.current里的值。我们举个例子来看一下。

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

export default function ref() {
    const [count, setCount] = useState(0)
    const countRef = useRef(count)

    useEffect(() => {
        countRef.current = count
    })

    const onClick = () =>  {
        setTimeout(() => {
        // console.log('countRef',countRef.current);
        console.log('count',count);
        }, 2000)
    }

    return (
        <div>
        <div>现在count的值为：{count}</div>
        <div>countRef的值为：{countRef.current}</div>
        <button onClick={() => setCount((val) => val + 1)}>点击+1</button>
        <button onClick={() => onClick()}>打印</button>
        </div>
    )

}

问题：为什么打印时不是count的最新值？
当我们更新状态的时候，React 会重新渲染组件，每一次渲染都会拿到独立的 count 状态, 并重新渲染一个 onClick 函数. 每一个 onClick 里面都有它自己的 count 。 所以每次弹框展示的就是点击时的 count 值。
问题：打印countRef.current是最新值。
因为 useRef 每次都会返回同一个引用, 所以在 useEffect 中修改的时候 , .current的值 也会同时被修改. 这样子, 点击的时候就可以打印实时的 count .

标签：count,current,useRef,const,浅谈,React,onClick,countRef
来源： https://blog.csdn.net/weixin_48683341/article/details/121799645