JavaScript 信号提案概述

JavaScript 语言最近将 信号（Signals）提案 加入候选特性列表，目前处于 Stage 1 阶段。该提案旨在为框架维护者提供通用原语，以实现响应式编程模式。提案的制定得到了多个流行框架（如 Angular、Vue、React、Svelte 等）作者和维护者的参与和反馈。

响应式应用的核心需求

响应式应用通常需要以下三个核心功能：

1. 外部系统接口：用于接收输入事件和发送操作。
2. 事件反应计算：计算对输入事件的反应。
3. 操作执行：将相应操作发送到匹配的外部系统（如屏幕显示、远程数据库）。

在函数式 UI 方法中，反应计算依赖于纯函数（称为 响应函数），其形式为 (actions_n, state_n+1) = f(state_n, event_n)，其中：

• n 表示响应系统处理的第 n 个事件。
• state_n 表示处理第 n 个事件时响应系统的状态。

现有框架的实现方式

许多 UI 框架（如 Angular2、Vue、React 等）使用回调过程或事件处理器来直接执行对事件的反应。这种方式通常涉及访问和更新某些状态，而这些状态并不总是在作用域内，因此框架需要包含状态管理、依赖注入或通信能力来处理状态的传递和更新。

声明式关系的流行

近年来，一种流行的替代方法是声明输入事件与状态之间的关系（如按钮点击 -> 增加 °C）、状态之间的关系（如 °F = °C * 9/5 + 32）以及状态与反应之间的关系（如 °C 变化 -> 更新屏幕上的仪表颜色）。这些声明一次性完成，避免了开发者更新变量依赖时忘记更新变量本身的错误。

信号提案的目标

信号提案的目标是为框架维护者提供统一的底层信号图和自动跟踪机制，从而实现不同框架之间的互操作性。提案并不试图为开发者提供统一的 API，而是专注于信号图的核心语义。

提案中的示例

提案提供了一个简单的计数器实现示例，展示了如何声明独立的状态（Signal.State）、依赖其他状态的计算状态（Signal.Computed），以及如何将操作执行与状态变化关联（effect(...)）。

const counter = new Signal.State(0);
const isEven = new Signal.Computed(() => (counter.get() & 1) == 0);
const parity = new Signal.Computed(() => isEven.get() ? "even" : "odd");

effect(() => element.innerText = parity.get());

setInterval(() => counter.set(counter.get() + 1), 1000);

提案的关键特性

提案的实现包括以下关键特性：

1. 自动依赖跟踪：提高开发者体验，避免手动提供依赖。
2. 惰性求值：仅在需要时进行计算，减少不必要的计算。
3. 记忆化：缓存计算结果，提高性能。

社区的讨论

社区对提案的讨论主要集中在以下方面：

1. 标准化的重要性：虽然可能存在“XKCD 927”问题（即标准过多），但各大框架共同参与制定标准，有助于统一解决方案。
2. 性能优化：浏览器原生支持信号可能会带来性能和内存效率的提升。
3. ECMAScript 的扩展方向：一部分开发者认为只应添加核心特性，而另一部分则支持提供常见问题的 API，以减少依赖和代码量。

总结

信号提案为 JavaScript 提供了响应式编程的底层原语，旨在简化框架维护者的工作并提高不同框架之间的互操作性。通过自动依赖跟踪、惰性求值和记忆化等特性，提案有望提升开发体验和应用性能。感兴趣的读者可以查看提案的完整内容，了解更多细节和代码示例。