当前位置：首页 > article >正文

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

article 2025/3/30 18:21:32

在 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`	`let`
数据持久性	跨渲染周期保持数据	每次渲染会重新初始化
触发组件重新渲染	不会触发	不会触发
典型用途	保存 DOM 引用或非状态性变量	临时存储当前渲染中的局部值
常见使用场景	DOM 操作、保存计时器等可变数据	函数内的计算逻辑、循环等