在 React.js 中改变数据答案

【问题标题】：Mutating Data in React.js在 React.js 中改变数据
【发布时间】：2018-03-04 04:24:14
【问题描述】：

我正在阅读 Reactjs 的 document 关于不改变数据的内容。我不明白文档示例中两段代码之间的区别：

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'])
  }));
}

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

【问题讨论】：

首先，您将推送到数组的引用。在第二个中，您使用 concat 复制数组并且不会改变当前状态
concat 返回一个新数组。

标签： javascript reactjs

【解决方案1】：

在第一个示例中，您有一个数组并正在添加一个新项目，方法是使用 push 到此数组。

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

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

有一个很好的答案here explaining the reasons for avoiding mutation。

【讨论】：

【解决方案2】：

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

【讨论】：