变化检测从 Angular zone.js) 到 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: `
    <p>{{ message }}</p>
  `
})
export class MyComponent {
  message = 'Hello, world!';
}

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

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

@Component({
  selector: 'app-my-component',
  template: `
    <p>{{ message }}</p>
  `,
  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 zone.js) 到 Angular (provideExperimentalZonelessChangeDetection) 的演变的详细内容。更多信息请关注PHP中文网其他相关文章！