Angular中的更改检测：您需要知道的一切

Angular 变更检测机制深度解析

本文将深入探讨 Angular 的变更检测机制，揭示其底层运作原理，并提供优化策略。网络上关于此主题的资料相对匮乏，本文将基于 Angular 最新版本（撰写时为 4.0.1）的源码进行分析，并涵盖了更早的 2.4.1 版本的适用内容。

核心概念：视图 (View)

Angular 应用并非仅仅由组件构成，而是由视图树构成。每个组件对应一个视图，视图是 Angular UI 架构中的基本单元，负责处理所有属性检查和 DOM 更新。源码中对视图的描述如下：

视图是应用程序 UI 的基本构建块。它是创建和销毁在一起的元素的最小分组。

视图中元素的属性可以更改，但视图中元素的结构（数量和顺序）不能更改。更改元素的结构只能通过使用 ViewContainerRef 插入、移动或删除嵌套视图来完成。每个视图可以包含多个视图容器。

本文中，我们将组件视图和组件概念互换使用。需要注意的是，许多网络文章和 Stack Overflow 答案将此处描述的视图称为“变更检测对象”或“ChangeDetectorRef”。实际上，Angular 中并没有单独的变更检测对象，变更检测直接作用于视图。

每个视图通过 nodes 属性链接到其子视图，从而可以对子视图执行操作。

视图状态 (ViewState)

视图具有状态，这在决定是否为视图及其所有子视图运行变更检测中起着关键作用。重要的状态包括：

1. FirstCheck：指示视图是否为首次检查。
2. ChecksEnabled：指示是否启用视图的变更检测。
3. Errored：指示视图是否发生错误。
4. Destroyed：指示视图是否已销毁。

如果 ChecksEnabled 为 false，或者视图处于 Errored 或 Destroyed 状态，则会跳过该视图及其子视图的变更检测。默认情况下，除非使用 ChangeDetectionStrategy.OnPush，否则所有视图都以 ChecksEnabled 初始化。

Angular 提供了高级概念来操作视图，例如 ViewRef，它封装了底层组件视图，并具有 detectChanges 方法。当异步事件发生时，Angular 会触发其顶级 ViewRef 的变更检测，该 ViewRef 在自身变更检测后会递归地对子视图进行变更检测。

可以通过 ChangeDetectorRef 令牌将 ViewRef 注入到组件构造函数中：

export class AppComponent {
  constructor(cd: ChangeDetectorRef) { ... }
}

变更检测操作

checkAndUpdateView 函数是负责运行视图变更检测的主要逻辑。该函数会递归地调用自身，从宿主组件开始，依次检查每个组件及其子组件。

当该函数被触发时，它会按以下顺序执行操作：

1. 设置 ViewState.firstCheck。
2. 检查和更新子组件/指令实例的输入属性。
3. 更新子视图变更检测状态（变更检测策略实现的一部分）。
4. 运行嵌入式视图的变更检测（重复上述步骤）。
5. 如果绑定发生更改，则调用子组件的 OnChanges 生命周期钩子。
6. 调用子组件的 OnInit 和 ngDoCheck 生命周期钩子（OnInit 仅在首次检查时调用）。
7. 更新子视图组件实例的 ContentChildren 查询列表。
8. 调用子组件实例的 AfterContentInit 和 AfterContentChecked 生命周期钩子（AfterContentInit 仅在首次检查时调用）。
9. 如果当前视图组件实例的属性发生更改，则更新当前视图的 DOM 插值。
10. 运行子视图的变更检测（重复上述步骤）。
11. 更新当前视图组件实例的 ViewChildren 查询列表。
12. 调用子组件实例的 AfterViewInit 和 AfterViewChecked 生命周期钩子（AfterViewInit 仅在首次检查时调用）。
13. 禁用当前视图的检查（变更检测策略实现的一部分）。

变更检测策略及手动触发

ChangeDetectionStrategy.OnPush 策略可以显著减少性能开销，因为它仅在实际数据发生变化时（例如输入属性更改或显式事件发射）才进行变更检测。

ChangeDetectorRef 提供了 detectChanges()、markForCheck() 和 detach() 等方法，可以更精细地控制变更检测，尤其是在大型复杂应用中。

(以下内容将详细介绍 ChangeDetectorRef 的使用方法以及变更检测的优化策略，包括 detach()、reattach()、markForCheck() 和 detectChanges() 方法的具体应用场景和示例代码。)

(文章的剩余部分将继续探讨如何利用这些方法进行性能优化，并提供一些实际应用场景和代码示例。)

(最后，文章将总结 Angular 变更检测的常见问题解答，涵盖 OnPush 策略、变更检测优化技巧、Zones 的作用、以及调试变更检测的方法等方面。)

以上是Angular中的更改检测：您需要知道的一切的详细内容。更多信息请关注PHP中文网其他相关文章！