React组件为何出现意外重渲染？对象状态更新异常排查

你的测试场景核心是直接突变了React状态对象（修改counter.value），然后调用setCounter传入同一个引用，这种操作违反了React状态不可变的设计原则，导致了这个边缘现象，具体拆解如下：

核心前提 #

React判断是否需要重渲染的核心逻辑：

• 对于对象/数组类型的状态，默认通过引用对比判断状态是否变化；
• 若新状态和旧状态引用相同，React默认不会触发重渲染，但存在特殊情况——当状态被直接突变后，React内部的状态快照和实际状态值出现不一致时，会触发一次修正性重渲染。

各阶段的具体行为 #

1. 初始点击Increment：
   直接修改counter.value后调用setCounter(counter)，由于新状态和旧状态是同一个引用，React判定状态未变化，因此不触发重渲染，符合预期。

2. 点击Re-render后：
   切换trigger触发重渲染，此时React会基于当前状态（包括已经被你修改过value的counter对象）更新UI，同时更新内部保存的上一次渲染状态快照（快照中的counter对象就是你修改后的那个，value为已更新的值）。

3. Re-render后首次点击Increment：

   • 你先直接将counter.value加1（再次突变状态对象）；
   • 调用setCounter(counter)时，React对比新状态（同一个引用）和内部快照的旧状态：引用相同，但浅对比发现value属性从快照中的旧值变成了新值，因此判定状态发生了变化，触发一次重渲染；
   • 重渲染完成后，React更新内部快照，将当前counter对象（已修改value）作为新的快照基准。

4. 之后再次点击Increment：

   • 你再次突变counter.value，但此时React内部的状态快照和你修改的是同一个对象——也就是说，你修改value的同时，快照里的value也同步变成了新值；
   • 调用setCounter(counter)时，新状态和快照的旧状态引用相同，且浅对比value属性也完全一致（因为已经提前突变了），React判定状态无变化，因此不再触发重渲染。

总结 #

这个单次重渲染是React在状态被非法突变后，为了修正内部快照与实际状态的不一致而触发的一次“补救”行为。一旦快照完成同步，后续的非法操作就无法再触发重渲染了。记住：React状态必须保持不可变性，修改状态时一定要返回新的对象（比如setCounter({...counter, value: counter.value + 1})），才能保证渲染行为符合预期。

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