Alien Signals 技术分析之副作用作用域 (EffectScope)(八)

欢迎来到 alien signals 响应式系统学习之旅的最后一章！在上一章 第 7 章：订阅者 (Subscriber) 中，我们了解了响应式系统中负责响应变化的“行动者”。我们特别提到了 副作用 (Effect)，它是连接响应式状态和外部世界的桥梁。但是，当我们的应用变得复杂，可能会创建大量的副作用。我们该如何有效地管理它们的生命周期呢？

问题：如何批量管理副作用？

想象一下，你正在构建一个用户界面组件。在这个组件内部，你可能创建了好几个副作用 (Effect)：

• 一个 effect 用于监听窗口大小变化并调整布局。
• 另一个 effect 用于根据用户的输入（一个信号 (Signal)）自动向服务器发送请求。
• 还有一个 effect 用于在某个数据变化时更新 DOM。

当这个组件不再需要（比如用户导航到其他页面，组件被卸载）时，这些 effect 就不应该再继续运行了。否则，它们可能会访问已经不存在的数据，或者执行不必要的操作，导致错误或内存泄漏。

我们当然可以手动保存每个 effect 返回的 stop 函数，然后在组件卸载时逐一调用它们：

import { signal, effect } from './src/index.js';

const data = signal(0);
const input = signal('');

// 假设在组件创建时...
const stopEffect1 = effect(() => console.log("Data 变化:", data()));
const stopEffect2 = effect(() => console.log("Input 变化:", input()));
// ... 可能还有更多 effect ...

// 假设在组件卸载时...
console.log("准备停止所有 effects...");
stopEffect1();
stopEffect2();
// ... 手动停止所有 ...
console.log("所有 effects 已停止。");

data(1); // 不会再打印 "Data 变化: 1"
input('hello'); // 不会再打印 "Input 变化: hello"

这看起来可行，但如果有很多 effect，手动管理它们会变得非常繁琐且容易出错。我们希望有一种更简单的方式来组织和管理这些相关的 effect，并在需要时一次性将它们全部停止。

副作用作用域 (EffectScope) 就是为了解决这个问题而设计的！

什么是副作用作用域？

你可以把 副作用作用域 (EffectScope) 想象成一个文件管理器里的文件夹。

• 文件 (Effect): 你创建的每一个 副作用 (Effect) 就像一个文件。
• 文件夹 (EffectScope): EffectScope 就是一个文件夹。
• 放入文件: 当你在这个“文件夹”内部创建文件（effect）时，这些文件会自动被归入这个文件夹。
• 管理文件夹: 当你对这个文件夹执行操作（比如“删除”或“停止”）时，文件夹内所有的文件（effect）都会受到影响。

核心思想：

EffectScope 提供了一种组织和管理多个 副作用 (Effect) 生命周期的方法。在一个作用域内创建的 Effect 会自动被收集起来。当作用域被停止时，所有内部收集到的 Effect 也会被自动停止。

这使得管理一组相关的响应式效果变得非常方便，特别是在处理组件生命周期等场景时。

如何使用副作用作用域？

使用 effectScope 函数可以创建一个新的副作用作用域。

1. 创建作用域并收集 Effect

你可以调用 effectScope 函数，并传入一个函数作为参数。在这个函数内部创建的所有 effect 都会被自动收集到这个作用域中。

import { signal, effect, effectScope } from './src/index.js';

const counter = signal(0);

console.log("创建 EffectScope...");

// 创建一个 EffectScope
const scope = effectScope(() => {
  // 在 scope 函数内部创建的 effect 会被自动收集
  effect(() => {
    console.log("Effect 1: Counter is", counter());
  });

  effect(() => {
    console.log("Effect 2: Counter x 2 is", counter() * 2);
  });

  // 你也可以在这里创建计算属性等，它们也会被关联
});

console.log("EffectScope 已创建，内部 effects 已首次执行。");

console.log("--- 更新 counter ---");
counter(1); // 两个 effect 都会重新执行

输出:

创建 EffectScope...
Effect 1: Counter is 0 // Effect 1 首次执行
Effect 2: Counter x 2 is 0 // Effect 2 首次执行
EffectScope 已创建，内部 effects 已首次执行。
--- 更新 counter ---
Effect 1: Counter is 1 // Effect 1 因 counter 变化而执行
Effect 2: Counter x 2 is 2 // Effect 2 因 counter 变化而执行

解释:

