为何修改useRef的current属性后组件不重新渲染？

核心原因：React的重渲染机制不追踪useRef.current的变化 #

React组件只会在两种情况下触发重渲染：

• 组件接收的props发生变更
• 组件自身的state通过setter函数更新

useRef创建的是一个脱离React状态系统的可变容器对象，它的current属性本质就是普通JavaScript对象的属性——你可以随意修改它，但这个修改完全不在React的状态追踪范围内，React感知不到这个变化，自然不会触发组件重渲染。

useState和useRef的设计差异 #

• useState的setter函数在更新值的同时，会主动通知React“状态已变更，需要重新渲染组件”，这是React内置的状态更新逻辑。
• useRef的设计初衷是存储不需要触发重渲染的可变值：比如DOM元素引用、定时器ID、或者组件生命周期内需要保留但不影响UI的临时数据。

关于你代码里的useEffect依赖问题 #

你把counter.current放进useEffect的依赖数组，但这也无法触发重渲染。原因很直接：
useEffect的依赖检查是在组件渲染完成后执行的，如果组件本身没被触发重渲染，useEffect根本不会重新运行，自然也不会检测counter.current的变化。就算组件因其他原因重渲染，counter.current的变化也不会反过来触发重渲染——这是个逻辑闭环：修改current不触发重渲染→useEffect不执行→无法检测到current变化。

代码示例中的问题 #

你的加减函数只是直接修改counter.current，没有触发React的状态更新流程：

const onDecrement = () => {
  counter.current -= 1; // 仅修改普通对象属性，React无感知
};

const onIncrement = () => {
  counter.current += 1;
};

useEffect(() => {
  console.log('re-render'); 
}, [counter.current]); // 组件不重渲染，这个回调永远不会因current变化执行

总结 #

• 如果需要值变化时同步更新UI、触发组件重渲染，用useState。
• 如果只是存储可变值且不需要影响UI渲染，再用useRef。

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