【轉】淺談React、Flux 與 Redux

標籤：代碼   get   isp   整合   儲存   com   應用   mvc   作用   

本文轉自《淺談React、Flux 與 Redux》，轉載請註明出處。

 

React

　　React 是一個 View 層的架構，用來渲染視圖，它主要做幾件事情：

• 組件化
• 利用 props 形成單向的資料流
• 根據 state 的變化來更新 view
• 利用虛擬 DOM 來提升渲染效能

　　前面說到 React 能夠根據 state 的變化來更新 view，一般來說引起 state 變化的動作除了來自外部（如伺服器），大部分都來自於頁面上的使用者活動，那頁面上的使用者活動怎樣對 state 產生作用呢？React 中每個組件都有 setState 方法用於改變組件當前的 state，所以可以把更改 state 的邏輯寫在各自的組件裡，但這樣做的問題在於，當項目邏輯變得越來越複雜的時候，將很難理清 state 跟 view 之間的對應關係（一個 state 的變化可能引起多個 view 的變化，一個 view 上面觸發的事件可能引起多個 state 的改變）。我們需要對所有引起 state 變化的情況進行統一管理，於是就有了 Flux。

 

Flux

　　Flux 是一種應用架構，或者說是一種思想，它跟 React 本身沒什麼關係，它可以用在 React 上，也可以用在別的架構上。前面說到 Flux 在 React 中主要用來統一管理引起 state 變化的情況。Flux 維護著一個或者多個叫做 Store 的變數，就像 MVC 裡面的 Model，裡面存放著應用用到的所有資料，當一個事件觸發時 ，Flux 對事件進行處理，對 Store 進行更新，當 Store 發生變化時，通常是由應用的根組件（也叫 controller view）去擷取最新的 store，然後更新state，之後利用 React 單向資料流的特點一層層將新的 state 向下傳遞實現 view 的更新。這裡的 controller view 可以有多個也可以不是根組件，但是這樣資料流維護起來就比較麻煩。

　　Flux 的思維模型如下：

　　Flux 主要包括四個部分， Dispatcher 、 Store 、 View 、 Action ，其中 Dispatcher 是 Flux 的核心樞紐，它相當於是一個事件分發器，將那些分散在各個組件裡面的邏輯代碼收集起來，統一在 Dispatcher 中進行處理。完整的 Flux 處理流程是這樣的：使用者通過與 view 互動或者外部產生一個 Action，Dispatcher 接收到 Action 並執行那些已經註冊的回調，向所有 Store 分發 Action。通過註冊的回調，Store 響應那些與他們所儲存的狀態有關的 Action。然後 Store 會觸發一個 change 事件，來提醒 controller-views 資料已經發生了改變。Controller-views 監聽這些事件並重新從 Store 中擷取資料。這些 controller-views 調用他們自己的 setState() 方法，重新渲染自身以及組件樹上的所有後代組件。使用 Flux 有個好處就是我只需要用 action 對象向 Dispatcher 描述當前的事件就可以執行對應的邏輯，因為 Dispatcher 是所有 Action 的處理中心，即使沒有對應的事件發生，我們也可以“偽造”一個出來，非常利於測試。

 Redux

　　Redux 的作用跟 Flux 是一樣的，它可以看作是 Flux 的一種實現，但是又有點不同，具體的不同總結起來就是：

　　1.Redux只有一個Store。

　　Flux 裡面會有多個 store 儲存應用資料，並在 store 裡面執行更新邏輯，當 store 變化的時候再通知 controller-view 更新自己的資料，Redux 將各個 store 整合成一個完整的 store，並且可以根據這個 store 推匯出應用完整的 state。同時 Redux 中更新的邏輯也不在 store 中執行而是放在 reducer 中。 

　　2. 沒有 Dispatcher 

　　Redux 中沒有 Dispatcher 的概念，它使用 reducer 來進行事件的處理，reducer 是一個純函數，這個函數被表述為 (previousState, action) => newState ，它根據應用的狀態和當前的 action 推匯出新的 state。Redux 中有多個 reducer，每個 reducer 負責維護應用整體 state 樹中的某一部分，多個 reducer 可以通過 combineReducers 方法合成一個根reducer，這個根reducer負責維護完整的 state，當一個 action 被發出，store 會調用 dispatch 方法向某個特定的 reducer 傳遞該 action，reducer 收到 action 之後執行對應的更新邏輯然後返回一個新的 state，state 的更新最終會傳遞到根reducer處，返回一個全新的完整的 state，然後傳遞給 view。

　　在我看來，Redux 和 Flux 之間最大的區別就是對 store/reducer 的抽象，Flux 中 store 是各自為戰的，每個 store 只對對應的 controller-view 負責，每次更新都只通知對應的 controller-view；而 Redux 中各子 reducer 都是由根reducer統一管理的，每個子reducer的變化都要經過根reducer的整合。用圖表示的話可以像這樣：

　　Flux 中的 store 是這樣的：

 

 

　　Redux 中的 store（或者叫 reducer）是這樣的：

 

 

　　ps：剛接觸 React，很多地方瞭解地不是特別深入，如有錯漏，歡迎指正。

【轉】淺談React、Flux 與 Redux