MobX 的依赖追踪系统是如何工作的？ - 面试题

MobX 的依赖追踪系统是其核心机制，它通过细粒度的追踪实现了高效的响应式更新。以下是 MobX 依赖追踪的详细工作原理：

依赖追踪的基本原理

MobX 使用观察者模式和依赖图来实现依赖追踪。当 observable 被访问时，MobX 会建立依赖关系；当 observable 被修改时，MobX 会通知所有依赖它的观察者。

核心组件

1. Reaction（反应）

Reaction 是依赖追踪的执行单元，包括：

autorun：立即执行，并在依赖变化时自动重新执行
reaction：提供更细粒度的控制，可以指定追踪函数和效果函数
observer（React 组件）：包装 React 组件，使其能够响应状态变化
computed：计算属性，也是一种特殊的 reaction

2. Derivation（派生）

Derivation 表示依赖于 observable 的计算或副作用。每个 derivation 维护一个依赖列表。

3. Atom（原子）

Atom 是最小的可观察单元，每个 observable 对象、数组、Map 等都由多个 atom 组成。

依赖追踪的执行流程

1. 追踪阶段（Tracing）

当 reaction 执行时：

javascript
autorun(() => {
  console.log(store.count); // 访问 observable
});

执行步骤：

MobX 将当前 reaction 标记为"正在追踪"
当访问 store.count 时，MobX 记录下这个 reaction 依赖于 count 这个 atom
继续执行，记录所有访问的 observable
执行完成后，reaction 进入"稳定"状态

2. 通知阶段（Notification）

当 observable 被修改时：

javascript
runInAction(() => {
  store.count++; // 修改 observable
});

执行步骤：

MobX 检测到 count atom 被修改
查找所有依赖于 count 的 reaction
将这些 reaction 标记为"过时"（stale）
在下一个事件循环中，重新执行这些 reaction

依赖图的结构

MobX 维护一个双向的依赖图：

Atom → Derivation：每个 atom 知道哪些 derivation 依赖于它
Derivation → Atom：每个 derivation 知道自己依赖于哪些 atom

这种双向关系使得 MobX 能够高效地进行依赖更新和清理。

细粒度更新

MobX 的依赖追踪是细粒度的，这意味着：

只更新真正需要更新的部分
避免不必要的重新计算和重新渲染
自动处理嵌套的依赖关系

示例：

javascript
class Store {
  @observable firstName = 'John';
  @observable lastName = 'Doe';
  @observable age = 30;

  @computed get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const observerComponent = observer(() => {
  // 只依赖 fullName，不依赖 age
  return <div>{store.fullName}</div>;
});

当 age 变化时，组件不会重新渲染；只有当 firstName 或 lastName 变化时才会重新渲染。

批量更新

MobX 会自动批量更新，避免多次触发 reaction：

javascript
runInAction(() => {
  store.firstName = 'Jane';
  store.lastName = 'Smith';
  store.age = 25;
});

即使修改了多个 observable，相关的 reaction 只会执行一次。

依赖清理

当 reaction 不再需要时，MobX 会自动清理依赖关系：

组件卸载时，observer 会自动清理
使用 dispose() 方法手动清理 reaction
避免内存泄漏

性能优化

MobX 的依赖追踪系统提供了多种性能优化：

懒计算：computed 只在需要时才计算
缓存机制：computed 的结果会被缓存
批量更新：多个状态变化合并为一次更新
细粒度追踪：只追踪真正需要的依赖

调试依赖追踪

MobX 提供了调试工具来查看依赖关系：

javascript
import { trace } from 'mobx';

// 追踪 computed 的依赖
trace(store.fullName);

// 追踪 reaction 的依赖
autorun(() => {
  console.log(store.count);
}, { name: 'myReaction' });

常见问题

1. 循环依赖

MobX 能够检测和避免循环依赖，但设计时应尽量避免。

2. 过度追踪

避免在循环或条件中访问 observable，这可能导致不必要的依赖。

3. 内存泄漏

确保在组件卸载时清理 reaction，避免内存泄漏。

总结

MobX 的依赖追踪系统通过观察者模式和依赖图实现了高效的响应式更新。理解这个系统的工作原理有助于编写更高效的 MobX 代码，并避免常见的性能问题。