How to use useRef to reference latest value

在React中，useRef通常用于获取DOM元素的引用，但它也可以用于存储任何可变的值，这个值在组件的整个生命周期内都保持不变。与普通的变量不同，使用useRef创建的对象在组件的不同渲染之间保持不变，所以它可以存储最新的值。

以下是如何使用useRef来引用最新值的基本步骤：

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

function MyComponent() {
  const [myState, setMyState] = useState('initial value');
  const latestValueRef = useRef(myState);

  useEffect(() => {
    // 当状态变化时，更新ref的当前值
    latestValueRef.current = myState;
  }, [myState]); // 依赖项数组包含myState，以便每当状态改变时都执行

  const someFunction = () => {
    // 使用current属性访问ref的最新值
    console.log('The latest value is:', latestValueRef.current);
  };

  return (
    <div>
      <p>The state is: {myState}</p>
      <button onClick={() => setMyState('new value')}>
        Update State
      </button>
      <button onClick={someFunction}>
        Log Latest Value
      </button>
    </div>
  );
}

export default MyComponent;

在这个例子中，我们创建了一个名为latestValueRef的ref，并把它的初始值设为了组件状态myState的初始值。然后我们使用一个useEffect钩子来监听myState的变化，每当myState变化时，我们就更新latestValueRef.current的值。最后，我们在someFunction中通过latestValueRef.current访问到最新的状态值。

需要注意的是，useRef不会触发组件的重新渲染，所以即使latestValueRef.current的值变化了，也不会导致组件更新。这是它与useState不同的地方，因为useState在状态更新时会导致组件重新渲染。