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

Question

下面的反应代码是错误的吗？

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

如果是，为什么？

这表明它是错误的，但没有解释为什么？

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

• 在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将始终相同，因此您可能无法获得预期的行为。

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