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 2 vdom1创建了
• 在line 4 vdom2创建了
• vdom1和vdom2进行了比较
• 差异传播到实际DOM

如果是这种情况，那么在state处变异line3不应对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将始终相同，因此您可能无法获得预期的行为。

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