背景：
Signal 是一种用于构建响应式系统的轻量级工具，它通过细粒度的状态管理和依赖跟踪，实现了高效的状态更新和传播。Signal 的核心思想是将状态变化与组件更新解耦，从而避免不必要的计算和性能浪费。
本文将探讨 Signal 的使用场景 以及其响应式逻辑与其他方式的对比。主要是向不了解 signal 的掘友介绍下 signal 的基本情况 & 当前哪些框架在用 signal。
Signal 的使用场景
1. 状态管理
Signal 可以用于管理应用程序的状态，尤其是当状态需要在多个组件之间共享时。Signal 提供了惰性和按需更新的特性，确保只有在状态发生变化时才会触发相关组件的更新。
示例：使用 Signal 管理计数器状态
js
const count = signal(0);
const increment = () => {
count.value++;
};优点：
- 惰性更新 ：只有当
count的值发生变化时，依赖于它的组件才会被更新。 - 按需订阅：组件可以按需订阅状态变化，避免了全局状态管理的复杂性。
2. 复杂依赖关系
Signal 的依赖跟踪机制可以处理复杂的依赖关系。通过自动跟踪信号的依赖项，Signal 确保了状态变化能够正确传播到所有相关组件。
示例：复杂依赖关系
js
const a = signal(1);
const b = signal(2);
const c = derived(() => a.value + b.value);
a.value = 2; // c 的值会自动更新为 4优点：
- 自动依赖跟踪：Signal 会自动跟踪信号的依赖项，无需手动管理依赖数组。
- 最优更新：如果信号的值没有变化，依赖于它的组件不会被更新。
3. 性能优化
Signal 的惰性和按需更新特性使得它非常适合用于性能敏感的应用场景，如高帧率动画、实时数据可视化等。
示例：高性能动画
js
const position = signal(0);
const animate = () => {
position.value += 1;
requestAnimationFrame(animate);
};
animate();优点：
- 最小化更新 ：只有在
position的值发生变化时，依赖于它的组件才会被更新。 - 高效的依赖跟踪：Signal 使用双向链表和位运算来优化依赖关系的管理，确保更新过程高效。
Signal 与其他响应式逻辑对比
1. 与传统响应式框架（如 Vue、React）的对比
a. Vue
Vue 使用虚拟 DOM 和响应式数据 绑定来实现视图更新。Vue 的响应式系统基于对象劫持（Proxy），适用于复杂的数据结构，但在处理细粒度状态时可能不够高效。
b. React
React 使用状态钩子（useState）和效应钩子（useEffect）来管理状态和副作用。React 的响应式系统基于组件重新渲染，适用于复杂的组件树，但在处理大量状态时可能会引入性能问题。
c. Signal
Signal 的响应式系统基于信号和依赖跟踪，适用于细粒度的状态管理。Signal 的惰性和按需更新特性使其在性能敏感的应用场景中表现更优。
| 对比维度 | Vue | React | Signal |
|---|---|---|---|
| 状态管理 | 响应式数据绑定 | 状态钩子 | 信号和依赖跟踪 |
| 性能 | 虚拟 DOM 优化 | 组件重新渲染 | 惰性和按需更新 |
| 适用场景 | 复杂数据结构 | 复杂组件树 | 细粒度状态管理 |
2. 与手动状态管理的对比
a. 手动状态管理
手动状态管理通常使用回调函数或事件监听器来处理状态变化。这种方式虽然灵活，但容易导致代码复杂性和维护困难。
b. Signal
Signal 提供了声明式的状态管理方式，简化了状态变化的传播和更新过程。
| 对比维度 | 手动状态管理 | Signal |
|---|---|---|
| 代码复杂性 | 高 | 低 |
| 维护成本 | 高 | 低 |
| 性能 | 依赖手动优化 | 内置惰性和按需更新 |
3. 与数据流框架（如 RxJS）的对比
a. RxJS
RxJS 是一个基于 Observable 的数据流框架，适用于处理异步数据流和复杂的状态变化。RxJS 的学习曲线较高，且适用于需要复杂数据流处理的场景。
b. Signal
Signal 的响应式系统更简单，适用于细粒度的状态管理，且无需手动处理数据流。
| 对比维度 | RxJS | Signal |
|---|---|---|
| 学习曲线 | 高 | 低 |
| 适用场景 | 复杂数据流处理 | 细粒度状态管理 |
| 性能 | 高度可定制 | 内置优化 |
框架 signal 的使用及实现差异
Solidjs
后面会专门写文章来聊这个的响应式原理 & 编译原理。
Vue: alien-signals
alien-signals的使用整体上和前面的 API 有些差异，例如 signals、Effect 的使用，但是思想不变，仍然是细粒度的响应式追踪以及更新，和 solidjs 类似。但在
signal的实现细节上加入了一些巧思：
- 使用双向链表这种数据结构管理依赖关系。
- 位运算来存储当前的状态。
使用双向链表跟踪依赖关系
- 依赖关系数据结构的对比
| 数据结构 | 插入/删除复杂度 | 内存开销 | 遍历效率 | 适用场景 |
|---|---|---|---|---|
| 数组 | O(n) | 低 | O(n) | 固定依赖集合 |
| 单向链表 | O(1) | 中 | O(n) | 简单订阅模型 |
| 双向链表 | O(1) | 中 | O(n) | 动态依赖关系系统 |
- 双向链表结构设计：
js
export interface Link {
prevSub: Link | undefined; // 双向链表指针
nextSub: Link | undefined;
}-
双向链表的优势
- 在依赖变更时复用链表节点（见 linkNewDep 实现）
- 可以反向遍历 Link，调用订阅器。
位运算存储状态
- 结构设计：
js
export const enum SubscriberFlags {
Computed = 1 << 0, // 标记计算属性（如通过computed()创建的对象）
Effect = 1 << 1, // 标记副作用对象（如通过effect()创建的对象）
Tracking = 1 << 2, // 正在追踪依赖的状态（如执行effect函数时）
Notified = 1 << 3, // 已进入通知队列（防重复处理）
Recursed = 1 << 4, // 防止递归传播的保护标志
Dirty = 1 << 5, // 需要重新计算（如依赖项变更时）
PendingComputed = 1 << 6, // 计算属性待更新（批量更新时延迟处理）
PendingEffect = 1 << 7, // 副作用待执行（批量更新时延迟处理）
Propagated = Dirty | PendingComputed | PendingEffect // 组合标志快速检测
}- 设计优势
- 内存高效，单个数字（通常32位）即可存储所有状态，相比对象属性存储节省87%内存
- 位运算高效，状态检测使用 flags & Flag 判断，更新使用 flags | Flag ，比布尔属性快3-5倍
- 状态组合，通过 Propagated 组合标志快速检测需要处理的订阅者：
js
if (subFlags & Propagated) {
// 需要处理的订阅者
}- 与同类库进行对比
| 状态管理方式 | 内存占用/订阅者 | 状态切换速度 | 适用场景 |
|---|---|---|---|
| 纯位标志 | 4 bytes | 最快 | 高频更新系统 |
| 对象属性 | 16-32 bytes | 慢 | 简单响应式系统 |
| 版本号 | 8 bytes | 中等 | 精确追踪系统 |
Preact
相比于 alien-signals：
- 同样使用了双向链表，使用了位运算存储状态。
- 使用了版本号管理
Computed。
Svelet
在 [svelet原理初探 这篇中，简单聊过 Svelte 4 重度依赖编译，并没有涉及 Svelet 5 的相关内容。
其实 Svelet 5 也使用了 Signal 来实现自己的响应式逻辑。
1. 细粒度状态管理 & 编译优化
- 细粒度更新：与 SolidJS 类似，Svelte 5 的 Signals 仅更新受影响的 UI 部分，但通过编译器生成的代码直接绑定数据变化与 DOM 操作，进一步减少运行时计算
- 更小的输出体积：Svelte 5 的编译器生成的代码比早期版本更简洁，减少了最终打包体积，解决了过去因编译器输出冗余导致的性能问题
2. Runes 语法：显示的表达编译时逻辑
Svelte 5 引入 Runes 语法（如 $state、$derived），通过编译时标记显式声明响应式变量，既保留了开发者友好的直观性，又为编译器提供优化线索。
表格 还在加载中，请等待加载完成后再尝试复制
js
<script>
let count = $state(0); // 声明响应式变量
const doubled = $derived(count * 2); // 声明派生状态
</script>基于 svelet 的整体对比
| 框架 | 核心特征 | 与 Svelte 5 的差异 |
|---|---|---|
| Vue | 基于 Proxy 的 ref 和 reactive，依赖运行时依赖追踪。 |
需要手动管理 watch/computed，运行时开销较高。 |
| SolidJS | 纯运行时细粒度 Signals，强调极简 API 设计。 | 无编译时优化，依赖开发者显式管理订阅关系。 |
| Angular | 基于 Zone.js 的变更检测转向 Signals（实验性），需搭配 effect 函数。 |
尚未完全脱离 Zone.js，迁移成本较高。 |
| React | 通过 React Compiler（实验性）实现编译时依赖分析，类似 Svelte 但需兼容现有 Hooks 模型。 | 仍需依赖虚拟 DOM 差异比对，更新粒度较粗。 |