React setState()，嵌套结构的数据变异，为什么不直接修改状态呢？

Question

下面的反应代码错了吗？

state={ foo: { bar: true } }  // line 1
setState(state)               // line 2   
state.foo.bar = false         // line 3
setState(state)               // line 4

如果是，为什么？

This提示错了，但没有解释为什么？

我认为没有错，原因如下：

• line 2vdom1 已创建
• line 4vdom2 被创建
• 比较vdom1 和vdom2
• 差异传播到实际的 DOM

如果是这种情况，那么在line3 处变异state 应该不会对line4 处发生的事情产生任何影响。

换句话说：

这应该是等效的代码：

state={ foo: { bar: true } }  // line 1
setState(state)               // line 2   
state={ foo: { bar: false } } // line 3
setState(state)               // line 4

这段代码是否等同于上面的代码？

如果没有，为什么不呢？

Answer 1

创建一个不可变的状态克隆是一个好主意，因为通过比较状态变化来优化渲染。

在shouldComponentUpdate等生命周期方法中，nextProps被传入，可以与this.props进行比较。

如果您直接改变状态，那么nextProps.prop1 和this.props.prop1 将始终相同，因此您可能无法获得预期的行为。

我敢肯定还有其他原因，但这个原因似乎是最直接的。