【转】Angular 移除 Zone.js 探索 Zoneless 新方案

小渣渣

最近，Angular发布了一项名为 Zone.js 的独立“体验式”开发功能。尽管该功能仍处于实验阶段，但Angular团队已经致力于这项重要创新很长时间了。响应式原语对开发人员来说变得越来越重要，这表明Angular正在进入另一个新时代。Angular的依赖性使Signals和Rxjs 的优势更加明显，使其无需不断监听 Zone.js依赖的变化，并结束了在开发过程中充当中间人的境地。

Angular 在未来将继续成为一个大胆而强大的框架，并开始新的转变。

首先，我的文章不是为了教任何人任何东西。我希望我的读者不会觉得自己值得如此被动。我尽量分享我的经验和学习，并开放讨论。一起讨论、交换意见、基于批判性思维进行评估很重要。不应忘记，尤其是当本文所讨论的技术仍在被大家体验时，人们对它们究竟如何工作仍然存在一些困惑，我想说的是，即使是变化检测机制仍然会在 Angular 的核心团队中造成一些困惑。

什么是 Zone.js 以及它有什么作用？

Zone.js是Brian Ford于 2010 年以“ Zones ”为名开发的用于管理JavaScript中异步工作的小型库。它受到Erlang和Dart等语言的启发，旨在为 JavaScript 的单线程环境带来结构化并发。当Angular团队在Angular 2中采用Zones作为其变更检测机制时，它获得了发展势头， Angular团队开始以Zone.js的形式贡献它，从而提供更广泛的社区参与和进一步的开发。今天，尽管它仍然与Angular 紧密相连，但 Zone.js可以说被认为是监视和干预异步任务的强大工具，可实现性能分析、错误处理功能以及许多有问题的功能。

那么为什么 Angular 放弃 Zone.js 呢？

利用人工智能能够轻松地将我们想象中的图像转化为图画的能力，我们使用“床下的海绵”这个比喻创建了一个视觉效果，以便于理解。

想象一下上图中的床，它不是放在地板上，而是放在一块大海绵上。Zone.js在Angular应用程序中就像一块海绵。这块海绵确保床位于舒适、有支撑力的底座上，同时为睡眠者提供相对的舒适感。海绵吸收床的每一个动作，防止床内的动作反射到外面。

Zone.js中的Monkey 补丁监听浏览器中的所有异步 API，例如：事件、承诺、可观察对象、setTimeout、setInterval等。

通过监听这些，Angular应用程序可以检测到所有变化，从而更新用户界面，事实上，就像海绵支撑床一样，Zone.js也能让Angular应用程序顺利运行。在这种情况下，我们感觉不到的在非常大的项目中出现的性能问题可能会发生。

另一方面，随着时间的推移，这种复杂的结构似乎阻碍了我们感知某些特定的变化。每个先前的特征和发展，连同其自身的内部发展和不断变化的需求，突然成为下一个特征和发展的障碍。



当我们将海绵从身下拉出时，我们会看到自然的运动自由开始出现，因为床直接与地面接触。当海绵带来的舒适限制效应开始消失时，这意味着床上的运动现在将直接反映在地面上。

这样的比喻或许意味着海绵提供了一个舒适区，提供了相对更舒适的睡眠。Zone.js就像这样的海绵，它提供了一个严肃的舒适区，让我们能够感受到整个表面的每一个变化。然而，随着时间的推移，这种复杂的结构可能会阻碍我们感知到一些具体的变化。当我们把海绵从身下抽出来时，可能会出现腰痛，这些疼痛和酸痛表明我们已经从人工地面下降到自然地面，虽然这种过渡经历可能会有点痛苦，但最终，随着腰部伸直，可以获得更舒适的睡眠和更好的血液循环，以及更健康的身体和精神敏锐度。当我们切换到无区域时，即睡在没有海绵的床上而产生的背部和关节疼痛，正是我们从人工地面切换到自然地面的好迹象。虽然这种过渡经历有点痛苦，但随着我们的腰部开始向以前的自然状态重塑，过渡疼痛也会消失，并提供更好的血液循环；这里的过渡示例对应于我们在 Angular v18 中听到的实验性 Zoneless 。

Zone.js被认为会增加额外的负载，因为它会跟踪 asektron 操作并将它们传递给Angular 检测机制，例如 call、event、errors 等。今天，就Angular 的性能而言，我们无法看到甚至感受到这里的额外负载。Zone.js可以进一步开发，一些调试问题也可以解决，但这里的基础是Angular的路线图。我们看到Angular自己内部开发的Signals 反应原语 Zone.js现在正在成为 Angular 未来计划的阻碍。虽然Signals结构在检测机制方面非常有用，并且在性能方面也很好，易于使用且功能强大，但 Zone.js不再是必需的，但并不是一个可以在一夜之间放弃的库。

