MobX

MobX
Categories:
Tags:

簡介

  • 允許觀察 JavaScript Object 物件
  • 通知觀察者，物件已更新
  • 追蹤觀察者存取物件屬性
  • 所有狀況同步運作
  • 允許透過 action (預設) 變更狀態，或者直接異動狀態（需要變更全域 MobX 設定）
  • mobx減化redux，它是一個觀察者模式，當observable的state有變化時，就會觸發反應後續動作
  • Mobx是一个透明函数响应式编程（Transparently Functional Reactive Programming，TFRP）的状态管理库，它使得状态管理简单可伸缩：

安裝

npm install mobx
npm install mobx-react-lite

套件

  • Profiler

函式

  • makeObservable
  • makeAutoObservable
  • observable
  • action
  • computed
  • autorun
  • runInAction
  • toJS

選擇 Mobx 的原因

學習成本少

Mobx基礎知識很簡單，學習了半小時官方文檔和示例代碼就搭建了新項目實例；而Redux確較繁瑣，流程較多，需要配置，創建store，編寫reducer，action，如果涉及異步任務，還需要引入redux-thunk或redux-saga編寫額外代碼，Mobx流程相比就簡單很多，並且不需要額外異步處理庫

面向對象編程

Mobx支持面向對象編程，我們可以使用@observable and @observer，以面向對象編程方式使得JavaScript對象具有響應式能力；而Redux最推薦遵循函數式編程，當然Mobx也支持函數式編程

模版代碼少

相對於Redux的各種模版代碼，如，actionCreater，reducer，saga／thunk等，Mobx 則不需要編寫這類模板代碼

不選擇Mobx的可能原因

過於自由

Mobx提供的約定及模版代碼很少，這導致開發代碼編寫很自由，如果不做一些約定，比較容易導致團隊代碼風格不統一，所以當團隊成員較多時，確實需要添加一些約定

可拓展，可維護性

也許你會擔心Mobx能不能適應後期項目發展壯大呢？確實Mobx更適合用在中小型項目中，但這並不表示其不能支撐大型項目，關鍵在於大型項目通常需要特別注意可拓展性，可維護性，相比而言，規範的Redux更有優勢，而Mobx更自由，需要我們自己制定一些規則來確保項目後期拓展，維護難易程度

MobX vs Redux

類型 Mobx Redux
Definition 定義 測試函式庫，做簡易狀態管理，達到 TRRP JavaScript 函式庫管理應用程式狀態
Programmed 撰寫方式 JavaScript 原生 ES6
Data Store 資料儲存 數個 Store 可以分別儲存 單一個大的 Store 一起共用
Application 應用 小及簡單的應用程式 複雜大型應用程式
Scalable 擴充性 可擴展性相對較差 容易擴充應用程式
Performance 效能 好的效能 效能狀況不佳
變數操作 Automatic manual
Boilerplate More implicit, more concise, Build in abstractions, More magic More explicit, less concise, Need special tools, No magic
Learning curve 學習曲線 簡單 較難
Developer tools 開發者工具 “does the job” tools, No time travel Redux dev tools, Time travel
Debug 除錯 較難，可以在不同地方異動資料，要追狀態比較難 較容易，統一管理狀態，比較容易找出狀態問題
Predictability 可預測性 較難 較容易
Modularity 模組化 Distributed domain classes, Encapsulate data/logic, Cross-domain coordination Globally share state, Lose encapsulation, Easily share state
scalability / Maintainability 規模維護 Impure, No strict-order, Scattered mutations Pure, Strict-order, Change centralized
  • 在 Mobx 中，可以保留去規範化的數據。在 Redux 中，主要是保留的數據只是規範化的數據。
  • Mobx 主要使用 observable 來存儲數據。 Redux 主要使用 javascript 對象來存儲數據。
  • 在 Mobx 中，可以藉助可觀察屬性自動完成更新。在 Redux 中，更新需要手動監控。
  • 在 Mobx 中，狀態可以被覆蓋，也稱為不純狀態，因為狀態可以簡單地使用新值進行更新。在 Redux 中，狀態被稱為純狀態，因為狀態是只讀的，不能簡單地覆蓋。這意味著它使用不可變狀態。
  • 在 Mobx 中，調試很困難，因為 Mobx 可用的工具不符合標準，這會導致多次出現不可預測的響應。對於 Redux，有很多可用的開發者工具；純函數和較少的抽象使調試更容易。使用通量範式也可以預測響應。
  • Mobx 更容易學習並且有一個簡單的學習曲線。如果知道 OOP 的概念，那麼對於 javascript 開發人員來說學習 Mobx 是很容易的。
  • Redux 很難學習，因為它有一個陡峭的學習曲線。它遵循函數式編程範式，這需要花費大量精力才能掌握。
  • 在 Mobx 中，有很多內置的抽象，這導致代碼更少。在 Redux 中，抽象較少，需要編寫更多代碼。
  • Mobx 主要用於在更短的時間內快速開發應用程序。 Redux 開發的應用程序通常需要時間，因為它們很複雜。
  • Mobx 的可維護性較差。 Redux 更易於維護。
  • 與 Redux 相比，Mobx 的在線社區和開發者支持較少。與 Mobx 相比，Redux 遠遠領先於開發人員和在線社區支持。

Mobx 主要是初學者首選，因為它簡單易學。 對於那些對函數式編程技能有深刻理解的人來說，Redux 可能是首選。 可以看出 Redux 在開發人員中非常成熟和流行，而 Mobx 並不那麼流行，但 Mobx 可以成為管理應用程序狀態的一個很好的選擇。

選擇 MobX 情境

  • 較小的應用程式
    • Real-time systems, dashboard
    • Text editor, presentation software
    • Not for event based
  • 快速原型開發
  • 小團隊

選擇 Redux 情境

  • 複雜的應用
    • Business apps
    • Event based systems
    • Game events involving a complex reaction
  • 大團隊
  • 經常變更的需求

參考資料

官方

介紹

比較

範例

工具