关于前端:Angular变更检测

Angular 变更检测

在 Angular 利用中，变更检测是 Angular 框架用来检测模型中的变动并更新视图的机制。当发生变化时，Angular 会自动检测这些变动，并在必要时从新渲染组件。然而，这种主动变更检测可能会影响利用的性能。

为了解决这个问题，Angular 提供了几种变更检测策略，开发人员能够依据应用程序的须要抉择适当的策略。以下是 Angular 提供的变更检测策略：

1. 默认策略：Angular 默认的变更检测策略是 Zone.js，它会查看整个组件树，从根组件到叶子组件，以查找变动。这种策略可能会导致性能问题，因为它会在每次变动时从新渲染整个组件树。
2. OnPush 策略：OnPush 策略是一种优化策略，只有在输出属性发生变化时才会从新渲染组件。这种策略能够大大提高性能，尤其是当组件具备大量子组件或须要解决大量数据时。
3. 手动策略：手动策略是一种齐全手动的变更检测策略，须要开发人员显式地调用变更检测函数来查看组件中的变动。这种策略实用于须要最大水平管制性能的状况，但它须要开发人员更多的工作。

开发人员能够通过在组件元数据中设置变更检测策略来抉择适合的策略。例如，在组件元数据中设置 changeDetection: ChangeDetectionStrategy.OnPush 将启用 OnPush 策略。

应用 Angular 变更检测策略的示例代码：

默认策略：

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

@Component({
  selector: 'app-example',
  template: `
    <h1>{{title}}</h1>
    <button (click)="updateTitle()">Update Title</button>
  `,
})
export class ExampleComponent {
  title = 'Default Strategy';

  updateTitle() {this.title = 'Updated Title';}
}

OnPush 策略：

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

@Component({
  selector: 'app-example',
  template: `
    <h1>{{title}}</h1>
    <button (click)="updateTitle()">Update Title</button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExampleComponent {
  title = 'OnPush Strategy';

  updateTitle() {this.title = 'Updated Title';}
}

手动策略：

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

@Component({
  selector: 'app-example',
  template: `
    <h1>{{title}}</h1>
    <button (click)="updateTitle()">Update Title</button>
  `,
})
export class ExampleComponent {
  title = 'Manual Strategy';

  constructor(private cdr: ChangeDetectorRef) {}

  updateTitle() {
    this.title = 'Updated Title';
    this.cdr.detectChanges();}
}

示例总结：

1. ExampleComponent 组件的 title 属性能够通过 updateTitle() 办法进行更新。依据所选的变更检测策略，当 title 属性发生变化时，组件的行为将有所不同。在默认策略中，每次调用 updateTitle() 办法时，组件的整个视图都会被从新渲染。
2. 在 OnPush 策略中，只有在 title 属性发生变化时，组件的视图才会被从新渲染。
3. 在手动策略中，须要手动调用 ChangeDetectorRef 的 detectChanges() 办法来查看组件的变动并更新视图。

总结

Angular 的变更检测机制是通过比拟模型对象的状态来检测数据的变动。当模型对象的状态发生变化时，Angular 会将这些变动记录下来并触发视图更新。

在 Angular 中，模型对象的状态是通过援用来跟踪的。这意味着如果援用没有扭转，即便对象的属性值产生了变动，Angular 也不会检测到这个变动。

为了优化变更检测性能，咱们能够采取以下策略：

1. 防止应用不必要的组件和指令。
2. 应用 OnPush 变更检测策略。
3. 应用 Immutable.js 等不可变数据结构库。
4. 应用 ChangeDetectorRef.markForCheck() 手动触发变更检测。

除此之外，咱们还能够应用 Virtual Scrolling 技术来优化大型列表的渲染性能，或者应用 CDK 中提供的 CDKTable 组件来优化表格的渲染性能。

在应用程序的开发过程中，咱们须要依据具体情况抉择适合的优化策略，并对其进行调整和优化。只有这样，咱们能力真正地进步应用程序的性能，并为用户提供更好的体验。

总之，Angular 的变更检测机制是 Angular 框架的外围个性之一，它能够帮忙咱们更好地管理应用程序中的数据和视图。在应用变更检测时，咱们须要深刻了解其工作原理，并采取相应的优化策略来进步应用程序的性能。