React useRef hooks 使用详解

useRef 是 React 中的一个钩子（Hook），用于在函数组件中创建和访问可变的引用对象。它通常用于在组件的多次渲染之间保持对 DOM 元素或组件实例的引用，或者在组件的生命周期内保持某个变量的值。

useRef 的使用语法如下：

const ref = useRef(initialValue);

其中，initialValue 是可选的，表示引用对象的初始值。useRef 返回一个具有 current 属性的对象，你可以通过 ref.current 访问和修改引用的值。

以下是一个简单的示例，演示如何使用 useRef 访问一个输入框（<input>）的 DOM 元素：

import React, { useRef } from 'react';

function TextInput() {
  const inputRef = useRef();

  const handleButtonClick = () => {
    inputRef.current.focus(); // 使用 ref 访问输入框的 DOM 元素，并调用 focus() 方法
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleButtonClick}>Focus the input</button>
    </div>
  );
}

export default TextInput;

在这个示例中，我们使用 useRef 创建了一个名为 inputRef 的引用对象。然后，我们将这个引用传递给输入框的 ref 属性。这样，我们就可以在组件内部通过 inputRef.current 访问输入框的 DOM 元素。在这个例子中，我们在点击按钮时调用了输入框的 focus() 方法。

除了访问 DOM 元素，useRef 还可以用于在组件的多次渲染之间保持某个变量的值。这对于存储不会触发组件重新渲染的数据非常有用。这里有一个简单的示例，演示如何使用 useRef 存储一个计数器的值：

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

function Counter() {
  const [renderCount, setRenderCount] = useState(0);
  const countRef = useRef(0);

  const increment = () => {
    countRef.current++; // 使用 ref 修改计数器的值
    setRenderCount(renderCount + 1); // 更新 renderCount 以触发组件重新渲染
  };

  return (
    <div>
      <p>Counter value: {countRef.current}</p>
      <p>Render count: {renderCount}</p>
      <button onClick={increment}>Increment counter</button>
    </div>
  );
}

export default Counter;

在这个示例中，我们使用 useRef 创建了一个名为 countRef 的引用对象来存储计数器的值。我们通过 countRef.current 访问和修改计数器的值。注意，修改 countRef.current 不会触发组件重新渲染。因此，我们还使用了一个名为 renderCount 的状态来记录组件的渲染次数，当我们点击按钮时，renderCount 会增加，从而触发组件重新渲染。这个例子展示了如何使用 useRef 存储不会触发组件重新渲染的数据。

需要注意的是，useRef 和 useState 的主要区别在于，修改 useRef 的值不会触发组件重新渲染，而修改 useState 的值会。因此，当你需要在组件的多次渲染之间保持某个变量的值，但不需要这个值的变化导致组件重新渲染时，可以使用 useRef。