实现 Signal

January 13, 2026

摘自 tc39/proposal-signals

为了开发复杂的用户界面（UI），JavaScript 应用开发者需要以一种高效的方式存储、计算、使失效、同步并将状态推送到应用的视图层。

用户界面通常不仅仅涉及管理简单的数值，往往还经常涉及渲染计算状态（computed state），而这些状态又依赖于一个复杂的其它数值树，或者依赖于本身也是由计算得出的状态。

**Signals（信号）**的目标就是提供管理此类应用状态的基础设施，从而让开发者能够专注于业务逻辑，而无需分心于这些重复的细节。

类 Signal 的机制也被独立地发现在非 UI 场景中非常有用，特别是在构建系统中，用于避免不必要的重复构建。

在响应式编程中，使用 Signals 可以免除手动管理应用更新的需求。

一种基于状态变化进行更新的声明式编程模型。

极简模型

最基础的响应式系统核心在于“发布-订阅”模式。需要一个容器来存储值，当值变化时通知订阅者。

/**
 * 指向当前正在执行的副作用函数 (依赖收集的核心)
 */
let activeEffect: VoidFunction | null = null;

/**
 * 创建响应式状态容器（信号）
 */
export function signal<T>(initialValue: T) {
    let value = initialValue;
    const subscribers = new Set<VoidFunction>();

    const read = () => {
        // 依赖收集：如果有副作用函数正在执行，说明它读取了这个信号
        if (activeEffect) {
            subscribers.add(activeEffect);
        }
        return value;
    };

    const write = (newValue: T) => {
        if (value !== newValue) {
            value = newValue;
            // 派发更新：信号的变化会通知所有订阅者
            [...subscribers].forEach((fn) => fn());
        }
    };

    return [read, write] as const;
}

/**
 * 注册副作用函数（订阅者）
 */
export function effect(fn: VoidFunction) {
    const execute = () => {
        activeEffect = execute;
        try {
            fn();
        } finally {
            activeEffect = null;
        }
    };

    execute(); // 立即执行以建立初始依赖
}

存在问题：

无法处理条件分支（分支切换）：如果 effect(() => show ? data : null)，当 show 变为 false 后，data 的变化不应再触发 effect。目前的实现会导致内存泄漏和无效执行。
没有清理机制：subscribers 会无限膨胀。

动态依赖与自动清理

为解决分支切换问题，需要在每次 effect 重新执行前，清除之前的订阅关系，重新收集依赖。
这就要求 effect 知道它依赖了谁，signal 也知道谁依赖了它（双向记录）。

interface ReactiveEffect {
    (): void;
    // 反向存储：effect 知道哪些 Signal 的订阅者集合里包含了自己
    deps: Set<Set<ReactiveEffect>>;
}

let activeEffect: ReactiveEffect | null = null;

function cleanup(effect: ReactiveEffect) {
    // 从所有依赖的 Signal 中移除当前 effect
    for (const dep of effect.deps) {
        dep.delete(effect);
    }
    effect.deps.clear();
}

export function signal<T>(initialValue: T) {
    let value = initialValue;
    const subscribers = new Set<ReactiveEffect>();

    const read = () => {
        if (activeEffect) {
            // 1. Signal 记录 Effect
            subscribers.add(activeEffect);
            // 2. Effect 记录 Signal (的 subscribers 集合)
            activeEffect.deps.add(subscribers);
        }
        return value;
    };

    const write = (newValue: T) => {
        if (value !== newValue) {
            value = newValue;
            // 必须创建快照！因为 cleanup 会在执行过程中修改 subscribers，
            // 导致遍历过程中的 add/delete 操作引发死循环
            const effectsToRun = new Set(subscribers);
            effectsToRun.forEach((fn) => fn());
        }
    };

    return [read, write] as const;
}

export function effect(fn: VoidFunction) {
    const effect: ReactiveEffect = () => {
        // 核心：每次运行前先断开所有旧连接
        cleanup(effect);

        const prevEffect = activeEffect;
        activeEffect = effect;

        try {
            fn();
        } finally {
            activeEffect = prevEffect;
        }
    };

    effect.deps = new Set();
    effect();
}

解决“菱形依赖”与 Computed

在复杂的依赖图中，我们经常遇到菱形依赖（Diamond Problem）：

如果不加控制，修改 A 会导致 D 运行两次（A->B->D 和 A->C->D），且第一次运行时可能处于中间态（Glitch）。

