Alien Signals 技术分析之响应式系统核心 (Reactive System Core)(四)

这个链接过程是依赖追踪与链接 (Tracking & Linking) 的核心部分，我们将在下一章详细探讨。

2. 传播变化 (propagate)：信号灯变了！

当一个信号 (Signal) 的值被写入新值时，它需要通知所有依赖它的订阅者（比如计算属性 (Computed) 或 副作用 (Effect)）。

核心系统提供的 propagate 函数负责这个“广播”任务。它会遍历信号的所有订阅者，并通知它们：“嘿，你关注的数据变了！”

• 何时发生？ 当你调用 mySignal(newValue) 并且 newValue 与旧值不同时。
• 做什么？ propagate 会找到所有通过 link 建立关系的订阅者。对于每个订阅者，它会设置一个状态标记（比如 Dirty 表示需要重新计算，PendingComputed 或 PendingEffect 表示需要检查或执行）。这就像交通调度系统把依赖该信号的路口的信号灯变红或变黄，提示需要注意。

3. 调度执行 (notifyEffect, updateComputed, processEffectNotifications)：指挥交通！

仅仅标记订阅者“需要更新”还不够，系统还需要决定何时以及如何真正执行更新。比如，计算属性应该在被读取时才重新计算（惰性），而副作用则应该在依赖变化后尽快执行（但可能需要批量处理）。

核心系统提供了一些函数来管理这个调度过程：

• updateComputed：当一个被标记为 Dirty 的计算属性 (Computed) 被读取时，这个函数（或者调用它的 processComputedUpdate）会被触发。它负责：

1. 1. 开始追踪新的依赖 (startTracking)。
   2. 执行用户提供的计算函数 (getter)。
   3. 在执行过程中，通过 link 建立新的依赖关系。
   4. 结束追踪 (endTracking)，清理旧的、不再需要的依赖。
   5. 缓存新的计算结果。
   6. 如果结果变化了，可能需要继续 propagate 给下游依赖者。

• notifyEffect：当一个副作用 (Effect) 被标记为需要执行时（例如，在 propagate 之后），这个函数（或者调用它的 processEffectNotifications）会被触发。它负责：

1. 1. 开始追踪依赖 (startTracking)。
   2. 重新执行用户提供的副作用函数 (fn)。
   3. 在执行过程中，通过 link 建立或确认依赖关系。
   4. 结束追踪 (endTracking)。

• processEffectNotifications：这个函数通常在一次或一批更新操作结束后被调用。它会检查所有被标记为需要执行的副作用，并调用 notifyEffect 来实际执行它们。这有助于批量处理 (Batching)，避免同一个副作用在短时间内被触发多次。

这些调度函数确保了更新以一种高效且可预测的方式进行。

工作流程：一场协调好的演出

让我们通过一个简单的例子，看看响应式系统核心是如何协调信号、计算属性和副作用的：

假设我们有：

• firstName = signal("张")
• lastName = signal("三")
• fullName = computed(() => firstName() + lastName())
• greetingEffect = effect(() => console.log("你好, " + fullName() + "!"))

初始状态下：

1. greetingEffect 首次执行，读取 fullName()。
2. fullName() 首次执行（因为它是惰性的），读取 firstName() 和 lastName()。
3. 核心系统 (link) 建立依赖关系：

• • firstName -> fullName
  • lastName -> fullName
  • fullName -> greetingEffect

现在，用户执行 firstName("李")：

流程解读：

1. 写入与传播: firstName("李") 触发 propagate。
2. 标记依赖: fullName 被标记为 Dirty，greetingEffect 被标记为 PendingEffect 并加入待处理队列。
3. 处理通知: processEffectNotifications 开始处理队列。
4. 执行 Effect: 轮到 greetingEffect，系统准备执行它的函数。
5. 读取 Computed: greetingEffect 的函数读取 fullName()。
6. 重新计算 Computed: fullName 发现自己是 Dirty，触发 processComputedUpdate。
7. 追踪与计算: processComputedUpdate 内部重新执行 fullName 的 getter，再次读取 firstName 和 lastName，并确认依赖关系 (link)。计算出新值 "李三"。
8. 缓存与返回: fullName 缓存 "李三" 并清除 Dirty 标记，然后将新值返回给 greetingEffect。
9. 完成 Effect: greetingEffect 使用新值 "李三" 完成其 console.log 操作。
10. 清理: endTracking 清理追踪状态。

整个过程由响应式系统核心在幕后精确地协调和调度。

核心代码一瞥

我们不会深入 createReactiveSystem 的所有细节，但可以看看它是如何在 src/index.ts 中被使用的，以及它返回的一些核心函数是如何被 signal 等调用的。

createReactiveSystem 的使用

在 src/index.ts 的开头，你会看到 createReactiveSystem 被调用，并传入了两个关键的配置函数：updateComputed 和 notifyEffect。这就像是告诉核心引擎“当你需要更新计算属性时，就这样做”以及“当你需要通知副作用时，就这样做”。

解释:

• createReactiveSystem 返回一个包含多个底层函数的对象，这些函数是响应式机制的核心。
• 我们传入的 updateComputed 和 notifyEffect 函数定义了当核心系统决定要更新计算属性或执行副作用时，具体应该执行什么操作（主要是调用用户提供的 getter 或 fn，并管理依赖追踪）。

核心函数的使用示例

这些由 createReactiveSystem 返回的函数，被 signal, computed, effect 等函数在内部广泛使用。

信号写入 (signalGetterSetter) 调用 propagate:

计算属性读取 (computedGetter) 调用 processComputedUpdate 和 link:

副作用创建 (effect) 调用 startTracking, endTracking, link:

这些例子展示了我们之前学习的 signal, computed, effect 是如何依赖响应式系统核心提供的底层能力来工作的。

总结

在本章中，我们揭开了 master 响应式系统幕后的“大脑”——响应式系统核心 (Reactive System Core)。

• 它是由内部函数 createReactiveSystem 创建的引擎，负责协调整个响应式流程。
• 用户通常不直接与它交互，但 signal, computed, effect 都依赖它提供的底层能力。
• 核心职责包括：
• • link: 建立依赖 (Dependency)和订阅者 (Subscriber)之间的连接。
  • propagate: 在依赖变化时，传播通知，标记需要更新的订阅者。
  • updateComputed, notifyEffect, processEffectNotifications: 调度和执行计算属性的重新计算以及副作用的重新运行，并处理优化（如批量处理）。
• 它就像一个中央交通调度系统，确保数据变化能够顺畅、高效地流向所有相关的计算和副作用。

理解响应式核心的存在和职责，有助于我们更深入地理解为什么 master 的响应式系统能够自动、高效地工作。

下一步

我们已经了解了响应式核心的整体作用，以及它提供的几个关键功能。其中，依赖追踪和链接 (link) 是实现自动化的基础——系统必须先知道“谁依赖谁”，才能在变化发生时进行正确的通知。

在下一章，我们将聚焦于这个过程，深入探讨 link, startTracking, endTracking 等函数是如何工作的，以及依赖关系是如何被精确地建立和维护的。