React 中 useRef 的使用方式和使用场景有哪些？

在React中，useRef是一个非常有用的Hook，它主要被用来访问DOM元素和保存跨渲染周期持久的可变数据。useRef返回一个可变的ref对象，其 .current属性被初始化为传递给 useRef的参数（initialValue）。返回的对象在组件的整个生命周期内保持不变。

使用方式

首先，我们需要在组件内部导入 useRef：

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

然后可以使用 useRef来创建一个ref对象：

jsx
const myRef = useRef(initialValue);

其中 initialValue是ref对象 .current属性的初始值。使用 myRef.current可以访问或者修改这个值。

使用场景

有几种常见的场景适合使用 useRef：

1. 访问DOM元素

当你需要直接操作DOM节点时，比如获取输入框的值或者设置焦点，可以使用 useRef。

jsx
function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // 直接访问DOM元素来设置焦点
    inputEl.current.focus();
  };

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

2. 保存任意可变值

另一个使用场景是当你想要保存一个在组件的整个生命周期中都保持不变的值，这个值不会触发组件的重新渲染。

jsx
function Timer() {
  const intervalRef = useRef();

  useEffect(() => {
    const id = setInterval(() => {
      // 执行一些操作
    }, 1000);
    intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);

  // ...

}

在这个例子中，intervalRef被用来保存一个间隔定时器的ID，虽然这个ID会在不同的渲染周期间发生变化，但我们不希望这种变化触发组件的重新渲染。

3. 跟踪上一个值

useRef也可以被用来跟踪组件中的变量或状态的旧值。

jsx
function Counter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  });

  const prevCount = prevCountRef.current; // 在渲染时获取旧的值

  // ...
}

这里 prevCountRef用于存储每次渲染后的 count值，可以在任何时候访问前一个状态的值，而不会触发组件的重新渲染。