useRef存在的意义是什么？其设计初衷与适用场景解析

一、useRef的核心价值：跨渲染周期的可变容器 #

React组件每次触发渲染时，都会重新执行整个组件函数。普通变量在函数执行时会被重新声明初始化，无法保留上一次渲染时的值；而useRef的.current属性会绑定到组件实例的生命周期，只要组件存在，这个值就会一直保留，不会随渲染重置。

举个直观的对比：

// 普通变量的问题：每次渲染都会重置
function Counter() {
  let count = 0;
  const onClick = () => {
    count++;
    console.log(count); // 点击多次始终输出1，因为下次渲染count又变回0
  };
  return <button onClick={onClick}>点击</button>;
}

// useRef的作用：跨渲染保留值
function Counter() {
  const countRef = useRef(0);
  const onClick = () => {
    countRef.current++;
    console.log(countRef.current); // 点击一次输出1，两次输出2，值会一直累积
  };
  return <button onClick={onClick}>点击</button>;
}

二、为什么useRef不触发渲染？ #

React的渲染触发逻辑是：当组件的状态（useState/useReducer）或props发生变化时，会重新计算UI并渲染。useRef的设计场景，就是存储那些不需要影响UI展示的信息——比如DOM节点引用、定时器ID、临时计算缓存等。如果修改useRef就触发渲染，反而会产生无意义的渲染开销，违背它的设计初衷。

你之前用useState遇到的问题，本质就是状态更新必然触发渲染，这是React保证UI与数据同步的核心机制；而useRef就是专门用来处理“需要存值，但不想让UI跟着变”的场景。

三、为什么useRef不参与依赖链？ #

React的依赖链（比如useEffect、useCallback的依赖数组），作用是追踪那些变化后需要触发副作用或回调更新的变量。useRef的.current变化不会触发渲染，自然也不需要被依赖链追踪——毕竟依赖链的目的是“变量变了，就得重新执行相关逻辑”，而useRef的设计就是让你能静默修改值，不触发这些额外逻辑。

如果强行把useRef加入依赖数组，每次修改.current都得更新依赖，反而会打破它“静默操作”的优势。

四、为什么不能直接用普通变量替代？ #

除了跨渲染保留值的核心差异，在React的并发渲染模式下，普通变量可能会出现不可预测的状态不一致问题——因为并发渲染会中断和恢复组件执行，普通变量的生命周期无法和组件实例绑定。而useRef是React官方维护的容器，能保证在各种渲染模式下的行为一致性。

内容的提问来源于stack exchange，提问作者BloodyRain2k