深入MobX源码揭秘依赖收集与双向绑定机制

前言

在上一章中，我们看到了 observer 高阶组件里通过创建 Reaction 对象来建立 react 组件和 mobx 的关联，这一章我们深入 Reaction，看看他是如何做这件事。

在MobX中，可观察对象是那些能够被跟踪变化的对象。计算值是那些依赖于一个或多个可观察对象的属性。当一个可观察对象的属性发生变化时，MobX会自动更新所有依赖于它的计算值。这种机制称为依赖收集。

MobX是如何表示可观察对象和计算值的？

MobX使用 autorun 函数来创建计算值。autorun 函数接受一个函数作为参数，这个函数会在每次可观察对象发生变化时执行。

autorun(() => {
  // 计算值的逻辑
});

MobX使用 observable 函数来创建可观察对象。observable 函数接受一个对象作为参数，这个对象的所有属性都会变成可观察的。

const person = observable({
  name: 'John',
  age: 30
});

MobX是如何进行依赖收集的？

当一个计算值被创建时，MobX会自动收集它依赖的可观察对象。这可以通过在计算值的函数中使用 reaction 函数来实现。

reaction(() => {
  // 计算值的逻辑
}, [person.name, person.age]);

reaction 函数接受两个参数，第一个参数是计算值的函数，第二个参数是计算值依赖的可观察对象的数组。当任何一个可观察对象发生变化时，MobX都会自动调用计算值的函数。

MobX是如何实现双向绑定的？

双向绑定是MobX最强大的特性之一。它允许我们在组件中声明式地定义数据的流动。这可以通过使用 @observable 和 @computed 修饰符来实现。

class Person {
  @observable name = 'John';
  @observable age = 30;

  @computed get fullName() {
    return `${this.name} ${this.age}`;
  }
}

const person = new Person();

person.name = 'Jane'; // fullName也会自动更新

在上面的例子中，name 和 age 是可观察的属性，fullName 是一个计算值。当 name 或 age 发生变化时，fullName 也会自动更新。

总结

MobX是一个轻量级的状态管理库，它使用反应式编程范式来管理状态。MobX使用 autorun 函数来创建计算值，使用 observable 函数来创建可观察对象，使用 reaction 函数来收集计算值依赖的可观察对象。MobX使用这些机制来实现双向绑定，这使得我们在组件中声明式地定义数据的流动成为可能。