大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

本文主要内容是：Angular 和 Qwik 创建者 Mi?ko Hevery 解释主要 JavaScript 框架的反应性，并预测了下一个框架战场。

主要内容来自 Loraine Lawson 发布的文章《Angular, Qwik Creator on How JS Frameworks Handle Reactivity》，但是对内容进行了部分修改从而加深理解。

Angular 和 Qwik 的创建者 Mi?ko Hevery 解释框架的反应性

JavaScript 中的响应式编程允许开发人员创建更加动态和响应更快的应用程序。 Hevery 是无头 CMS builder.io 的首席技术官，他解释了反应性的原理，即更新状态或变量并让 UI 做出响应的过程。

反应发生的方式主要包括以下组成：

• 反应值（Values）：即可以分配给变量或传递给函数的一段数据。 对于值，框架必须定期检查是否已更改。 这就是 Angular 和 React 框架如此受欢迎的原因，因为开发者不需要学习任何东西，但代价是框架必须一遍又一遍地检查。
• 信号（Signals）：放入“桶（bucket）”中的值， 信号允许桶（bucket）充当值的交通警察。 Svelte 最近也添加了一种名为 Ruins 的类似信号的功能。

信号允许开发者使用所有系统，因为它位于存储 bucket 中，bucket 就像交通警察一样，因此，存储 bucket 会告诉框架何时存在访问，包括：读取和写入。 当读取信号时，框架会发送一条消息，表明有人读取了该值，然后继续处理下一个值。

然而，信号没有时间概念。

• Observables：一种更强大、更复杂的信号版本，支持多值。 时间（Time）是 Observables 的基础，可以将其比作是携带值的管道。 Observables 利用订阅来更改值，订阅是在数据源发生更改时接收通知的一种方式，前提是需要明确订阅。

Observables 在过去五年里变得很流行。

Hevery 解释了不同框架的反应性原理：Angular 和 React 属于粗略方法，而 Svelte、Qwik 和 Solid 是更细粒度的方法，而 Vue 则介于两者之间。

Angular 和 React 中的信号

根据 Hevery 的陈述：“细粒度（fine-grained）的表现在于，框架可以是精确的，如果值发生变化，框架能准确地知道要做什么。” “另一方面，如果更改框架中的值却不知道需要做什么则重新运行所有组件，这就是粗粒度反应性。”

细粒度和粗粒度反应性实现没有高低之分。但是，Hevery 的论点是，每当值发生变化时，更细粒度的框架必须比粗粒度的框架执行更少的重新渲染或重新计算工作。

React 和 Angular 都是粗粒度的，这意味着每当一个值发生变化时，框架只是读取所有内容并重新渲染再重新构建。

Vue

Vue 中的代码与 React 和 Angular 中的代码非常相似。 在 Vue 中，每个组件都必须重新访问（Revisited）。 框架必须了解应用程序及其执行方式，即重新执行所有组件，这就是水合作用（hydration）。

但有一个区别。

在这种情况下，框架重新渲染了 Counter、Wrapper、Display，但没有渲染 Incrementer。 因此，框架更加智能，并意识到"哦，你有新数据"与计数器关联的状态，即状态值不会传递到 Incrementer 中。 因此不必进入 Incrementer 来重新运行。

当用户点击加一时，唯一更新的是显示。

之所以能以这种方式工作，是因为 Vue 有信号，不过它不叫信号，叫 refs，但从根本上来说，它们是信号。

Svelte

Svelte 原理相似，但有一个编译器，因此非常擅长找出哪些内容没有改变。

Svelte 还有两个不同的反应系统，一个是 Svelte 文件内的反应系统，由编译器执行，另一个是 Svelte 文件外部的反应系统，称为存储。 新版本的 Svelte 还提供了第三个反应系统，称为 Ruins，它更接近信号。

一开始，Svelte 必须执行所有组件。 每个进行水合作用的人别无选择，只能执行所有组件来了解系统，从而每个人都能相处融洽。

Qwik

Qwik 没有水合作用，但具有可恢复性。 这意味着应用程序可以暂停在服务器上的执行并在客户端上恢复执行，而无需重新加载整个应用程序。

“请注意，该值正在更新，但没有重新执行任何操作，”Hevery 说。 “这里有趣的是与增量器相关的代码没有显示在客户端上。 相反，客户端上显示的唯一内容是与按钮相关的关闭。”

闭包显示了一段代码，告诉它进行计数并加一。

“因为发出信号，框架直接知道哪个 DOM 元素需要更新，因为这个特定示例中只修改 DOM 的值，而不是树的结构”。

Hevery 补充说，框架根本不需要将 Display 组件引入客户端，因为它知道该值直接与该 DOM 元素相关联。 在这种情况下，开发者只需更新 DOM 即可。

“Qwik 的有趣之处以及对此感到兴奋的原因是，唯一代码是特定于应用程序的，必须下载框架”。 “客户端中出现的唯一特定于应用程序的工具是与按钮关联的点击侦听器，这就是终极的反应。”

Hevery 认为 Qwik 不如 Solid 细粒度，因为在某些情况下，在 Qwik 中，组件仅在结构 DOM 更改时才会执行； 如果只是更新值，则无需下载任何组件。

Solid Reactivity

Solid 充分利用水合作用会导致所有事情同时发生。 Solid 会下载代码并在启动时执行与其关联的所有部分，但它永远不会再次重新执行该代码。 这是因为信号允许它将所有内容连接起来，并且即使是结构性更改，代码也不会被执行。 这使得 Solid 的反应性比 Qwik 更细粒度，但 Hevery 仍然认为 Qwik 比 Solid 更有优势。

“Qwik 的一大优势是该代码永远不会出现，”Hevery 说。 “在 Solid 中，代码仍然会向客户端显示，而且必须如此，Solid 才能弄清楚发生了什么。 就 Qwik 而言，它永远不会出现在客户端中。”

然而，Hevery 总结道，就细粒度反应性而言，Solid 堪称王者。

那么 JavaScript 框架的下一步是什么？

“这并不重要，重要的是启动性能才是你真正应该承担的，”Hevery 说。 “启动性能是框架之间的下一个战场，我认为这就是 Qwik 的独特魅力。”

参考资料

https://thenewstack.io/angular-qwik-creator-on-how-js-frameworks-handle-reactivity/

https://www.youtube.com/watch?v=0t1tJTh0bLs