React.js：選擇狀態結構

如果你喜歡我的文章，可以請我一杯咖啡或分享給我:)

---

在本文中，我們將研究在 react.js 專案中選擇狀態結構時的要點。

---

選擇國家結構

在寫react元件時，我們需要決定元件中應該有多少狀態以及我們將如何使用這些狀態。 例如，在編寫元件時，我們使用了 3 個狀態，並且我們的元件運作正常，但是您注意到可以使用 3 個狀態編寫相同的元件。因此，你需要決定狀態結構。

---

我會講5個原則來幫助你在選擇狀態結構時做出更好的決策。

1. 將相關狀態變數進行分組

想像一個電腦遊戲中的角色，這個角色可以在x和y座標上移動。那麼，如果你想將這些 x 和 y 值寫成狀態，你會怎麼做？

• 錯誤的方法：

• 更好的方法：

從技術上講，您可以使用這兩種方法中的任何一種。但是，**如果您總是同時更新兩個或多個狀態變量，請考慮將它們合併為單一狀態變數**。

如果您不知道需要多少狀態，您可以使用物件或陣列將狀態分組。

---

2.避免國家矛盾。

想像一個訊息應用程式。您知道當您批准發送訊息時有兩個不同的階段。第一個是“訊息正在發送”，第二個是“訊息已發送”。那麼，如果我們將這兩個狀態宣告為兩個不同的狀態，true和false，我們首先想到的是什麼？

• 錯誤的方法（衝突風險） :

由於isSending 和isSent 永遠不應該同時為true，因此最好將它們替換為一個狀態變量，該變量可能採用三種有效狀態之一：“正在輸入”、“正在發送”和“已發送”

• 更好的方法：

---

3.避免冗餘狀態

選擇組件的狀態結構時，你需要如果可以從組件的props 或現有狀態變數計算一些資訊，則不應該將此資訊保留在組件的狀態中。

• 錯誤的方法：

• 更好的方法：

** 當您呼叫 setFirstName 或 setLastName 時，會觸發重新渲染，然後將根據新資料計算下一個全名。 **

---

結論

良好地建造狀態可確保您擁有易於修改和調試的元件。在這篇文章中，我談到了選擇狀態結構時應該考慮的3個原則。這些原則可能還有更多。如果你願意，可以在評論裡說說這些原則。

以上是React.js：選擇狀態結構的詳細內容。更多資訊請關注PHP中文網其他相關文章！