深入剖析 NgDoCheck 和 AsyncPipe：Angular 中响应变化的不同策略

2023-11-17 15:53:46

NgDoCheck 与 AsyncPipe：两种响应 Angular 变化的策略

简介

在 Angular 应用中处理数据变化至关重要，Angular 提供了多种机制来实现这一目的。NgDoCheck 和 AsyncPipe 是两种常用的策略，它们各自具有优点和缺点。本文深入探讨了这两种策略的工作原理、区别以及在不同场景中的适用性。

NgDoCheck：每一次变化检测的钩子

NgDoCheck 是一种生命周期钩子，允许组件在每次 Angular 运行变化检测时执行额外的逻辑。为了使用 NgDoCheck，需要在组件类中实现 ngDoCheck() 方法。在 ngDoCheck() 中，可以访问组件的属性和状态，并执行必要的操作。

NgDoCheck 钩子在每次 Angular 运行变化检测时都会被调用，无论组件的属性或状态是否发生变化。这可能会导致不必要的性能开销，尤其是在组件的属性或状态频繁变化的情况下。

示例

import { Component, NgDoCheck } from '@angular/core';

@Component({
  selector: 'my-component',
  template: '<p>{{ count }}</p>'
})
export class MyComponent implements NgDoCheck {
  count = 0;

  ngDoCheck(): void {
    // 每次变化检测时都会调用
    this.count++;
  }
}

AsyncPipe：响应可观察对象的变化

AsyncPipe 是一种管道，允许组件订阅可观察对象并在值更改时自动更新模板。为了使用 AsyncPipe，需要在模板中使用 async 语法。

async 语法会自动订阅组件中定义的可观察对象，并在值更改时自动更新模板。AsyncPipe 仅在可观察对象的值发生更改时才会更新模板，因此它比 NgDoCheck 更加高效。

示例

import { Component, OnDestroy } from '@angular/core';
import { Observable, interval } from 'rxjs';

@Component({
  selector: 'my-component',
  template: '<p>{{ count$ | async }}</p>'
})
export class MyComponent implements OnDestroy {
  count$: Observable<number> = interval(1000);

  ngOnDestroy(): void {
    // 在组件销毁时取消订阅
    this.count$.unsubscribe();
  }
}