• 我们调用 effectScope(...) 创建了一个作用域。
• 传递给 effectScope 的函数 () => { ... } 会立即执行。
• 在这个函数内部，我们创建了两个 effect。因为它们是在 scope 处于活动状态时创建的，所以它们自动被“放入”了 scope 这个“文件夹”中。
• 像普通 effect 一样，它们在创建时会立即执行一次。
• 当 counter 变化时，这两个 effect 都会正常响应。

2. 停止作用域

effectScope 函数本身并不会返回任何东西，它仅仅是执行了你传入的函数。但通常我们会使用它返回的 stop 函数（就像 effect 返回 stop 函数一样）来控制作用域的生命周期。（注意：示例代码中的 alien signals 实现 effectScope 可能与 Vue 3 的 effectScope API 略有不同，它可能直接返回 stop 函数，或者需要一个显式的 API 来获取。根据 alien signals 的代码，它直接返回了 stop 函数）。

effectScope 函数本身也返回一个 stop 函数。调用这个 stop 函数会停止该作用域内收集的所有 effect。

import { signal, effect, effectScope } from './src/index.js';

const counter = signal(0);

console.log("创建 EffectScope...");

// effectScope 返回一个 stop 函数
const stopScope = effectScope(() => {
  effect(() => {
    console.log("Effect 1: Counter is", counter());
  });

  effect(() => {
    console.log("Effect 2: Counter x 2 is", counter() * 2);
  });
});

console.log("EffectScope 已创建。");

console.log("--- 更新 counter (scope 激活时) ---");
counter(1);

console.log("--- 停止 Scope ---");
stopScope(); // 调用 scope 的 stop 函数

console.log("Scope 已停止。");

console.log("--- 再次更新 counter (scope 停止后) ---");
counter(2); // 内部的 effects 不再执行

输出:

创建 EffectScope...
Effect 1: Counter is 0
Effect 2: Counter x 2 is 0
EffectScope 已创建。
--- 更新 counter (scope 激活时) ---
Effect 1: Counter is 1
Effect 2: Counter x 2 is 2
--- 停止 Scope ---
Scope 已停止。
--- 再次更新 counter (scope 停止后) ---
// (没有任何 effect 打印输出)

解释:

• effectScope(...) 返回了一个名为 stopScope 的函数。
• 在调用 stopScope() 之前，作用域内的 effect 正常工作。
• 调用 stopScope() 后，该作用域被停止。这意味着它内部收集的所有 effect 也被自动停止了。
• 因此，当 counter(2) 执行时，虽然 counter 的值变了，但之前在 scope 内创建的两个 effect 不再收到通知，也不会再执行了。

这就是 EffectScope 的核心用途：提供一种简单的方式来批量管理和清理一组相关的副作用。

3. 分离的作用域创建和运行 (Detached Scope)

在某些情况下，你可能想先创建一个作用域，但不立即执行其中的逻辑，而是在稍后的某个时间点手动运行。虽然 alien signals 的 effectScope 默认会立即执行传入的函数，但理解分离的概念对理解 Vue 3 的 EffectScope API 有帮助。

在 alien signals 的当前实现中，你总是需要传入一个函数并在其中创建 effects，它们会自动被收集。

4. 嵌套作用域

EffectScope 可以嵌套。当一个父作用域被停止时，它内部的所有子作用域以及这些子作用域中的所有 effect 都会被递归地停止。

import { signal, effect, effectScope } from './src/index.js';

const counter = signal(10);

const stopOuterScope = effectScope(() => {
  console.log("进入外部 Scope");
  effect(() => console.log("Outer Effect: Counter is", counter()));

  // 创建一个嵌套的 Scope
  const stopInnerScope = effectScope(() => {
    console.log("进入内部 Scope");
    effect(() => console.log("Inner Effect: Counter is", counter()));
  });

  // 你也可以选择单独停止内部 scope
  // stopInnerScope();
});

console.log("--- 更新 counter (内外 scope 都激活) ---");
counter(11);

console.log("--- 停止外部 Scope ---");
stopOuterScope(); // 这会同时停止内部 scope 和所有 effects

console.log("--- 再次更新 counter (所有 scope 停止后) ---");
counter(12); // 没有 effect 执行

输出:

进入外部 Scope
Outer Effect: Counter is 10
进入内部 Scope
Inner Effect: Counter is 10
--- 更新 counter (内外 scope 都激活) ---
Outer Effect: Counter is 11
Inner Effect: Counter is 11
--- 停止外部 Scope ---
--- 再次更新 counter (所有 scope 停止后) ---
// (没有任何 effect 打印输出)

