React的setState（）是否保證每次都創建一個新的狀態對象？

Question

在React中，setState是否總是給this.state分配一個新對象？ 換句話說，當你撥打：

this.setState({ 
    key1: val1, 
    key2: val2 
}); 

它總是與新屬性的當前狀態對象合併成一個新的對象，排隊的操作，其在功能上等同於以下？

this.state = { 
    ...this.state, 
    key1: val1, 
    key2: val2 
}; 

的原因，我問的是，我想知道是否this.state !== nextState是總是保證是內部shouldComponentUpdate（） true如果更新是由setState觸發。

謝謝。

Answer 1

對你的問題的簡單回答將是「是」，但是對於一個更新週期。讓我解釋一下。

正如你可能已經知道React setState並不總是立即更新組件。有時會反應批處理或推遲更新，直到更晚。作爲一個例子，假設你在事件處理程序中有類似的東西。

onClick() { 
    this.setState({quantity: state.quantity + 1}); 
    this.setState({quantity: state.quantity + 1}); 
    this.setState({quantity: state.quantity + 1}); 
} 

這些狀態更新將排隊並在一個更新週期內一起執行。在這種情況下，React只會爲第一個setState創建一個新的狀態對象，並且該對象將隨後更新setState更新。您可以在源代碼here中清楚地看到這一點。

但是，這完全是關於React如何在引擎蓋下工作的，我們不需要擔心這一點。因爲一個週期只有一個shouldComponentUpdate()和componentDidUpdate()。當我們訪問state時，它將永遠是一個新的對象。所以我們可以安全地假設setState（）保證每次都創建一個新的狀態對象。但請確保您知道setState的其他含義，其解釋見the official documentation。

我想知道是否this.state !== nextState始終保證 是真實的內部shouldComponentUpdate()。

對此問題的回答將是「否」也在其他答案中解釋過。 shouldComponentUpdate()將被調用，因爲狀態改變，道具更改或兩者兼而有之。因此，如果組件僅因道具更改而更新，this.state !== nextState將不成立。

Answer 2

我想你想知道這個問題的答案。

請問this.state！== nextState總是保證在 之內爲true shouldComponentUpdate（）？

根據反應文檔shouldComponentUpdate將被稱爲三個實例

• 狀態改變
• 道具改變
• 狀態和道具改變

因此，如果僅道具正在發生變化，你的當前狀態將等於最後一個未修改的狀態。

當接收到new props或state時，會在呈現之前調用shouldComponentUpdate（）。默認爲true。此方法不用於初始渲染或使用forceUpdate（）時。

你問的第一個問題取決於你的狀態的數據管理風格。

React讓你使用任何你想要的數據管理風格，包括變異。

而且該文檔還指出，

淺合併stateChange進入新的狀態，例如，調整購物車項目數量

但看的setState內部零件當狀態發生變異時，beginUpdateQueue方法讓我懷疑。

我認爲如果你必須保證數據不會發生突變，那麼對這部分代碼使用immutability-helper是明智的做法。