在React.js中变异数据

Question

我正在阅读关于不改变数据的Reactjs document。 我不明白文档＆＃39>中的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中的一个重要原则。

答案很清楚here explaining the reasons for avoiding mutation。

Answer 2

简单地说，concat返回数组的新副本，因此它不会改变前一个数组。