なぜ反応setStateメソッドが不変か？続き

Question

が反応チュートリアルから来ている：

const squares = this.state.squares.slice(); 
squares[i] = 'X'; 
this.setState({squares: squares}); 

このコードの変更がstate.squaresをコピーしてstate.squaresをorginalすることを割り当てます。最後に、これはオリジナルのstate.squaresを変更するので、私は、これは次のように変更可能なコードとは異なるではないと思います。

this.state.squares[i] = 'X'; 

いくつかの違いがありますか？

Answer 1

あなたがこれを行うことができますが、あなたはいけない、背後にある理由は、あなたがそのように次の

this.setState({squares: squares}); 

で上書きされます

this.state.squares[i] = 'X'; 

を使用する場合は、あなたのアプリが持っていないだろう、ということです正確なデータ。ドクから

：

が あなたが作った突然変異を置き換えることができ、その後setState()を呼び出すよう、直接this.stateを変異させることはありません。それが 不変であるかのようにthis.stateを扱います。

slice()方法が使用されているので、https://facebook.github.io/react/docs/react-component.html#state

Answer 2

このコードでは、この詳細チェックは、不変です。あなたがしようとした場合：

someState = {squares: [1,2,3,4,5]} 
squares = someState.squares.slice() 

をあなたはslice()方法によって作成された新しい配列を取得します。 、はい、これを実行した後、もちろん、あなたが新しい状態を持っていますが、実際には、この状態は古い状態オブジェクトを変更されません - あなたはthis.setState({squares: squares});に疑問を持っている場合

squares = someState.squares.slice() 
squares2 = someState.squares 
squares[0] = 9 // doesn't change someState 
squares2[1] = 9 // changes someState 
someState.squares // [1,9,3,4,5] - as I said 

そして：

あなたはそのようにテストすることができます古い部分から作成された新しいオブジェクトです。だから、しようとした場合：

oldState = this.state 
this.setState({squares: squares}) 

あなたが新しい状態が保存された古いよりも異なることがわかります。this.state.squares[i] = 'X';oldStateの場合

this.state == oldState //false 

があまりにも修正されるだろうし、それは我々が無常呼んまさにです。古い状態のすべてのコピーされた部分はそれに伴って変化し、それは多くの問題を引き起こす。