如何使用 OnPush 变更检测策略？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 Angular 中，OnPush 变更检测策略是一种优化手段，它可以减少不必要的变更检测，从而提高应用的性能。要使用 OnPush 策略，你需要在组件的元数据中设置 changeDetection 属性为 ChangeDetectionStrategy.OnPush。

// www.javascriptcn.com code example
import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {
  // 组件逻辑
}

使用 OnPush 策略后，Angular 只会在以下情况下触发变更检测：

输入属性发生变化：当组件的 @Input 属性发生变化时，Angular 会触发变更检测。
组件内部触发事件：当组件内部触发了事件（如点击事件）时，Angular 会触发变更检测。
手动触发变更检测：你可以通过调用 ChangeDetectorRef 的 markForCheck() 方法手动触发变更检测。

本题详细解读

什么是 `OnPush` 变更检测策略？

OnPush 是 Angular 提供的一种变更检测策略，它通过减少不必要的变更检测来提高应用的性能。默认情况下，Angular 使用 Default 变更检测策略，这意味着 Angular 会在每次事件循环中检查所有组件的变化。而 OnPush 策略则更加保守，只有在特定的情况下才会触发变更检测。

如何使用 `OnPush` 策略？

要使用 OnPush 策略，你需要在组件的元数据中显式地设置 changeDetection 属性为 ChangeDetectionStrategy.OnPush。这样，Angular 就会对该组件应用 OnPush 策略。

`OnPush` 策略的触发条件

输入属性发生变化：当组件的 @Input 属性发生变化时，Angular 会触发变更检测。这意味着如果父组件传递了一个新的对象或数组给子组件，子组件会检测到这个变化并更新视图。
组件内部触发事件：当组件内部触发了事件（如点击事件、输入事件等）时，Angular 会触发变更检测。这是因为事件可能会改变组件的状态，因此需要重新检查视图。
手动触发变更检测：在某些情况下，你可能需要手动触发变更检测。你可以通过注入 ChangeDetectorRef 服务并调用其 markForCheck() 方法来通知 Angular 该组件需要重新检查。

示例代码

// www.javascriptcn.com code example
import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<p>{{ message }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {
  @Input() message: string;

  constructor(private cdr: ChangeDetectorRef) {}

  updateMessage(newMessage: string) {
    this.message = newMessage;
    this.cdr.markForCheck(); // 手动触发变更检测
  }
}

在这个示例中，ExampleComponent 使用了 OnPush 策略。当 message 输入属性发生变化时，或者调用 updateMessage 方法时，Angular 会触发变更检测并更新视图。

注意事项

不可变数据：使用 OnPush 策略时，推荐使用不可变数据（如 Immutable.js 或简单的对象/数组复制）。这样可以确保输入属性的变化能够被 Angular 检测到。
性能优化：OnPush 策略可以显著减少不必要的变更检测，特别是在大型应用中。但需要注意的是，过度使用 markForCheck() 可能会抵消这种优化效果。

通过合理使用 OnPush 策略，你可以显著提升 Angular 应用的性能。

如何使用 OnPush 变更检测策略？