解决方案包含两个部分：

调度器（Scheduler）：使用微任务批处理 Effect，避免同步重复执行。
计算属性（Computed）：引入 Push-Pull 模型 和 脏检查（Dirty Marking）。

核心实现：Push-Pull + Lazy Evaluation

interface ReactiveEffect {
    (): void;
    deps: Set<Set<ReactiveEffect>>;
    options?: { scheduler?: (fn: VoidFunction) => void };
}

let activeEffect: ReactiveEffect | null = null;

// --- 调度器逻辑 ---
const effectQueue = new Set<VoidFunction>();
let isFlushPending = false;

function flushQueue() {
    const tasks = [...effectQueue];
    effectQueue.clear();
    isFlushPending = false;
    tasks.forEach((fn) => fn());
}

function queueJob(job: VoidFunction) {
    effectQueue.add(job);
    if (!isFlushPending) {
        isFlushPending = true;
        queueMicrotask(flushQueue);
    }
}

// --- 清理逻辑 ---
function cleanup(effect: ReactiveEffect) {
    for (const dep of effect.deps) {
        dep.delete(effect);
    }
    effect.deps.clear();
}

// --- Signal 实现 ---
export function signal<T>(initialValue: T) {
    let value = initialValue;
    const subscribers = new Set<ReactiveEffect>();

    const read = () => {
        if (activeEffect) {
            subscribers.add(activeEffect);
            activeEffect.deps.add(subscribers);
        }
        return value;
    };

    const write = (newValue: T) => {
        if (value !== newValue) {
            value = newValue;
            const effectsToRun = new Set(subscribers);
            effectsToRun.forEach((effect) => {
                // 如果有调度器（用户 effect），放入队列；
                // 否则立即执行（主要用于 computed 内部传递脏标记）
                if (effect.options?.scheduler) {
                    effect.options.scheduler(effect);
                } else {
                    effect();
                }
            });
        }
    };

    return [read, write] as const;
}

// --- Computed 实现 (Push-Pull) ---
export function computed<T>(fn: () => T) {
    let value: T;
    let dirty = true; // 懒计算的核心标志

    // Computed 本身既是 Signal (被别人订阅)，也是 Effect (订阅别人)

    // 1. 作为 Effect 的行为：依赖变了，我不马上算，我只标记自己脏了
    const runner = () => {
        if (!dirty) {
            dirty = true;
            // 2. 作为 Signal 的行为：告诉我的订阅者“我可能变了” (Push 阶段)
            trigger(subscribers);
        }
    };

    const internalEffect: ReactiveEffect = runner as ReactiveEffect;
    internalEffect.deps = new Set();

    const subscribers = new Set<ReactiveEffect>();

    // 辅助触发函数
    const trigger = (subs: Set<ReactiveEffect>) => {
        const effectsToRun = new Set(subs);
        effectsToRun.forEach((effect) => {
            if (effect.options?.scheduler) {
                effect.options.scheduler(effect);
            } else {
                effect();
            }
        });
    };

    const read = () => {
        // 1. 依赖收集 (如果有其它 effect 读取了这个 computed)
        if (activeEffect) {
            subscribers.add(activeEffect);
            activeEffect.deps.add(subscribers);
        }

        // 2. 懒计算 (Pull 阶段)
        if (dirty) {
            const prevEffect = activeEffect;
            activeEffect = internalEffect;
            cleanup(internalEffect);
            try {
                value = fn();
                dirty = false;
            } finally {
                activeEffect = prevEffect;
            }
        }
        return value;
    };

    return read;
}

export function effect(fn: VoidFunction) {
    const effect: ReactiveEffect = () => {
        cleanup(effect);
        // 栈式结构，允许嵌套 effect
        const prevEffect = activeEffect;
        activeEffect = effect;
        try {
            fn();
        } finally {
            activeEffect = prevEffect;
        }
    };
    effect.deps = new Set();
    effect.options = { scheduler: queueJob }; // 默认走微任务调度
    effect();
}

工程化与生命周期

实际应用中，通常会在组件挂载时创建多个 Effect。如果组件销毁时不清理，这些 Effect 仍会响应信号变化，导致内存泄漏。

手动保存每个 Effect 的返回值并在 onUnmount 中逐个调用是不现实的。我们引入 effectScope 来批量收集和处理副作用的停止。

