在使用 React 開發時,你可能會遇到「單向數據流(Unidirectional Data Flow)」這個概念。這究竟是什麼意思呢?
單向數據流並不是 React 獨有的概念,但作為 JavaScript 開發者,你可能第一次聽到這個名詞。
一般來說,這個概念指的是數據只有一種方式可以被傳遞到應用程序的其他部分。
在 React 中,這意味著:
- 狀態(state)被傳遞到視圖和子組件
- 动作(actions)由視圖觸發
- 動作可以更新狀態
- 視圖和子組件接收到狀態的更改
視圖是應用程序狀態的結果。狀態只有在動作發生時才能改變。當動作發生時,狀態會被更新。
由於單向綁定的特性,數據無法反向流動(例如使用雙向綁定時),這帶來了一些關鍵優勢:
- 較少的錯誤,因為你對數據有更多的控制權
- 更容易進行調試,因為你知道數據是從哪裡來的
- 更高效,因為庫已經知道每個系統部分的邊界是什麼
每個組件永遠只擁有一個狀態。受這個狀態影響的任何數據只能影響其下方的組件:即它的子組件。
改變組件的狀態永遠不會影響它的父組件、它的兄弟組件或應用程序中的其他組件- 只會影響它的子組件。
這就是為什麼狀態通常會在組件樹中往上移動,以便它可以在需要訪問它的組件之間進行共享。