如果你喜歡我的文章，可以請我喝咖啡或分享它 :)
在這篇文章中，我們將探討在我們的 react.js 專案中 選擇狀態結構 時的重要要點。
選擇狀態結構
在撰寫 react 組件 時，我們需要決定組件中應該有多少 狀態 以及我們將如何使用這些狀態。 舉例來說，當我們撰寫一個組件時，我們使用了 3 個狀態，並且組件運行正常，但你注意到你可以使用 2 個狀態來撰寫相同的組件。因此，你需要決定狀態結構。
我將討論 3 條原則 來幫助你在選擇 狀態結構 時做出更好的決策。
1. 將相關狀態變數分組
想像一個電腦遊戲中的角色，這個角色可以在 x 和 y 坐標上移動。所以，如果你想將這些 x 和 y 值作為狀態來寫，你會如何做呢？
- 不佳的方法 :
- 更佳的方法 :
從技術上來說，你可以使用這兩種方法。但，如果你總是同時更新兩個或更多的狀態變數，考慮將它們合併為一個單一的狀態變數。
如果你不知道需要多少狀態，你可以 使用物件或陣列來分組狀態。
2. 避免狀態中的矛盾
想像一個消息應用程式。你知道在你給予發送消息的批准時有兩個不同的階段。第一個是「消息正在發送」而第二個是「消息已經發送」。那麼，如果我們將這 兩個狀態 宣告為兩個不同的狀態，true 和 false，第一件跑出來的就是什麼呢？
- 不佳的方法 (衝突風險) :
由於 isSending 和 isSent 不應該同時為 true，最好用一個狀態變數來替代它們，這個變數可以有三個有效狀態：'typing'、'sending' 和 'sent'。
- 更佳的方法 :
3. 避免冗餘狀態
在選擇組件的狀態結構時，如果可以從組件的 props 或現有的狀態 變數 計算出一些 資訊，那麼就不應將這些資訊保留在組件的狀態中。
- 不佳的方法 :
- 更佳的方法 :
當你呼叫 setFirstName 或 setLastName 時，你觸發了一次重新渲染，然後下一個全名將從新的資料中計算出來。
結論
良好的狀態結構確保你擁有易於修改和除錯的組件。在這篇文章中，我討論了在 選擇狀態結構 時應考慮的 3 條原則。可能還有更多這樣的原則。如果你想的話，可以在評論中討論這些原則。
原文出處：https://dev.to/sonaykara/reactjs-choosing-the-state-structure-5gnp
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式