核心实现：作用域容器

全局变量标记“当前所在的作用域”，并让 effect 函数感知到它。

// 1. 定义 Scope 类
export class EffectScope {
    private effects: VoidFunction[] = [];
    private active = true;

    run<T>(fn: () => T): T | undefined {
        if (!this.active) return;

        const prevScope = activeScope;
        activeScope = this; // 开启当前作用域
        try {
            return fn();
        } finally {
            activeScope = prevScope; // 恢复上层作用域
        }
    }

    // 收集停止函数
    add(stopFn: VoidFunction) {
        if (this.active) {
            this.effects.push(stopFn);
        } else {
            // 如果 Scope 已经停止，新加入的 effect 应该立即销毁
            stopFn();
        }
    }

    stop() {
        if (this.active) {
            this.effects.forEach((stop) => stop());
            this.effects = [];
            this.active = false;
        }
    }
}

// 指向当前活跃的 Scope
let activeScope: EffectScope | null = null;

export function effectScope(fn?: VoidFunction) {
    const scope = new EffectScope();
    if (fn) scope.run(fn);
    return () => scope.stop();
}

改造 Effect 以支持 Scope

修改之前的 effect 函数，使其：

返回一个停止函数（Disposer）。
自动将这个停止函数注册到当前的 activeScope 中。

export function effect(fn: VoidFunction) {
    const effect: ReactiveEffect = () => {
        cleanup(effect);
        const prevEffect = activeEffect;
        activeEffect = effect;
        try {
            fn();
        } finally {
            activeEffect = prevEffect;
        }
    };
    effect.deps = new Set();
    effect.options = { scheduler: queueJob };

    // 首次执行
    effect();

    // --- 新增逻辑 ---

    // 定义停止函数：彻底移除该 effect 的所有依赖
    const stop = () => {
        cleanup(effect);
        // 如果有调度器中的任务，也应该移除（此处简化略过）
    };

    // 如果当前处于某个 Scope 中，自动注册
    if (activeScope) {
        activeScope.add(stop);
    }

    return stop;
}

性能优化 (Alien Signals)

目前的实现虽然功能完备，但在大规模图结构下存在性能瓶颈：

Set 的开销：Set 的创建、迭代和垃圾回收（GC）在极高频更新下开销显著。
过度遍历：Pull 模型中，每次读取 computed 都需要检查脏标记，依赖链很长时，需要层层回溯。

alien-signals 是目前基准测试中性能最强的实现之一，核心优化思路如下：

消除 Set，使用链表

Alien Signals 不使用 Set 来存储依赖，而是使用双向链表直接存储节点关系。这极大地减少了内存分配和 GC 压力。

版本号机制 (Versioning / Epochs)

这是性能的关键。它不依赖简单的 dirty 布尔值，而是引入了全局版本号。

全局版本 (Global Version)：每次任何 Signal 更新，全局版本号 +1。
节点版本 (Node Version)：Signal 记录自己最后一次更新时的版本号。
依赖检查： Computed 不需要每次都去问上游 "你变了吗？"，它只需要检查： LastSeenVersion < GlobalVersion ? 如果全局版本没变，说明整个系统没有任何状态更新，直接返回缓存，O(1) 复杂度。

信号增强 (Signal Boosting)

在某些情况下，Computed 可以跳过依赖图的遍历。如果一个 Computed 的所有依赖都没有变化（通过比较版本号），它可以直接更新自己的版本号到最新，而不需要执行计算函数。

简化版源码示意 (概念模型)

let globalEpoch = 1;

class Signal<T> {
    epoch = 0; // 最后更新的时间戳
    value: T;

    write(newVal: T) {
        this.value = newVal;
        this.epoch = ++globalEpoch; // 更新时推进全局时间
    }
}

class Computed<T> {
    lastCheckEpoch = 0; // 上次检查的时间
    cachedValue: T;

    read() {
        // 如果上次检查后，全局时间都没动过，说明肯定没变
        if (this.lastCheckEpoch === globalEpoch) {
            return this.cachedValue;
        }

        // ... 这里再进行细粒度的依赖版本对比 ...
    }
}

这种设计使得 Alien Signals 在只有少量信号变更、但计算链路很深的大型应用中，性能表现远超传统的“脏标记+递归通知”模式。

←Back to home

This work is licensed under CC BY-NC-SA 4.0