Pourquoi la méthode react setState est-elle immuable?

Question

Après vient de React tutoriel:

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

Cette modification du code copié state.squares et l'affecter à orginal state.squares. Enfin cela change state.squares original, donc je pense que ce n'est pas différent que le code mutable comme suit:

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

Y at-il une différence?

Answer 1

Vous pouvez le faire, mais vous ne devriez pas, la raison est que, si vous utilisez

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

Il substituera avec la prochaine

this.setState({squares: squares}); 

Ainsi, votre application aura pas données précises.

De Doc:

Ne jamais muter this.state directement, comme appeler setState() après peut remplacer la mutation que vous avez fait. Traitez this.state comme si elle était immuable.

Voir plus à ce sujet dans https://facebook.github.io/react/docs/react-component.html#state

Answer 2

Ce code est immuable, parce que la méthode slice() est utilisée. Si vous essayez:

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

Vous obtiendrez nouveau tableau créé par la méthode slice().

Vous pouvez tester cette façon:

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 

Et si vous avez des doutes sur this.setState({squares: squares}); - Oui, bien sûr, après l'exécution de ce que vous avez nouvel état, mais en fait cet état n'est pas modifié vieil objet d'état, mais nouvel objet créé à partir de vieilles parties. Donc, si vous essayez:

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

Vous verrez que nouvel état sera différent de sauvé vieux:

this.state == oldState //false 

En cas de this.state.squares[i] = 'X';oldState serait modifié aussi, et c'est exactement ce que nous appelons mutabilité. Toutes les parties copiées de l'ancien état changent avec lui et cela cause beaucoup de problèmes.