反復の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に伝播します

この場合、stateをline3に変更しても、line4に何も起こりません。言い換えれば

：

これは同等のコードのようになります。

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

は、上記1に、このコードと同等ですか？

ない場合、その理由は？状態の不変のクローンを作成する

は

Answer 1

ため、レンダリングを最適化するために、状態の変化を比較する方法の良いアイデアです。

shouldComponentUpdateのようなライフサイクルのメソッドでは、nextPropsが渡され、this.propsと比較することができます。

状態を直接変更すると、nextProps.prop1とthis.props.prop1は常に同じ状態になるため、予想される動作が得られないことがあります。

私は他の理由はそこにもあると確信しているが、これは最もストレートフォワードのように思えます。