透过源码看MobX的observable对象中的set方法如何工作

2023-09-10 04:06:13

mobx中，observable对象是一个可观察的对象，我们可以监听它的变化，当它发生变化时，依赖于它的其他对象也会发生变化，这个过程是自动的。这是通过使用ES6 proxy来实现的。

observable对象的set方法是用于设置observable对象的值。当observable对象的某个值发生变化时，该方法就会被调用。

observable对象的set方法内部，首先会检查observable对象的某个值是否发生了变化，如果发生了变化，则会更新observable对象的值，并触发propagateChange方法。

propagateChange方法会遍历observable对象的reactions属性，reactions属性是一个数组，包含了所有依赖于observable对象的reaction对象。reaction对象是一个封装了观察者和回调函数的对象。当observable对象的某个值发生变化时，propagateChange方法会调用reaction对象的回调函数，从而通知观察者observable对象的某个值发生了变化。

reaction对象的回调函数可以是一个函数，也可以是一个autorun函数。autorun函数是一个特殊的reaction对象，它会在每次observable对象的某个值发生变化时自动执行。

MobX通过observable对象和set方法实现了一种响应式编程模型，这种模型使得我们可以轻松地构建响应式的应用程序。

observable对象的set方法源码

set(name: string | number | symbol, newValue: any) {
  // ...省略部分代码

  // 检测值是否发生变化
  const oldValue = this._values[name];
  const hasChanged = this._valueWillChange(oldValue, newValue);
  if (!hasChanged) {
    return;
  }

  // 值发生变化，更新observable对象的值
  this._values[name] = newValue;

  // 触发propagateChange方法
  this._propagateChange(name, oldValue);
}

propagateChange方法源码

_propagateChange(name: string | number | symbol, oldValue: any) {
  const reactions = this._reactions;
  for (const reaction of reactions) {
    // 检查reaction对象是否依赖于observable对象的某个值
    if (reaction.observing[name] !== undefined) {
      // reaction对象依赖于observable对象的某个值，调用reaction对象的回调函数
      reaction.schedule();
    }
  }
}