新的 Signals 提案旨在将 JavaScript 中的响应式编程原语形式化

JavaScript 语言最近将 Signals 提案（目前处于第一阶段）添加到了致力于改进该语言的候选特性列表中。Signals 提案旨在为框架维护人员提供通用原语，以实现响应式编程模式。该提案深度反映了 Angular、Bubble、 Ember、FAST、MobX、Preact、Qwik、RxJS、Solid、Starbeam、Svelte、Vue、Wiz 等的作者 / 维护者的意见。

响应式应用程序本质上需要：一个与外部系统交互的接口，用于接收输入事件和发送操作动作；计算对输入事件的响应；以及将相应的操作动作发送到匹配的外部系统（例如，屏幕显示、远程数据库）。对于函数式 UI 方法（例如 Elm），响应计算依赖于纯函数（称为响应式函数），例如这样(actions_n, state_n+1) = f(state_n, event_n)的函数，其中：

• n 为响应式系统处理的第 n 个事件，

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

许多用于实现用户界面的框架（如 Angular2、Vue、React 等）更倾向于使用回调过程或事件处理程序，它们作为事件的结果，直接执行相应的响应。决定要执行哪些操作动作（无论是输入验证、局部状态更新、错误处理还是数据获取）通常意味着需要访问和更新一些并不总是在作用域内的状态。因此，框架会包括一些状态管理、依赖注入或通信能力，以在需要时处理状态传递，并在允许和必要时更新状态。

近年来，一种越来越流行的替代方法是，在方便和可能的情况下，声明输入事件与状态块之间的关系（例如，按钮单击 ->增加°C）、状态块本身之间的关系（例如， °F=°C*9/5+32 ）以及状态与响应之间的关系（例如，°C 变化 ->更新屏幕上的仪表颜色）。这些声明是一次性生成并永久生效的，从而消除了开发人员因更新变量依赖项而忘记更新变量本身的一系列缺陷。

因此，一些 UI 框架要求开发人员使用特定的原语和语法（Svelte 中的 $ ；Vue 中的 ref 、 reactive 和 computed ）来声明这些关系。除了不同的语法之外，这种框架还可能采用不同的方式来实现响应性，并且可能存在轻微的语义差异。诚然，该提案针对的是框架维护人员及其方法的互操作性：

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 函数declare function effect(cb: () => void): (() => void);
effect(() => element.innerText = parity.get());
// 模拟外部更新来计数......setInterval(() => counter.set(counter.get() + 1), 1000);

这个示例展示了声明独立的状态块（ Signal.state ）、绑定到它们的依赖项的状态块（ Signal.computed ）的语法，以及库维护人员如何利用信号原语将操作动作的执行与状态的更改联系起来（ effect（…） ）。

该提案包含了一个具有自动依赖项跟踪、惰性计算和记忆化备忘的实现。自动依赖项跟踪为开发人员工提供了更好的工效学（与手动提供依赖项相比——参见 React 的 useMemo）。懒惰计算和记忆化备忘可以防止不必要且不合时宜的计算，从而改善了 API 的性能。

该提案在 Reddit 上引发了有趣的讨论，其中一位开发者反思道：

欢迎感兴趣的读者在线阅读完整的提案。GitHub 存储库包含了大量的解释和代码示例，用于阐明提案的目标、语法和语义。

响应式编程通过提供抽象来表达时变值（time-varying values）并自动管理这些值之间的依赖关系，从而促进了事件驱动的响应式应用程序的开发。人们提出了许多跨各种语言（如 Haskell、Scheme、JavaScript、Java、.NET 等）的方法。响应式编程与 JavaScript 特别相关——JavaScript 是用于 Web 应用程序的原生浏览器语言之一。

Bruno Couriol 拥有电信理学硕士、数学理学士学位。他从 30 年前写了第一个程序开始至今还一直在编写软件。主要帮助企业和非营利组织开发满足用户需求的软件。

原文链接：

https://www.infoq.com/news/2024/06/javascript-signals-proposal/

声明：本文由 InfoQ 翻译，未经许可禁止转载。