Mobx 揭秘：深入剖析其执行流程与核心概念

前端

2024-01-21 15:08:02

Mobx：洞悉其精髓，从零打造一个简化版

在繁杂多变的前端世界中，状态管理如同一块绊脚石，阻碍着我们构建健壮且可维护的应用程序。而 Mobx 的出现恰似一缕清风，拂过这片荆棘丛生的领域，为我们带来了一条康庄大道。

初识 Mobx

Mobx 是一种轻量级、可预测的状态管理库，它基于响应式编程模型，让开发人员能够以一种声明式的方式管理应用程序状态。其核心思想在于，将应用程序状态视为可观察的对象，当这些对象发生改变时，相应的视图将自动更新。

揭秘 Mobx 执行流程

Mobx 的执行流程可以用一个简单的循环来

动作触发： 当一个可观察对象（即 Mobx 中管理的状态）发生改变时，会触发一个动作。
依赖收集： 动作执行过程中，Mobx 会收集所有依赖于该可观察对象的反应式计算。
计算评估： 动作结束后，Mobx 会依次评估所有依赖的计算，并更新对应的视图。

核心概念浅析

为了深入理解 Mobx，我们需要了解几个关键概念：

可观察对象： 存储应用程序状态的数据结构，当其发生改变时，会触发动作。
动作： 修改可观察对象状态的方法。Mobx 规定所有状态修改必须通过动作来完成，以确保应用程序状态的一致性。
反应式计算： 依赖于可观察对象的值进行计算的函数。当可观察对象改变时，反应式计算会自动重新计算并更新结果。

从零实现一个简化版 Mobx

为了更好地理解 Mobx 的工作原理，我们从头开始实现一个简化的版本：

class Observable {
  constructor(value) {
    this.value = value;
    this.observers = [];
  }

  set(newValue) {
    this.value = newValue;
    this.notifyObservers();
  }

  notifyObservers() {
    this.observers.forEach(observer => observer());
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(o => o !== observer);
  }
}

class Computed {
  constructor(getter) {
    this.getter = getter;
    this.value = this.getter();
    this.observers = [];
  }

  get() {
    return this.value;
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(o => o !== observer);
  }

  update() {
    const newValue = this.getter();
    if (newValue !== this.value) {
      this.value = newValue;
      this.notifyObservers();
    }
  }

  notifyObservers() {
    this.observers.forEach(observer => observer());
  }
}

const observable = new Observable(0);
const computed = new Computed(() => observable.value * 2);

computed.subscribe(() => {
  console.log('computed value updated:', computed.get());
});

observable.set(1);
observable.set(2);

Mobx 与 Redux 的对比

Mobx 和 Redux 都是流行的状态管理库，但它们有不同的侧重点：

特征	Mobx	Redux
架构	响应式编程	不可变状态和动作
状态更新	自动	显式分发动作
性能	适用于较小的应用程序	适用于较大的应用程序
学习曲线	较低	较高