解释:

• 我们在外部 effectScope 内部创建了另一个 effectScope（内部 Scope）。
• 内部 Scope 中创建的 effect (Inner Effect) 被收集到内部 Scope 中。
• 同时，内部 Scope 本身（以及外部 Scope 中的 Outer Effect）被收集到外部 Scope 中。
• 当我们调用 stopOuterScope() 时，它不仅停止了 Outer Effect，也停止了它收集到的所有依赖，包括那个内部 Scope。停止内部 Scope 又会进而停止 Inner Effect。
• 最终结果是，所有 effect 都被停止了。

副作用作用域的内部机制

理解 EffectScope 是如何在幕后工作的，有助于我们更好地利用它。

创建和收集的过程 (effectScope)

当你调用 effectScope(fn) 时：

1. 创建 Scope 对象: 系统内部会创建一个 EffectScope 对象。这个对象需要像 订阅者 (Subscriber) 一样，能够追踪依赖（它所收集的 effect 或子 scope），所以它也实现了 Subscriber 接口，拥有 deps 和 flags 等属性。它还有一个特殊的标记 isScope: true 来区分普通 effect。
2. 设置活动作用域 (activeScope): 系统会将一个全局变量 activeScope 设置为刚刚创建的这个 EffectScope 对象。这就像打开了一个特定的文件夹，告诉系统：“接下来创建的文件（effect）都放到这个文件夹里”。
3. 执行用户函数 (fn): 系统立即执行你传入的 fn 函数。
4. 自动链接: 在 fn 函数执行期间，如果内部调用了 effect() 来创建副作用：
5. • effect() 函数内部会检查当前的 activeScope 是否存在。
   • 如果存在，effect() 会调用核心的 link(effectObject, activeScope) 函数。
   • 这会将新创建的 effectObject 添加到 activeScope 的依赖列表 (deps) 中，同时也会在 effectObject 内部（如果需要的话）记录它所属的 scope。这就像把文件放进了当前打开的文件夹。
   • 如果内部又创建了嵌套的 effectScope，同样会进行链接。
5. 恢复活动作用域: 当 fn 函数执行完毕后（无论正常结束还是出错），系统会恢复 activeScope 到它之前的值（可能是 undefined 或外层的另一个 scope）。这就像关闭了当前文件夹。
6. 返回停止函数: effectScope 函数返回一个绑定了该 EffectScope 对象的 stop 函数（通常是 effectStop）。

停止的过程 (stopScope)

当你调用由 effectScope 返回的 stopScope() 函数时：

1. 目标 Scope 对象: stopScope() 函数内部的 this 指向对应的 EffectScope 对象。
2. 清理依赖: 这个 stop 函数（通常是 effectStop）的核心工作是清理该 scope 对象所追踪的所有依赖。它会利用 startTracking(scope) 和 endTracking(scope) 组合（这在 alien signals 中是一个通用的清理依赖的模式）。
3. • startTracking 准备清理。
   • endTracking 遍历 scope 的 deps 列表（其中包含了所有直接收集的 effect 和子 scope）。对于每个依赖链接，它会调用 clearTracking 来断开链接。
   • 递归停止: 当 clearTracking 断开一个链接时，如果被断开的依赖本身也是一个 EffectScope（子作用域），它可能会触发子作用域的清理逻辑（虽然 alien signals 的 clearTracking 主要负责断链，但一个完整的实现会确保子作用域也被停止）。如果被断开的是一个 effect，则该 effect 将不再能被其依赖的信号通知，从而停止运行。

本质上，停止一个 EffectScope 就是遍历它收集的所有“文件”（effect 和子 scope），并确保它们与外界的联系（依赖关系）被切断，或者直接调用它们的 stop 方法。

简单流程图

代码实现

我们可以在 src/index.ts 和 src/system.ts 中找到相关的实现。

EffectScope 接口与对象创建 (effectScope 函数):

// src/index.ts (简化)

// EffectScope 接口继承自 Subscriber，并添加 isScope 标记
interface EffectScope extends Subscriber {
	isScope: true;
}

