在React中，Concat和Push向数组添加新元素的最佳实践比较

Question

许多人推崇不可变性，因为他们将redux与react结合使用，但我仍然看到有人使用push而不是concat。

以这段代码为例：

submitComment() {
  console.log('submitComment: '+JSON.stringify(this.state.comment))

  APIManager.post('/api/comment', this.state.comment, (err, response) => {
    if (err){
      alert(err)
      return
    }

    console.log(JSON.stringify(response))
    let updateList = Object.assign([], this.state.list)
    updatedList.push(response.result)
    this.setState({
      list: updatedList
    })
  })
}

在这种情况下，有什么关系吗？"push above"有什么问题吗？

- Zea Lith

---

最简短的答案可能是：当你在实践中使用shouldComponentUpdate时，你会明白为什么使用不可变数据结构会更好。当然，我并不是说不可变数据结构本身就更好，只是它们通常更容易集成到shouldComponentUpdate中。 - John Weisz

@lux 不符合规范（http://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-arrayaccumulation）。数组展开和对象展开是不同的操作，尽管它们使用相同的（伪）运算符。顺便说一下，Babel使用`concat`（http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=true&presets=es2015-loose%2Creact%2Cstage-0%2Cstage-1%2Cstage-2%2Cstage-3&code=var%20a%20%3D%20%5B1%5D%3B%0Avar%20b%20%3D%202%3B%0Avar%20c%20%3D%20%5B%20...a%2C%20b%20%5D）。 - Jordan Running

@Jordan 很好知道！在上午11点之前了解今天学到的东西总是很不错的。 - lux

两者是一样的吗？splice没有改变原始数组，而slice改变了吗？ - Zea Lith

@JohnWeisz 如果在不使用Object.assign或array.slice的情况下向数组中添加元素，为什么在使用shouldComponentUpdate时会出现问题？ - Gwater17

Answer 1

不仅因为redux，不变性在react中也被使用。React组件的状态不应该直接被改变。根据文档：

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

此外，不变性还有助于协调。如果属性是不可变的，则可以进行浅相等检查以查看其是否已更改，并相应地进行渲染。

在您的代码中，使用Object＃assign将updatedList克隆到新数组中。现在，您可以Array＃push到数组中，而不更改原始数组。使用Array＃concat更短，更易读：

const updatedList = this.state.list.concat(response.result);

- Ori Drori