Angular 变化检测和 OnPush 策略

在本文中，我将深入探讨变更检测的概念以及Angular 框架内OnPush策略的功能。

理解 Angular 变化检测

您是否遇到过这样的情况：您的 Angular 应用程序在检测到变更需要时需要自动更新？如果是这样，您可能已经实现了 Angular 的变更检测机制，特别是OnPush策略。事实证明，该策略在快速检测变更方面非常高效，尤其是对于值类型变更。让我们来了解一下这种变更检测。

虽然这种方法可以确保准确性，但它可能会导致复杂应用程序中的性能瓶颈

当你在应用程序中对模型进行任何更改时，Anulgar 都会检测到这些更改并立即更新视图。Angular 的变更检测机制确保了底层模型与其各自视图之间的持续同步（双向数据绑定
）。让我们了解一下 Angular 中的变化可能因以下任何场景而发生。

DOM 事件
AJAX HTTP 请求
计时器（SetInterval（）、SetTimer（））

了解 Angular 变化检测周期

Angular 的变更检测周期是框架如何更新 DOM 并将其与应用程序数据同步的关键部分。它负责检测并将变更从应用程序的数据模型传递到用户界面。了解变更检测周期对于优化应用程序性能和避免不必要的更新至关重要。

假设我们有一个名为devCounterComponent的简单 Angular 组件，它显示一个计数器值和一个增加它的按钮

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

@Component({
  selector: 'app-dev-counter',
  template: `
    <div>
      <p>Counter: {{ counter }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `,
})
export class DevCounterComponent {
  counter = 0;

  increment() : void {
    this.counter++;
  }
}

现在，让我们按照上面的例子来遵循变化检测周期。

初始化：
当应用程序启动时，Angular 初始化 DevCounterComponent。
渲染初始视图：
渲染初始视图，显示计数器值为 0 和“增加”按钮。
事件处理和数据绑定：
当用户点击“增加”按钮时，increment()方法被触发。
变化检测触发器：
increment() 方法改变计数器属性的值。
变更检测过程：
Angular 的变更检测系统检测到计数器属性的变化并启动变更检测过程。
检查组件是否更改：
Angular 检查DevCounterComponent是否更改。它将计数器属性的新值 (1) 与之前的值 (0) 进行比较。
更新 DOM：
由于 counter 属性发生了变化，Angular 会更新 DOM 以反映新值。模板中显示的计数器值现在为 1。
子组件：
在这个例子中，没有子组件，所以跳过这一步。
重复流程：
变更检测周期目前已完成。如果触发了另一个变更（例如，再次点击按钮），则该流程将重复。

让我们探索一个涉及父子组件的更复杂的例子。假设我们有一个ParentComponent，它包含两个DevCounterComponent的实例。

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

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <app-dev-counter></app-dev-counter>
      <app-dev-counter></app-dev-counter>
    </div>
  `,
})
export class ParentComponent {}

但我们仍然应该注意性能考虑，并在适当的时候使用OnPush变化检测等策略来优化其应用程序。

当然，让我们深入研究一下Angular 中的OnPush变更检测策略。该策略是变更检测周期中的一个重要方面，理解它对于有效的应用程序开发至关重要。

关于OnPush检测策略的理解

“OnPush”变更检测策略是 Angular 中的一项功能，它通过减少 Angular 变更检测机制的检查和更新次数来优化变更检测过程。它旨在通过专注于明确指示其输入属性何时发生变化的组件来提高 Angular 应用程序的性能
。默认情况下，Angular 使用“Default”变更检测策略，即在每个变更检测周期检查所有组件及其模板的变更。这可能会导致不必要的检查和更新，从而影响大型应用程序的性能。“ OnPush ”策略提供了一种缓解这种情况的方法，它使组件在何时进行变更检查方面更具选择性。

下表总结了两种策略之间的主要区别
Default：每个变更检测周期
OnPush：当输入或属性发生变化时

何时使用 OnPush

“ OnPush ”变更检测策略应该用于那些不经常变化的组件。这包括：

显示静态数据
仅从其父组件接收数据
不要对其数据进行任何计算或转换

要为组件设置“ OnPush ”策略，请在组件的元数据中使用 changeDetection 属性进行指定。以下是示例

import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-onpush-dev',
  templateUrl: './onpush-dev.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushDevComponent {
  @Input() data: any;

  constructor(private cdr: ChangeDetectorRef) {}

  // This method marks the component for change detection.
  triggerChangeDetection() {
    this.cdr.markForCheck();
  }

  // Event handler that updates the input property.
  updateData() {
    this.data = { newValue: 'Updated value' };
  }
}

在此示例中，组件OnPushdevComponent使用“OnPush”更改检测策略。它具有输入属性 data 和方法 triggerChangeDetection()，可用于手动触发更改检测。

结论

OnPush变更检测策略可以成为提升 Angular 应用程序性能的强大工具。然而，重要的是要明智地使用它，并确保你的组件使用不可变的数据结构。遵循这些指导原则，你可以使用OnPush变更检测策略来优化你的 Angular 应用程序并提升其性能。

就到这里！
感谢你阅读完整个故事❤

文章来源：https://dev.to/mana95/angular-change-detection-and-onpush-strategy-4l63