在React.js中突变数据

Question

我正在阅读关于不变异数据的Reactjs 文档 。 我不理解文档示例中2条代码之间的区别：

handleClick() {
  // This section is bad style and causes a bug
  const words = this.state.words;
  words.push('marklar');
  this.setState({words: words});

}

和：

handleClick() {
  this.setState(prevState => ({
   words: prevState.words.concat(['marklar'])
  }));
}

为什么第二个代码不改变数据？

Answer 1

在第一个示例中，您具有一个数组，并通过使用push入该数组来添加新项目。

在第二个示例中，您将通过使用concat并添加该项来创建数组的副本，这意味着您不会更改原始数组。 concat返回一个新数组。

在第二个示例中，您没有更改原始数组。 不改变状态是React和Redux中的重要原则。

这里有一个很好的答案，解释了避免突变的原因 。

Answer 2

简而言之， concat返回该数组的新副本，因此它不会更改先前的数组。