为什么react setState方法不可变？

问题描述：

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

此代码更改复制state.squares并将其分配给原单state.squares。最后，这改变了原state.squares，所以我觉得这是不是比可变的代码不同的类似以下内容：

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

有一些区别？

答

你可以这样做，但你不应该，背后的原因是，如果你使用

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

它将与未来

this.setState({squares: squares});

因此被覆盖，你的应用程序将不会有准确的数据。

从文件：

不要直接变异this.state，如调用setState()之后可以代替您作出的突变。对待这个状态，就好像它是不可变的。

答

此代码是不可改变的，因为使用slice()方法。如果您尝试：

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

您将获得由slice()方法创建的新数组。

您可以测试它的方式：

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

如果你有关于this.setState({squares: squares});怀疑 - 是的，运行此之后，当然你有新的状态，但实际上这种状态不被修改老态的对象，但是从旧部件创建的新对象。所以，如果你尝试：

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

你会看到新的国家将超过保存老有所不同：

this.state == oldState //false

在this.state.squares[i] = 'X';oldState情况下也会被修改，这也正是我们所说的可变性。旧状态的所有复制部分随着它而改变，并且导致许多问题。

为什么react setState方法不可变？

相关推荐