变化检测从 Angular zonejs) 到 Angular (provideExperimentalZonelessChangeDetection) 的演变

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《变化检测从 Angular zonejs) 到 Angular (provideExperimentalZonelessChangeDetection) 的演变》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

更改检测是 angular 的一个基本方面，负责识别和更新 dom 中因数据修改或用户交互而发生更改的部分。此过程可确保 ui 与底层数据保持一致，从而增强用户体验和应用程序性能。

zone.js 的作用

从历史上看，angular 一直依赖 zone.js 来实现其变更检测机制。 zone.js 是一个拦截异步操作的 javascript 库，允许 angular 监视更改并相应地触发更新。但是，包含 zone.js 可能会增加应用程序的开销，特别是在异步活动频繁的场景中。

变更检测策略

angular 提供了两种主要的变化检测策略：

• 默认： 在每个生命周期钩子之后触发更改检测，例如 ngoninit 或 ngafterviewinit。这种策略很简单，但可能会导致不必要的 dom 更新，尤其是在大型应用程序中。

@component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `
})
export class mycomponent {
  message = 'hello, world!';
}

这种策略更容易实现，因为 angular 会自动处理大部分变化检测逻辑。
这种变更检测策略的最大挑战是它会导致不必要的 dom 更新，这对于大型应用程序至关重要。

• onpush： 仅当输入属性或异步可观察值发生更改时才会触发更改检测。此策略对于数据更新频繁的复杂组件性能更高，但需要更多的手动管理。

@component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `,
  changedetection: changedetectionstrategy.onpush
})
export class mycomponent {
  message = 'hello, world!';
} 

虽然 onpush 变更检测策略最大限度地减少了不必要的 dom 操作，但 onpush 变更策略的最大挑战是开发人员必须进行更多的手动管理并手动触发变更。在某些情况下，例如当数据间接更改或使用可变对象时，他们必须使用changedetectorref.detectchanges()显式处理更改检测。

angular 18 和混合变化检测：无区域方法

为了解决与 zone.js 相关的挑战，angular 18 引入了一项称为混合变更检测的实验性功能。这种方法旨在完全消除 zone.js，使用新的更改检测机制来检测更改并操作 dom。

启用混合变更检测：

要启用混合更改检测，您可以使用以下代码：

bootstrapapplication(rootcmp,
{ providers: [provideexperimentalzonelesschangedetection()] 
}
);

这将在以下场景中触发更改检测：

• 信号已更新。
• changedetectorref.markforcheck() 被调用。
• 通过 asyncpipe 订阅的 observable 会收到一个新值。
• 组件被附加或分离。
• 已设置输入。

启用混合更改检测后，您可以安全地从应用程序的 polyfill 中删除 zone.js。

 "polyfills": [
              "zone.js" //remove this line
            ],

混合变化检测的好处

• 性能提高：消除 zone.js 可以减少开销，从而提高性能，特别是在具有大量异步操作的应用程序中。

• 增强的开发人员体验：取消手动更改检测简化了开发并减少了错误的可能性。

• 较小的应用程序大小：zone.js 通常会增加大约 13kb 的应用程序大小。删除它可能会导致包变小。

到这里，我们也就讲完了《变化检测从 Angular zonejs) 到 Angular (provideExperimentalZonelessChangeDetection) 的演变》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！