React 中 useRef 的使用方法及示例

React 中的 useRef 是一个 Hook 函数，它在函数组件中创建一个可变的引用，类似于类组件中的 ref 属性。useRef 可以保存任意可变值，并在组件的多次渲染间保持不变。使用时，首先从 React 导入 useRef，然后在组件中调用它并传入一个初始值。useRef 返回一个对象，其包含一个 current 属性，用于存储任意值。

主要用途

1. 获取 DOM 元素：在函数组件中，可以使用 useRef 获取 DOM 元素的引用，从而直接操作 DOM。

2. 记忆功能：useRef 可以用来存储组件内部的任意可变值，不会在组件多次渲染时重置。

3. 存储定时器等引用：可以使用 useRef 来存储定时器、请求等引用，以便在组件卸载时清除。

4. 子组件实例：通过 useRef 和 useImperativeHandle，可以在父组件中获取子组件的实例和方法。

使用方法

1. 初始化：在组件内部，调用 useRef 并传入初始值。

   const myRef = useRef(initialValue);
   

2. 读取和修改：通过 myRef.current 来读取和修改引用的值。

   myRef.current = newValue;
   

3. 作为 ref 属性：将 useRef 创建的 ref 对象作为 JSX 元素的 ref 属性，可以获取该 DOM 元素的引用。

   <div ref={myRef}>Content</div>
   

示例代码

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

export const Demo: React.FC = () => {
  const [timer, setTimer] = useState(0);
  const timerRef = useRef(timer);

  useEffect(() => {
    timerRef.current = timer;
  });

  function onClick() {
    setTimeout(() => {
      console.log('timerRef', timerRef.current);
      console.log('timer', timer);
    }, 2000);
  }

  return (
    <div>
      <div>现在 timer 的值为：{timer}</div>
      <div>timerRef 的值为：{timerRef.current}</div>
      <button onClick={() => setTimer(val => val + 1)}>点击 +1</button>
      <button onClick={onClick}>打印</button>
    </div>
  );
};

在这个示例中，我们使用 useRef 来存储 timer 的值，并在定时器中打印出来。由于 useRef 不会在组件渲染时更新，所以打印的 timerRef.current 值将是上一次的值，而不是最新的值。

总的来说，useRef 提供了一个方便的方式来持久化存储可变值和操作 DOM 元素的引用。