個人愚見：Redux 和 Mobx 區別

dcr309duan 發布于2019-08-23 14:21 / 2872人閱讀

摘要：一關于狀態管理它們都有統一維護管理應用狀態的能力某一狀態只有一個可信數據來源通常命名為，指狀態容器操作更新狀態方式統一，并且可控通常以方式提供更新狀態的途徑支持將與組件連接，如，通常使用狀態管理庫后，我們將組件從業務上劃分為兩類容器組件

一. 關于狀態管理

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

某一狀態只有一個可信數據來源（通常命名為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 流程相對就簡單很多，根據文檔上手也比較快

GPU云服務器云服務器個人備案和企業備案的區別個人認證和企業認證的區別阿里云服務器個人和企業區別個人小程序和公司小程序的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100472.html

七分設計感的純Flutter項目(Mung三部曲)

摘要：版版版是一個基于編寫，使用豆瓣開源開發的一個項目。提示左右豆瓣把開源關了，現在使用的別的開發者的地址，項目是抽出來的后期可以自己改，現在項目使用的是，可以正常運行。React版Mung React-Native版Mung Flutter版Mung Mung-Flutter 1. Mung-Flutter：是一個基于Flutter編寫，使用豆瓣開源API開發的一個項目。 showImg(ht...

khlbat 2019-05-22 18:24 評論0 收藏0
React組件設計實踐總結05 - 狀態管理

摘要：要求通過要求數據變更函數使用裝飾或放在函數中，目的就是讓狀態的變更根據可預測性單向數據流。同一份數據需要響應到多個視圖，且被多個視圖進行變更需要維護全局狀態，并在他們變動時響應到視圖數據流變得復雜，組件本身已經無法駕馭。今天是 520，這是本系列最后一篇文章，主要涵蓋 React 狀態管理的相關方案。前幾篇文章在掘金首發基本石沉大海, 沒什么閱讀量. 可能是文章篇幅太長了？掘金值太低了？ ...

ideaa 2019-05-23 11:48 評論0 收藏0
React 狀態管理庫: Mobx

摘要：關心性能的情況下，需要手動設置這時就需要引入狀態管理庫。現在常用的狀態管理庫有和，本文會重點介紹，然后會將和進行對比，最后展望下未來的狀態管理方面趨勢。如果在任何地方都修改可觀察數據，將導致頁面狀態難以管理。 React 是一個專注于視圖層的庫。React 維護了狀態到視圖的映射關系，開發者只需關心狀態即可，由 React 來操控視圖。在小型應用中，單獨使用 React 是沒什么問題...

liujs 2019-08-20 17:49 評論0 收藏0