Concat vs推动添加新阵列的最佳实践

时间:2017-01-12 15:02:05

标签: javascript reactjs redux

许多人提倡不变性,因为他们完全使用redux with 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
    })
  })
}

在这种情况下是否重要?推送上面的问题是什么?

1 个答案:

答案 0 :(得分:8)

不变性用于反应,而不仅仅是因为还原。不应直接改变React组件的状态。根据{{​​3}}:

  

不要直接改变this.state,因为之后调用setState()可能   替换你所做的突变。把它当作状态对待   不可变的。

此外,docs也有助于对帐。如果props是不可变的,你可以进行浅等式检查以查看它是否被更改,并相应地进行渲染。

在您的代码updatedList中使用Object#assign克隆到新数组。现在您可以将Array#推送到数组,而无需更改原始数组。使用Array#concat更短,更易读:

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