個人愚見:Redux 和 Mobx 區別

高健發表於2019-02-16

一. 關於狀態管理

它們都有統一維護管理應用狀態的能力;

某一狀態只有一個可信資料來源(通常命名為store,指狀態容器);
操作更新狀態方式統一,並且可控(通常以action方式提供更新狀態的途徑);
支援將store與React元件連線,如react-redux,mobx-react;通常使用狀態管理庫後,我們將React元件從業務上劃分為兩類:
    容器元件(Container Components):負責處理具體業務和狀態資料,將業務或狀態處理函式傳入展示型元件;
    展示型元件(Presentation Components):負責展示檢視,檢視互動回撥內呼叫傳入的處理函式;

二. 關注點的不同

1. Redux更多的是遵循Flux模式的一種實現,是一個JavaScript庫,它的關注點在於:
     Action:一個JavaScript物件,描述動作相關資訊,主要包含type屬性和payload屬性:
     Reducer:定義應用狀態如何響應不同動作(action),如何更新狀態;
     Store:管理action和reducer及其關係的物件,主要提供以下功能:
          1>. 維護應用狀態並支援讀取訪問狀態(getState());
          2>. 支援監聽action的分發,更新狀態(dispatch(action));
          3>. 支援訂閱store的變更(subscribe(listener));
          4>. 支援通過中介軟體(redux-thunk、redux-saga、redux-promise等)處理非同步任務流程
2. Mobx是一個透明函式響應式程式設計的狀態管理庫,它使得狀態管理簡單可伸縮,它的關注點在於:
    Action:定義改變狀態的動作函式,包括如何變更狀態;
    Store:集中管理模組狀態(State)和動作(action);
    Derivation(衍生):從應用狀態中派生而出,且沒有任何其他影響的資料,我們稱為derivation(衍生),衍生在以下情況下存在:
       1>. 使用者介面;
       2>. 衍生資料, 衍生主要有兩種:
        Computed Values(計算值):計算值總是可以使用純函式(pure function)從當前可觀察狀態中獲取;
        Reactions(反應):反應指狀態變更時需要自動發生的副作用,這種需要實現其讀寫操作;

三. 設計思想的不同

Redux 更多的是遵循函數語言程式設計思想
Mobx 設計更多偏向於物件導向程式設計和響應式程式設計,通常將狀態包裝成可觀察物件,一旦狀態物件變更,就能自動獲得更新。

四. 對store管理的不同

Redux將所有共享的資料集中在一個大的store中,統一管理
Mobx是按模組將狀態劃分出多個獨立的store進行管理

五. 資料可變性的不同

Redux強調的是物件的不可變性,不能直接操作狀態物件,而是在原來狀態物件的基礎上返回一個新的狀態物件,最後返回應用的上一狀態
Mobx中可以直接使用新值更新狀態物件

六. 學習成本方面

Redux 較繁瑣,流程較多,需要配置,建立store,編寫reducer,action,如果涉及非同步任務,還需要引入中介軟體
Mobx 流程相對就簡單很多,根據文件上手也比較快

相關文章