用故事讲述 MobX 源码（一）：autorun

引言

在前端开发中，状态管理是一个永恒的话题。如何管理应用程序的状态，让组件能够响应状态的变化，是困扰前端开发者的难题之一。MobX 是一个流行的 JavaScript 状态管理库，它采用响应式编程的思想，让开发者能够轻松管理应用程序的状态。

MobX 的核心思想是使用 autorun 函数来观察状态的变化。autorun 函数可以理解为一个观察者，它会监听应用程序的状态，当状态发生变化时，autorun 函数会自动执行，从而更新组件的视图。

autorun 函数的故事

为了更好地理解 autorun 函数，我们不妨把它想象成一个好奇的小精灵。这个小精灵的任务是时刻关注应用程序的状态，一旦状态发生变化，它就会立刻做出反应。

小精灵的工作方式非常简单。首先，它会把需要观察的状态变量存储在一个列表中。然后，它会进入一个死循环，不断地检查列表中的状态变量是否发生变化。如果有状态变量发生了变化，小精灵就会执行一个回调函数，这个回调函数通常是用来更新组件的视图。

autorun 函数的实现

autorun 函数的实现并不复杂，它的核心代码如下：

autorun(fn) {
  const reaction = new Reaction(fn);
  reaction.schedule();
  return reaction.dispose;
}

autorun 函数接受一个回调函数作为参数，这个回调函数会在状态变量发生变化时执行。autorun 函数内部会创建一个 Reaction 对象，这个 Reaction 对象负责监听状态变量的变化并执行回调函数。

反应式编程与状态管理

MobX 的 autorun 函数是反应式编程思想在状态管理中的应用。反应式编程是一种编程范式，它强调数据流和变化传播。在反应式编程中，状态变量被视为数据流，而autorun 函数就是数据流的观察者。当数据流发生变化时，autorun 函数会自动执行，从而更新组件的视图。

MobX 通过 autorun 函数实现了状态管理。开发者可以通过 autorun 函数来观察应用程序的状态，当状态发生变化时，autorun 函数会自动执行，从而更新组件的视图。这种方式可以有效地降低开发者的工作量，让开发者能够更加专注于业务逻辑的开发。

结语

autorun 函数是 MobX 的核心功能之一，它通过观察状态变量的变化来实现响应式编程和状态管理。通过对 autorun 函数的深入理解，开发者可以更好地掌握 MobX 的原理和实现，从而更加熟练地使用 MobX 来管理应用程序的状态。

在接下来的文章中，我们将继续深入探讨 MobX 源码，带你揭开 MobX 背后的更多秘密。