揭秘MobX 6：简易 Observable 和 Autorun 原理剖析

2024-01-15 02:09:03

前言

大家好，欢迎来到MobX 6系列文章的第一篇。在这一系列中，我们将一起探索MobX的原理并解析其核心源码。作为开篇，本文将通过实现一个简易的观察-反应模型，阐述MobX的核心原理。

什么是MobX？

MobX是一个用于JavaScript应用程序的状态管理库，它以响应式编程为基础，允许开发人员使用一种简洁的方式来管理应用程序的状态。MobX的核心概念是可观察对象和自动运行函数。可观察对象允许我们追踪状态的变化，而自动运行函数则允许我们在状态变化时执行相应的操作。

实现一个简易的Observable和Autorun

为了更好地理解MobX的核心原理，我们先来实现一个简单的可观察对象和自动运行函数。

可观察对象

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

  get value() {
    return this._value;
  }

  set value(newValue) {
    if (this._value !== newValue) {
      this._value = newValue;
      this._notifyObservers();
    }
  }

  _notifyObservers() {
    this._observers.forEach(observer => observer());
  }

  subscribe(observer) {
    this._observers.push(observer);
    return () => this._observers.splice(this._observers.indexOf(observer), 1);
  }
}

这个可观察对象包含一个私有变量_value来存储其值。我们通过get和set方法来访问和修改这个值。当set方法被调用时，如果新值与旧值不同，我们会调用_notifyObservers()方法来通知所有的观察者。观察者可以通过调用subscribe()方法来订阅这个可观察对象，从而在值发生变化时执行相应的操作。

自动运行函数

function autorun(fn) {
  let isRunning = true;
  const observer = () => {
    if (isRunning) {
      fn();
    }
  };

  fn();
  return () => {
    isRunning = false;
  };
}

自动运行函数接收一个函数作为参数，并在该函数被调用时执行该函数。当自动运行函数被调用时，它会创建一个观察者，并在值发生变化时执行该观察者。我们通过一个布尔变量isRunning来控制是否执行观察者，当自动运行函数被销毁时，我们会将isRunning设置为false，从而停止观察者。

如何使用MobX？

现在我们已经实现了一个简单的可观察对象和自动运行函数，接下来我们来看看如何使用它们。

const observable = new Observable(10);

const autorunFn = () => {
  console.log(`The value is ${observable.value}`);
};

autorun(autorunFn);

observable.value = 20;

在这个例子中，我们创建了一个可观察对象observable，并将其初始值设置为10。然后我们创建了一个自动运行函数autorunFn，该函数将在每次observable的值发生变化时执行。我们调用autorun()函数来启动自动运行函数，并将其返回的值存储在autorunFn中。最后，我们调用observable.value = 20来修改observable的值，这将触发自动运行函数并输出The value is 20。