MobX: 常用 API 及易混点解析

前端

2024-02-08 16:55:44

MobX: 常用 API 及易混点解析

简介

MobX 是一种流行的状态管理库，以其简单易用和卓越的性能而著称。它允许开发人员通过定义可观察数据和由此衍生的计算值或操作，轻松地管理应用程序状态。

常用 API

@observable

将属性标记为可观察的，以便当其值发生变化时通知观察者。

@computed

基于可观察属性创建计算值，并在任何可观察属性发生变化时自动更新。

@autorun

定义对可观察属性变化的反应，并在发生变化时执行代码块。

action

执行状态更改的函数，可确保更改在事务中安全地进行，并且可以观察到副作用。

易混点解析

computed vs autorun

computed 创建一个只读计算值，而 autorun 定义一个副作用函数。
computed 仅在依赖的可观察属性发生变化时执行，而 autorun 在任何可观察属性发生变化时执行。

action vs mutation

action 是一种包装函数，确保状态更改安全、原子性和可观察，而 mutation 直接修改可观察属性的值，不保证原子性和可观察性。

优势

简单易用：
MobX 比 Redux 等其他状态管理库更容易上手，无需编写大量样板代码。

自动化更新：
MobX 自动管理依赖关系并更新状态，简化了状态管理。

卓越性能：
MobX 使用高效的数据结构和算法，确保快速且可扩展的性能。

示例

// 定义一个可观察属性
class Counter {
  @observable count = 0;

  // 定义一个计算值
  @computed get doubleCount() {
    return this.count * 2;
  }

  // 定义一个反应
  @autorun(() => {
    console.log(`Count: ${this.count}`);
  });

  // 执行一个 action
  @action increment() {
    this.count++;
  }
}