傳統(tǒng)的前端MVC模式存在一個很嚴重的問題，就是當項目邏輯越來越復雜時，數(shù)據(jù)流動很容易變得混亂，而這種問題的解決方案就是只存放一個渲染函數(shù)于Controller 中，每次更新重渲染頁面，但重渲染容易帶來嚴重的性能與用戶體驗問題。因此 Facebook提出Flux來解決這個問題。
1. 什么是Flux?
Flux是一套基于dispatcher的前端應用架構模式，它由3大部分組成——dispatcher、store 和 view，其中dispatcher負責分發(fā)事件；store 負責保存數(shù)據(jù)，同時響應事件并更新數(shù)據(jù)；view負責訂閱 store 中的數(shù)據(jù)，并使用這些數(shù)據(jù)渲染相應的頁面。
Flux的簡化流程圖如圖所示:
Flux流程圖.png
- dispatcher 與 action
dispatcher 是 Flux 中最核心的概念，其主要的API有兩個，.register(callback)和.dispatch(action)，register方法用來注冊一個監(jiān)聽器，而 dispatch 方法用來分發(fā)一個 action。 - store
store 負責保存數(shù)據(jù)，并定義修改數(shù)據(jù)的邏輯。在 Flux 中，store 對外只暴露 getter（讀取器）而不暴露 setter（設置器），因此只能讀取 store 中的數(shù)據(jù)而不能進行任何修改。 - controller-view
主要進行 store 與 React 組件（即 view 層）之間的綁定，定義數(shù)據(jù)更新及傳遞的方式。它會調(diào)用 store 暴露的getter 獲取存儲其中的數(shù)據(jù)并設置為自己的 state，在render 時以 props 的形式傳給自己的子組件 - view
如果view層操作需要修改數(shù)據(jù)，則必須使用 dispatcher 分發(fā)一個 action，這也是在Flux中唯一修改數(shù)據(jù)的方式。 - actionCreator
actionCreator是當分發(fā) action 的時候代碼有冗余的情況下使用的。將可以重用的action部分代碼封裝起來，每次修改action只需要在actionCreator 中進行修改即可。
2. 為什么選擇Flux模式?
flux的核心思想是數(shù)據(jù)和邏輯永遠單向流動，其模型圖如圖所示。
Flux模型圖
那么Flux是如何解決MVC模式存在的不足呢？主要有兩點：
- Flux是如何實現(xiàn)單向數(shù)據(jù)流的呢？ Flux 的 dispatcher 定義了嚴格的規(guī)則來限定我們對數(shù)據(jù)的修改操作。同時，store 中不能暴露 setter 的設定也強化了數(shù)據(jù)修改的純潔性，保證了 store 的數(shù)據(jù)確定應用唯一的狀態(tài)。
- Flux中的view每次重渲染的是Virtual DOM，并由PureRender 保障從重渲染到局部渲染的轉(zhuǎn)換，因此不會影響頁面的性能優(yōu)化。
