ReactJS和不變性

Question

我現在已經學習了ReactJS一段時間了。 令我困惑的一件事是ReactJS在道具，元素等許多方面使用不變性的原因。這有什么具體的原因嗎？ 這背后的哲學是什么？

當我嘗試向props添加新屬性時，我收到以下錯誤。

未捕獲的TypeError：無法添加屬性我，對象不可擴展

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

}