为何直接修改React状态后setState不生效？附代码示例

核心原因：React的状态引用浅比较机制 #

React的useState状态更新触发组件重渲染的前提是：新状态与当前状态的引用地址不相同。当调用setList这类状态更新函数时，React会对新状态和旧状态做一次浅比较——只对比两者的引用地址是否一致，而非深入比较对象内部的属性变化。

你的代码问题拆解 #

看你这段代码的执行流程：

1. const nextList = list;：因为list是引用类型（对象），这行代码只是把原状态对象的引用赋值给nextList，两者指向堆内存中同一个对象，引用地址完全相同。
2. nextList.name = "anand";：直接修改了这个共享对象的name属性，但对象本身的引用地址没有任何变化。
3. setList(nextList);：你传入的nextList和原状态list是同一个引用，React对比后判定状态没有发生变化，因此跳过了组件的重渲染流程，页面自然不会更新。

额外补充：状态不可变性的意义 #

这种设计本质是为了性能优化。React依赖状态不可变原则来高效判断组件是否需要更新：如果每次状态变化都创建新的引用，React只需要做简单的引用对比就能快速决策；如果允许直接修改原状态对象，React就不得不进行深比较，这会带来极大的性能损耗。你直接修改原状态对象的行为，本身就违反了这个原则。

为什么浅拷贝/函数式更新能解决问题 #

• 浅拷贝（比如{...list}）会创建一个全新的对象，这个新对象的引用地址和原状态完全不同，React对比后能识别到状态变化，从而触发重渲染。
• 函数式更新里的({ ...list })同样是创建新对象，确保了新状态的引用地址不同，同时还能保证拿到最新的状态值，但核心还是新引用让React感知到了状态变化。

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