原文：https://laylawang17.github.io/2020/03/10/%E7%90%86%E8%A7%A3Flux/
Flux 是一種前端應(yīng)用開發(fā)架構(gòu)，是一種管理數(shù)據(jù)流的模式。當(dāng)訪問數(shù)據(jù)對象時，一個組件實例只是簡單的代理訪問。如果有一處需要被多個實例共享的狀態(tài)，可以簡單的通過維護(hù)一份數(shù)據(jù)來實現(xiàn)共享。
Flux 中的關(guān)鍵概念
- Dispatcher：是 App 的調(diào)度中心，接收 action 并分發(fā)給 store。一個 App 里只有一個 dispatcher。
- Store：存儲 App 的 data 和邏輯，且 store 中的 data 只能經(jīng)由 action 修改，當(dāng) data 發(fā)生變化時會出發(fā) change 事件通知 view 更新。store 注冊在 dispatcher 上，并且給 dispatcher 提供一個回調(diào)函數(shù)用來更新自身，該回調(diào)函數(shù)接收 action 作為參數(shù)。一個 App 里可以有多個 store。
- Action：是一個簡單的對象，可以理解為 App 內(nèi)部的 API，由 type 和 data 組成，用于語義化的描述 App 內(nèi)發(fā)生的變化。每個 action 都會被所有的 store 接收到。一個組件里會存在很多 action。
- View：請求 store 中的 data 用于展示，在用戶與 App 進(jìn)行交互時發(fā)出 action，并通過監(jiān)聽 store 的 change 事件重新渲染。
以 Todo List 這樣的簡單 App 展示一下上述概念之間的關(guān)系：
Flux原理
上圖表明的是 Flux 架構(gòu)是如何工作的，需要注意的是，在 Flux 架構(gòu)中，數(shù)據(jù)的流動是單向的，可以理解為
數(shù)據(jù)的流動
Flux 架構(gòu)的優(yōu)勢
Flux 架構(gòu)帶來的優(yōu)勢是，不存在數(shù)據(jù)雙向綁定的情況，App 的狀態(tài)完全由 store 控制，App 中各組件可以做到較好的解耦。
比如下圖中的情況，如果底層組件 G 的某個行為想改變組件 F 的狀態(tài)，數(shù)據(jù)需要先從 G 傳遞到根組件 A 再傳遞給 F。當(dāng) App 中有大量類似的復(fù)雜的數(shù)據(jù)傳遞路徑后，用戶與 App 的一次交互所引起的 App 的狀態(tài)變更將會變得難以預(yù)測。即存在
- 多個視圖依賴于同一狀態(tài)。
- 來自不同視圖的行為需要變更同一狀態(tài)。
而在 Flux 架構(gòu)中，store 作為一個類似于全局變量的存在持有著 App 所有的公共狀態(tài)，并與每個組件間維持單一的數(shù)據(jù)流，我們很容易看到一個狀態(tài)的變更引起了哪個組件的變化。
Flux架構(gòu)給組件間數(shù)據(jù)流動帶來的改變
