使用 useRef 钩子

在 React 中，我们经常需要使用到 ref 来访问页面中的元素或组件实例。为了更方便地管理这类 ref，React 提供了 useRef 钩子。

什么是 useRef？

useRef 是 React 内置的钩子函数，用于在函数组件中创建一个可变的引用（reference）变量。我们可以将这个 ref 对象通过函数参数传递，从而在组件中使用 ref。

useRef 与 createRef 不同的是，它在任何时候都可以调用，不需要等到组件挂载才能使用，也不必担心它会再次被初始化。

useRef 的用法

我们可以通过下面的示例来了解 useRef 的用法。

import { useRef } from 'react';

function InputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

在上面的示例中，我们首先通过 useRef 创建了一个名为 inputEl 的变量，它的初始值为 null。接着在 input 元素上添加了 ref 属性，将 inputEl 变量作为参数传递。

最后，我们在按钮的 onClick 事件中调用 inputEl.current.focus() 方法，从而将焦点设置到输入框上。

在这个示例中，由于我们使用了 useRef 创建了一个可变的引用变量，所以可以通过 current 属性访问到 input 元素。

useRef 的常规应用

除了用于访问元素，useRef 还可以用于实现一些特殊的功能，如：

存储数据

由于 useRef 创建的变量是可变的，我们可以在组件中存储数据，并随时更新这些数据，如下所示：

import { useRef } from 'react';

function Counter() {
  const counterRef = useRef(0);

  const increment = () => {
    counterRef.current += 1;
    console.log(counterRef.current);
  };

  return (
    <div>
      <p>Count: {counterRef.current}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

在这个示例中，我们通过 useRef 创建了一个 counterRef 对象，它的初始值为 0。在组件中定义了一个 increment 函数，在每次被调用时将 counterRef.current 的值加一，并且打印输出 counterRef.current 的值。

缓存值

在某些情况下，我们不希望某个函数在每次组件更新时都被执行，而是只在某些特定的条件下执行。我们可以使用 useRef 来缓存函数的值，避免在不必要的情况下执行函数。

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

function usePrevious(value) {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  });

  return ref.current;
}

function Example() {
  const [count, setCount] = useState(0);
  const [isEven, setIsEven] = useState(false);

  const prevCount = usePrevious(count);

  useEffect(() => {
    setIsEven(count % 2 === 0);
  }, [count]);

  return (
    <>
      <p>Count: {count}</p>
      <p>Is even: {isEven.toString()}</p>
      <p>Previous count: {prevCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

在这个示例中，我们创建了一个 usePrevious 钩子函数，用于返回组件之前的值。在 useEffect 中，我们通过将 value 参数更新到 ref.current 中，缓存了 value 参数的值。如果 usePrevious 钩子在每次组件更新时都要重新计算，可能会导致消耗太多的计算性能。

总结

使用 useRef 钩子可以帮助我们更方便地访问元素、存储数据和缓存值等操作，是 React 函数式组件中必不可少的一部分。