React's setState(), Datenmutation für verschachtelte Strukturen, warum nicht direkt den Status ändern?

Question

Ist der folgende Code falsch?

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

Wenn ja, warum?

This schlagen vor, dass es falsch ist, aber erklärt nicht warum?

Ich denke, es ist nicht falsch ist, aus folgendem Grund:

• bei line 2vdom1 erstellt
• bei line 4vdom2 erstellt
• vdom1 und vdom2 verglichen werden
• Unterschied ist, propagiert auf das eigentliche DOM

Wenn dies der Fall ist, sollte die Mutation state um line3 keinen Einfluss darauf haben, was bei line4 passiert.

Mit anderen Worten:

diese entsprechende Code sein sollte:

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

Ist dieser Code entspricht dem oben ein?

Wenn nicht, warum nicht?

Answer 1

Das Erstellen eines unveränderlichen Zustandsklons ist eine gute Idee, da Zustandsänderungen verglichen werden, um das Rendern zu optimieren.

Im Lebenszyklus werden Methoden wie , nextProps übergeben und können mit this.props verglichen werden.

Wenn Sie den Status direkt mutieren, werden nextProps.prop1 und this.props.prop1 immer gleich sein und daher werden Sie möglicherweise nicht das erwartete Verhalten erhalten.

Ich bin mir sicher, dass es auch andere Gründe gibt, aber dieser scheint am einfachsten zu sein.