ReactJS和不可变性

Question

我已经学习ReactJS一段时间了。其中让我困惑的一件事是为什么ReactJS在许多方面（如props、元素等）使用不可变性。这背后是否有特定的原因？这背后的哲学是什么？

当我尝试向props添加新属性时，我会收到以下错误。

Uncaught TypeError: Can't add property me, object is not extensible

- VJAI

Answer 1

这背后的哲学是单向数据流——数据从上层组件向下流动，而操作则从下向上流动。

组件通过props接收其数据，要更改某些内容，它必须调用其父级并请求更改——通常通过回调函数实现。

您可以在官方网站的React思维页面阅读更多信息，它很好地解释了这个概念。

- Gosha A

---

我想补充一点，单向数据流比双向绑定更可预测。后者在概念上可能更容易理解，但前者在调试和可预测性方面更胜一筹。 - lux

Answer 2

React使用不可变性以获得明显的性能优势。

例如，每当您设置状态时，您不会改变状态，而是克隆其中的一部分，然后更新状态。

例如：

this.state = {
entries: [1,2,3]
}

你应该做的事情

this.state.setState({
entries: this.state.entries.slice().push(9); //not this.state.entries.push(9)
})

当你使用shouldComponentUpdate时，可以实现性能提升。

在shouldComponentUpdate中，你只需要比较引用而不进行深度检查。

shouldComponentUpdate(prevState,newState){
  return prevState.entries != newState.entries

}

- Piyush.kapoor

---

你能再详细描述一下我们在这里真正实现的性能提升吗？ - VJAI

在这个特定的例子中，考虑到数据大小和缺乏其他组件，可能影响不大。但在一个更大的应用程序中，如果有多个组件树，当状态改变时任何单个组件树不更新可以极大地提高应用程序在重新渲染期间的性能。 - Bryan Fillmer