共计 3353 个字符，预计需要花费 9 分钟才能阅读完成。
最近，“Signals”一词在前端世界中引起了不小的探讨。在看似很短的工夫内，它们如同在很多前端框架中都有呈现，从 Preact 到 Angular
但它并不是一个新事物。咱们能够追溯到 20 世纪 60 年代末的钻研。在其根底上，使第一个电子表格和硬件描述语言（如 Verilog 和 VHDL）得以实现的雷同建模。
甚至在 JavaScript 中，自从申明式 JavaScript 框架诞生以来，咱们就领有了 Signal。随着工夫的推移，它们曾经有了不同的名字，并在这些年里一直地流行起来。但当初咱们又来到了这里，当初是一个很好的机会，让咱们对其产生的起因以及如何应用有更多的理解。
开始
有时咱们会诧异地发现，多个团队在完全相同的工夫内达成了相似的解决方案。在申明式 JavaScript 框架的起步阶段，有 3 个计划在 3 个月内相继公布。Knockout.js（2010 年 7 月）、Backbone.js（2010 年 10 月）、Angular.js（2010 年 10 月）。
Angular 的「脏值查看」，Backbone 的「模型驱动反复渲染」，Knockout 的「细粒度更新」。每个计划都有些许不同，但最终都成为了明天咱们更新 state 和治理 DOM 的根底。
Knockout.js 对本文的主题特地重要，因为它的「细粒度更新」是建设在咱们称之为 Signals 的根底上的。他们最后引入了两个概念：observable（状态）和 computed（副作用），并且在接下来的几年里在业界引入第三个概念 pureComputed（衍生状态）。
const count = ko.observable(0);
const doubleCount = ko.pureComputed(() => count() * 2);
// doubleCount 更新时执行 console.log
ko.computed(() => console.log(doubleCount()))狂野大西部
这些模式是在服务端 MVC 开发和过来几年的 jQuery 中学到的混合模式。其中一个特地常见的模式叫做 数据绑定，Angular.js 和 Knockout.js 都有，只管实现形式略有不同。
数据绑定 是将局部状态（state）附加到视图树（view tree）某个特定局部的一个办法。能够做到的一个弱小的事件是使其成为双向的。因而，咱们能够让状态更新 DOM，反过来，DOM 事件自动更新状态，所有这些都是以一种简略的申明形式进行的。
然而，如果滥用这种能力，最终会搬起石头砸本人的脚。在 Angular 中，如果不晓得有什么变动，就会对整个树进行恶浊的查看，向上流传可能会导致它产生屡次。在 Knockout 中，因为你在树上来回走动，所以很难跟踪变动的门路，循环是很常见的。
无障碍
随之而来的是 React 的大规模采纳。一些人依然喜爱响应式模型，而且因为 React 对状态治理没有太多的限度，所以很有可能将两者混合起来。
Mobservable（2015）就是这种解决方案。但比起与 React 单干，它带来了新的货色。它强调一致性和无障碍流传。也就是说，对于任何给定的变动，零碎的每一部分都只运行一次，而且是以适当的程序同步运行。
它通过将先前计划中典型的基于 push 的响应式换成 push-pull 混合系统来做到这一点。变动的告诉被推送进来，但派生状态的执行被推延到读取它的中央。
尽管这个细节在很大水平上被一个事实所覆盖，即无论如何 React 都会从新渲染读取变动的组件，但这为这些零碎可调试性和一致性方面的晋升迈出了重要一步。在接下来的几年里，随着算法的不断完善，咱们会看到一个趋势在一直的欠缺。
驯服透露的观察者
细粒度的响应性是 观察者模式 的一个变种。尽管这是一个弱小的同步模式，但它也有一个典型的问题。一个 Signal 会保留对其订阅者的强援用，所以一个长时间存在的 Signal 会保留所有的订阅，除非是手动解决掉。
这种形式在大量应用时变得非常复杂，尤其是波及嵌套的时候。在解决分支逻辑和树时，嵌套是很常见的，就像你在构建用户界面视图那样。
一个不太出名的库，S.js（2013），提供了答案。S.js 是独立于其余大多数解决方案而开发的，它更间接地以数字电路为模型，所有的状态变动都在时钟周期内进行。它将其状态基元称为 “Signals（信号）”。尽管不是第一次应用这个名字，但它是咱们明天应用的术语的起源。
更重要的是，它引入了响应式所有权的概念。一个所有者将收集所有的子响应式作用域，并在所有者本人的 deposal 逻辑或在从新执行时治理它们的 deposal 逻辑。响应式视图将从一个根所有者开始，而后每个节点将作为其后辈的所有者。这种所有者模式不仅对 deposal 很有用，而且是在响应式视图中建设 Provider / Consumer 上下文的一种机制。
调度
Vue (2014) 也为明天的倒退提供了微小的奉献。除了在优化一致性方面与 MobX 保持一致外，Vue 从一开始就将「细粒度」的响应性作为其外围。
尽管 Vue 与 React 共享虚构 DOM 的应用，但响应性是一流的，这意味着它首先作为一种外部机制与框架一起开发，以反对其 Options API，并在过来几年中，成为 Composition API 的外围（2020）。
Vue 通过调度工作，将 pull / push 机制向前推动了一步。默认状况下，Vue 的批改不会立马被执行，而是要等到下一个微工作才会执行。
然而，这种调度也能够用来做一些其余的事件，比方 keep-alive（在没有计算成本的状况下保留屏幕外的图形），以及 Suspense。甚至像 并发渲染 这样的事件也能够用这种办法来实现，真正展现了如何取得基于 pull 和 push 的两种办法的最佳成果。
编译
2019 年，Svelte 3 向大家展现了咱们能够用一个编译器做多少事件。事实上，他们把响应性齐全编译掉了。这并非没有取舍，但更乏味的是，Svelte 向咱们展现了一个编译器如何能抚平人体工程学的毛病。而这将持续成为前端的一个趋势。
响应性语言的个性：状态、派生状态和副作用；不仅为咱们提供了形容用户界面等同步零碎所需的所有，而且是可剖析的。咱们能够精确地晓得什么中央产生了什么变动。可追溯性的后劲是深远的。
如果咱们在编译时晓得这一点，咱们就能够少发一些 JavaScript。咱们能够在代码加载方面更加自在。这就是 Qwik 和 Marko 的可恢复性的根底。
通往将来的 Signals
Signals 是新的 VDOM。
人们的趣味大增：许多人正在尝试一些新的货色。这将让咱们摸索这个空间，尝试不同的策略，了解和优化。
不晓得咱们最终会确定什么，但这种个体摸索是很好的! —— Pawel Kozlowski
鉴于这项技术有多老，说还有很多货色须要摸索，可能会让人诧异。这是因为它是一种解决方案的建模形式，而不是一种特定的技术。它所提供的是一种形容状态同步的语言，与你要让它执行的任何副作用无关。
那么，它被 Vue、Solid、Preact、Qwik 和 Angular 采纳仿佛也就难能可贵了。咱们曾经看到它进入了 Rust 的 Leptos 和 Sycamore，表明 DOM 上的 WASM 不肯定很慢。它甚至被 React 思考在引擎应用。
咱们可能会在 React 中增加一个相似信号的基元，但我不认为这是编写 UI 代码的一个好办法。它对性能来说是很好的。但我更喜爱 React 的模式，在那里你伪装每次都会从新创立整个货色。咱们的打算是应用一个编译器来实现相当不错的性能晋升。—— React 团队核心成员 Andrew Clark
兴许这很适合，因为 React 的 虚构 DOM 始终只是一个实现细节。
Signals 和响应性语言仿佛是事件的交汇点。但这在其第一次进入 JavaScript 的时候并不那么显著。兴许这是因为 JavaScript 并不是最适宜它的语言。
无论这所有的终局是什么，到目前为止都是一次相当不错的旅程。有这么多人关注 Signals，我急不可待地想晓得咱们的下一步会是什么。
总结
以上简略介绍了 Javascript 中 Signals 的演变，心愿对正在学习前端的你有所帮忙。当然，这并不是所有的内容，后续我还会始终更新这篇文章，从更多方面去探讨前端中的 Signals。最初感激大家对本文的反对～欢送点赞珍藏，在评论区留下你的浅见 🌹🌹🌹
本文是翻译文，原文地址
