react组件中useRef声明的变量和let声明的变量区别

在 React 组件中，useRef 和 let 声明的变量之间存在一些关键区别，它们在生命周期、作用域以及数据持久性方面的行为不同。

1. 数据持久性

• useRef：

  • useRef 创建的引用在组件的整个生命周期内保持持久，不会在组件重新渲染时丢失或重置。
  • ref.current 的值可以在组件多次渲染间保留和更新，而不会触发重新渲染。

• let：

  • 使用 let 声明的变量在每次组件重新渲染时都会被重新初始化。也就是说，let 变量的值不会在不同渲染之间保留。

2. 触发重新渲染

• useRef：

  • 更新 ref.current 不会触发组件的重新渲染。
  • 通常用于保存 DOM 节点的引用或存储一些无需参与重新渲染流程的数据。

• let：

  • 修改 let 变量的值同样不会直接触发重新渲染，但由于它在每次渲染中都会被重新声明，通常无法在渲染间存储有用的状态。

3. 使用场景

• useRef 常见使用场景：

  • 访问 DOM 元素： 通过 useRef 来获取和操作 DOM，例如表单输入的焦点管理。

    function TextInput() {
      const inputRef = useRef(null);
    
      const focusInput = () => {
        inputRef.current.focus();
      };
    
      return (
        <div>
          <input ref={inputRef} type="text" />
          <button onClick={focusInput}>聚焦输入框</button>
        </div>
      );
    }
    

  • 保存可变数据（类似实例变量）： 例如保存计时器 ID、前一次渲染的某个值等，而不需要触发组件重新渲染。

    function Timer() {
      const timerId = useRef(null);
    
      const startTimer = () => {
        timerId.current = setInterval(() => {
          console.log('计时中...');
        }, 1000);
      };
    
      const stopTimer = () => {
        clearInterval(timerId.current);
      };
    
      return (
        <div>
          <button onClick={startTimer}>开始计时</button>
          <button onClick={stopTimer}>停止计时</button>
        </div>
      );
    }
    

• let 常见使用场景：

  • 存储函数内部的局部变量： 适用于一些只在当前渲染期间有效的逻辑计算。

    function Counter() {
      let count = 0; // 每次重新渲染都会重新初始化为 0
    
      const increment = () => {
        count += 1;
        console.log(count); // 这个值会变，但不会在渲染中保留
      };
    
      return <button onClick={increment}>增加</button>;
    }
    

  • 这种情况中，如果希望持久保存计数值，就需要使用 useState，而不是单纯用 let。

4. 与 useState 的对比（扩展）

useRef 和 let 的行为类似，但在组件中用 useState 来声明状态变量时，变量的变化会触发重新渲染：

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

  const increment = () => {
    setCount(count + 1); // 触发组件重新渲染
  };

  return <button onClick={increment}>当前计数：{count}</button>;
}

相比之下，如果只是用 useRef，即使改变 ref.current，UI 也不会更新，因为 useRef 的变化不会触发渲染。

总结表

简而言之：

• useRef 更适合在渲染间保持数据，尤其是需要跨渲染周期存储非 UI 状态的值。
• let 仅在当前渲染期间有效，每次重新渲染都会重置值。