我们明白 Angular并不想限制自己的梦想，而是希望通过尽可能地消除中间过程，构建一个更灵活、更可靠的应用程序，并采用更自给自足的框架。我们看到Angular 不断向更实用的状态迈进，并试图抓住机会在未来再次进入上升趋势。不幸的是，从目前的StateofJS调查来看，我们无法说它处于这样的趋势，但我们也看到Angular对所有可能的创新都持开放态度。

如何在 Angular 18 中切换到 Zoneless 模式？

Angular 18附带了一个步骤，允许我们切换到无区域模式并摆脱海绵。如下所示，我们现在可以在引导阶段使用无区域变化检测机制提供这种体验。

登录可见。

将上述函数添加到提供程序后，我们现在可以使用 npm uninstall zone.js 命令从 angular.json 中删除下面的polyfills数组中定义的zone.js。

登录可见。

现在我们可以使用 Angular Zoneless！

Zoneless 有哪些优势？

Zoneless 通过消除不必要的监听操作为我们的应用程序提供了更精简的生态系统。这意味着渲染速度更快、性能更高、页面加载速度更快、包大小更小、调试更容易。

举个经典的测试方法，比如你通过点击按钮添加了一个计数器，并且你想在点击按钮时增加这个数字。在这种情况下，我们可以看到当每个函数被触发时都会渲染变化的值，并且这个值在 HTML 中会发生变化。因为它已经是一个函数并且是我们直接触发的，所以它在这里被渲染。但是，如果这个值由于外部影响而发生变化，而我们想看到任何值都发生了变化而不需要我们手动触发它，会发生什么呢？如果有 Zone.js，它会不断监听所有变化并代表我们通知 Angular 的“变化检测”机制。但是，由于现在没有这样的机制，我们要么需要在某些异步操作之后触发变化检测机制，要么直接使用 Signals 或 RxJS，这样由于这种反应性，就可以直接检测到变化。

Sponge 的消失告诉我们，消失的不仅仅是Zone.js，还有“舒适区”。

如果我们将Zone.js作为带有原始 JavaScript 的模块使用，它将看起来像这样。

登录可见。

在 Angular 中，我们不需要处理这些情况；而使用ngZone时，这些操作已经与检测机制协同工作了。

例如，在直接DOM、事件监听器、可观察对象和承诺、HTTP 请求和同步控制流的情况下，我们必须手动触发异步操作的变化检测机制。

登录可见。

由于 Signals或 R xjs会自动检测变化，因此无需触发变化检测机制。

信号示例：

登录可见。

现在让我们编写一个应用程序来测试Zoneless和Angular的变化检测机制，看看它是如何工作的。



在启动上面定义为标准的间隔后，我们看到它开始工作，但DOM未刷新，更改未反映出来。当我们使用信号启动间隔时，我们看到它可以工作，而无需触发Angular的变化检测机制。可以看到，随着点击事件和信号间隔的开始，Angular注意到了变化，立即捕获我们标准间隔中的变化，然后释放它。



当我们将变量中的值发送给父组件时，我们会发现在推送和默认两种情况下它的感知是不同的。



当我们对左侧的Input进行绑定时，当无区域时会反映出变化，同样，可以看到由于承诺而导致的点击后会反映出变化。



这里我们看到，在未使用detect changes的HTTP调用之后，更改不会反映出来，只有我们手动触发时才会反映出来。当然，Signals很容易将新来者反映到所需的屏幕上。部分代码如下：

app.component.ts

登录可见。

change-detection-demo.component.ts

登录可见。

该应用程序已发布在Stacklibitz上，您可以查看其余的测试。您还可以通过代码在 UI 中跟踪结果。

Stackblitz：https://stackblitz.com/~/github.com/bazobehram/angular-zoneless-change-detection

GitHub： https://github.com/bazobehram/angular-zoneless-change-detection

下面还有一个示例应用程序展示了Angular的变化检测机制如何工作，您也可以从那里尝试一下。

https://jeanmeche.github.io/angular-change-detection/?source=post_page-----9344079c3b9d



切换到无区域模式时需要考虑的事项

需要注意的是，正如其名称所示，ExperimentalZonelessChangeDetection 仍处于实验阶段。

在进行一些测试时，我们注意到变更检测机制中存在一些奇怪之处。例如，当某些更改不是手动触发时，我们会看到 DOM 中没有变化，并且状态不会刷新。但是，当另一个信号或反应变量在变更检测机制之外工作并导致 DOM 刷新时，我们可以观察到之前未刷新的状态也会被刷新。

如果要在现有项目中实现此功能，则应仔细测试所有操作和应用程序行为。 特别是第三方库可能依赖于 Zone.js，这可能会导致一些错误和渲染问题。

原文：https://medium.com/@bazobehram/breaking-free-from-zone-js-exploring-angulars-new-zoneless-era-7446242e9f93

小渣渣

Angular 18 中的无区域变化检测
https://blog.logrocket.com/zoneless-change-detection-angular-18/

angular 与 tsconfig 目标 ES2017 async/await 将无法与 zone.js 一起使用
https://github.com/angular/angular/issues/31730