一. 關於狀態管理
它們都有統一維護管理應用狀態的能力;
某一狀態只有一個可信資料來源(通常命名為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 流程相對就簡單很多,根據文件上手也比較快