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
  • 大团队
  • 经常变更的需求

参考资料

官方

介绍

比较

范例

工具