ReactJS 和不变性

Question

我学习 ReactJS 有一段时间了。令我困惑的一件事是为什么 ReactJS 在道具、元素等许多方面使用不可变性。这有什么具体原因吗？这背后的理念是什么？

当我尝试向 props 添加新的 属性 时，出现以下错误。

未捕获类型错误：无法添加 属性 我，对象不可扩展

Answer 1

这背后的理念是数据流动的一种方式——数据向下流动（从顶层到叶组件），动作向上流动。

一个组件从 props 接收它的数据，并且要改变一些东西，它必须调用它的父级并要求它改变一些东西——通常是通过回调函数。

你可以在官方网站的 Thinking in React 页面上阅读更多相关信息，它很好地解释了这个概念。

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

}