export function effectScope<T>(fn: () => T): () => void {
  // 1. 创建 EffectScope 对象
  const e: EffectScope = {
    deps: undefined,     // 作为 Subscriber，追踪它收集的 effects/scopes
    depsTail: undefined,
    flags: SubscriberFlags.Effect, // 标记为 Effect 类型（会参与通知流程）
    isScope: true,       // 特殊标记
  };

  const prevScope = activeScope; // 保存之前的 activeScope
  activeScope = e; // 2. 设置当前 activeScope

  try {
    fn(); // 3. 执行用户函数 fn
          // (内部创建 effect 时会检查 activeScope 并 link 到 e)
  } finally {
    activeScope = prevScope; // 5. 恢复 activeScope
  }

  // 6. 返回绑定了 scope 对象的停止函数
  return effectStop.bind(e);
}

effect 函数如何链接到 activeScope:

// src/index.ts (effect 函数简化，增加 scope 检查)
export function effect<T>(fn: () => T): () => void {
  const e: Effect = { /* ... 创建 effect 对象 ... */ };

  // 4. 自动链接: 检查是否存在 activeScope
  if (activeScope !== undefined) {
    link(e, activeScope); // 将 effect 链接到当前的 scope
  }
  // (之前的逻辑：如果 activeSub 存在，也进行链接，用于 effect 嵌套)
  // else if (activeSub !== undefined) { link(e, activeSub); }

  // ... (effect 首次执行与追踪自身依赖) ...

  return effectStop.bind(e); // 返回 effect 自身的 stop 函数
}

停止函数 (effectStop):

EffectScope 和 Effect 都使用同一个 effectStop 函数来停止。当它绑定到 EffectScope 对象并被调用时，它的作用是清理该 scope 的 deps 列表。

// src/index.ts (简化)
function effectStop(this: Subscriber): void {
  // 当 this 是 EffectScope 时，
  // startTracking 和 endTracking 会遍历 this.deps (即 scope 收集的 effects/scopes)
  // 并通过 clearTracking 断开它们与 scope 的链接。
  startTracking(this);
  endTracking(this);
  // 对于 EffectScope，这有效地使其停止追踪其内容。
  // 一个更完整的实现可能还需要递归地调用子 scope 的 stop。
}

解释:

• EffectScope 本身也实现了 Subscriber 接口，这样它就可以被嵌套在其他 scope 或 effect 中，并能参与依赖追踪和清理流程。
• 全局变量 activeScope 是实现自动收集的关键。
• link 函数负责将新创建的 effect 或子 scope “放入”当前的 activeScope 的 deps 列表中。
• 通用的 effectStop 函数通过 startTracking 和 endTracking 来清理目标 Subscriber（无论是 Effect 还是 EffectScope）的依赖列表。

总结

在本章中，我们学习了 副作用作用域 (EffectScope)，一个用于管理副作用生命周期的强大工具：

• 它解决了手动管理多个 副作用 (Effect) 的 stop 函数带来的繁琐和易错问题。
• 它像一个文件夹，可以自动收集在其中创建的 effect 和嵌套的 scope。
• 通过调用 effectScope 返回的 stop 函数，可以一次性停止作用域内收集的所有内容。
• 作用域可以嵌套，停止父作用域会递归停止所有子作用域及其内容。
• 内部机制依赖于全局 activeScope 状态和 link 函数进行自动收集，并通过通用的 effectStop 机制（利用 startTracking/endTracking 清理依赖）来停止。

EffectScope 是构建健壮、无内存泄漏的响应式应用的重要组成部分，特别是在涉及组件或其他有明确生命周期概念的场景中。

结束语

恭喜你完成了 alien signals 响应式系统核心概念的学习之旅！

我们从最基础的 信号 (Signal) 开始，学习了如何存储和更新状态；然后探索了 计算属性 (Computed) 如何根据现有状态派生新状态；接着了解了 副作用 (Effect) 如何响应状态变化并执行操作。

为了理解这一切是如何自动协同工作的，我们深入研究了 响应式系统核心 (Reactive System Core)，揭示了 依赖追踪与链接 (Tracking & Linking) 的魔法，并分别认识了核心角色——依赖 (Dependency) 和 订阅者 (Subscriber)。最后，我们学习了如何使用 副作用作用域 (EffectScope) 来优雅地管理副作用的生命周期。

希望这个系列教程能帮助你理解响应式编程的基本原理和 alien signals 这个具体实现的核心机制。掌握了这些基础，你将能更好地理解和使用更高级的响应式框架（如 Vue.js、SolidJS 等），甚至构建自己的响应式库！