为什么 react setState 方法是不可变的？

Question

以下来自 React 教程：

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

此代码更改已复制state.squares并将其分配给 original state.squares。最后这改变了 original state.squares，所以我认为这与可变代码没有什么不同，如下所示：

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

有什么区别吗？

Answer 1

我也想知道这个问题。但我发现答案并不令人满意。所以这是我的看法

答案实际上写在文档本身 http://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly

所以第一个原因，setState()触发因素render()

第二个原因，状态更改在 React 中是异步的，因此当您仍然引用旧的未更改状态时，可能会有其他一些组件在幕后更改状态，这会导致错误的状态值

Answer 2

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

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

它将被下一个覆盖

this.setState({squares: squares});

因此，您的应用程序将不会有准确的数据。

来自文档：

切勿直接改变 this.state，因为setState()之后调用可能会替换您所做的改变。将 this.state 视为不可变的。

在https://facebook.github.io/react/docs/react-component.html#state中查看更多相关信息