你所要知道的全部关于Angular的变化检测机制

原文地址：Everything you need to know about change detection in Angular

若是想像我同样全面的了解Angular的脏值检测机制，除了浏览源代码以外别无他法，网上可没有太多可用信息。大部分文章都提到，Angular中每一个组件都自带一个脏值检测器，可是它们都仅仅停留在脏值检测的策略和案例的使用，并无作太多的深刻。本篇文章将带你了解案例背后的故事以及脏值检测策略的影响，此外，掌握本章内容后你将可以独立提出各类性能提高的解决方案。

文章包含两部分，第一部分的内容基于Angular 4.0.1，内容偏技术性会包含不少源码连接，解释了脏值检测的深层机制，第二部分展现了脏值检测在具体应用中的使用（译者注1）。

视图（views）是核心概念

教程中有提到：Angular 应用是由组件树构成的，然而，angular在底层实现中使用视图做为其更低层次的抽象。组件和视图是有直接联系的，一个视图对应一个组件，反之亦然。视图拥有一个component属性，它是组件实例的引用。全部的操做（好比属性的检测、DOM的更新）都在视图层面上完成，所以准确的说Angular应该是由视图树构成的，组件能够被描述为视图的更高级概念。你能够在这里查看相关源码。

视图是应用UI的基本构建，它也是建立和销毁元素的最小组合。

视图中元素的属性能够直接更改，但元素的结构（数量和顺序）不能，只能经过ViewContainerRef插入，移动或移除嵌套视图来更改元素的结构。每一个视图能够包含许多视图容器。

在本文中，我将交替使用组件视图和组件的概念。

须要注意的是：全部关于脏值检测的文章和 StackOverflow上的答案都把我上面提到的视图（View）做为脏值检测的对象或者ChangeDetectorRef，但实际上，脏值检测没有一个专门的对象。

每一个视图能够经过节点属性连接子视图，所以能够对子视图执行操做。

属性的状态

每一个视图都有一个状态，它扮演着很是重要的角色，由于根据它的值，Angular决定是否对视图及其全部子项运行或跳过脏值检测。状态的值可能有不少个，但如下是与本文相关的：

• 1.FirstCheck
• 2.ChecksEnabled
• 3.Errored
• 4.Destroyed

若是ChecksEnabled是false或view的状态值是Errored或Destroyed，则视图及其子视图将跳过脏值检测。除非脏值检测的策略（ ChangeDetectionStrategy）是OnPush，不然默认状况下，全部视图的初始化状态都会是ChecksEnabled 。状态是能够并存的，例如，一个视图能够同时有FirstCheck和ChecksEnabled两个状态。

Angular有一系列高级的概念来操纵视图。我在这里写了一些关于它们的文章。ViewRef就是其中的一个。它封装了底层组件视图，而且有一个恰当命名的方法detectChanges。当异步事件发生时，Angular 会在其最顶层的ViewRef上触发脏值检测，在自身运行完毕后，它会为其子视图执行脏值检测。

你可使用ChangeDetectorRef在组件的构造函数中注入viewRef:

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

你能够从这个类的定义中看出端倪：

export declare abstract class ChangeDetectorRef {
        abstract checkNoChanges(): void;
        abstract detach(): void;
        abstract detectChanges(): void;
        abstract markForCheck(): void;
        abstract reattach(): void;
    }


export abstract class ViewRef extends ChangeDetectorRef {
  ...
}

脏值检测的顺序

负责视图脏值检测的主要逻辑存在于checkAndUpdateView函数中。其大部分功能都集中在子组件视图的操做上。从宿主组件开始为每一个组件递归调用该函数。这意味着随着递归树的展开子组件在下一次调用时变成父组件。

对于某一特定的视图，该函数按照以下顺序执行操做：

1. 若是视图是第一次被检测，那么 ViewState.firstCheck设置为true，不然为false
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. 更新视图检测状态为禁用

在这里有必要强调几件事：

1.在检查子视图以前，Angular会先触发子组件的onChanges ，即便子视图不进行脏值检测，onChanges也会被触发。这一条很重要，咱们将在文章的第二部分看到如何利用这些知识。

2.视图的DOM更新是做为脏值检测机制的一部分存在的，也就是说若是组件没有被检测，即便模板中使用的组件属性发生更改，DOM也不会更新（我这里提到的DOM更新其实是插值表达式的更新。 ）。模板会在首次检测以前完成渲染，举个例子，对于 <span>some {{name}}</span>这个html，DOM元素 span 会在第一次检测前就渲染完，在检测期间，只有 {{name}} 会被渲染。

3.另外一个观察到的有趣现象是：在脏值检测期间，子组件视图的状态是能够被改变的。我在前面提到，在默认状况下，全部的组件的状态都会初始化 ChecksEnabled ，可是对于使用 OnPush 这个策略的组件来讲，脏值检测机制会在第一次后被禁用（操做步骤9）

if (view.def.flags & ViewFlags.OnPush) {
  view.state &= ~ViewState.ChecksEnabled;
}

这意味着在接下来的脏值检测运行期间，该组件视图及其全部子组件将会跳过该检查。有关OnPush策略的文档指出，只有在组件的绑定发生变化时才会检查该组件。因此要作到这一点，必须经过设置ChecksEnabled来启用检查。这就是下面的代码所作的（操做2）：

if (compView.def.flags & ViewFlags.OnPush) {
  compView.state |= ViewState.ChecksEnabled;
}

仅当父级视图的绑定发生变化且子组件视图的脏值检测策略已使用初始化为ChangeDetectionStrategy.OnPush，状态才会更新

最后，当前视图的脏值检测负责启动子视图的检测（操做8）。若是是视图状态是ChecksEnabled，则对此视图执行更改检测。这里是相关的代码：

viewState = view.state;
...
case ViewAction.CheckAndUpdate:
  if ((viewState & ViewState.ChecksEnabled) &&
    (viewState & (ViewState.Errored | ViewState.Destroyed)) === 0) {
    checkAndUpdateView(view);
  }
}

如今你知道视图及其子视图是否运行脏值检测是由视图状态控制的。那么咱们能够控制视图的状态吗？事实证实，咱们能够，这是本文第二部分须要讨论的。

一些生命周期的钩子（步骤3,4,5）是在DOM更新前被调用的，另外一些则是以后运行（操做9）。若是咱们有以下组件层级：A->B->C，下面是钩子回调和绑定更新的顺序：

A: AfterContentInit
A: AfterContentChecked
A: Update bindings
    B: AfterContentInit
    B: AfterContentChecked
    B: Update bindings
        C: AfterContentInit
        C: AfterContentChecked
        C: Update bindings
        C: AfterViewInit
        C: AfterViewChecked
    B: AfterViewInit
    B: AfterViewChecked
A: AfterViewInit
A: AfterViewChecked

探索影响

让咱们假设有以下组件树：

咱们知道，一个组件对应一个视图。每一个视图的状态都被初始化为 ViewState.ChecksEnabled，也就意味着在组件树上的每个组件都将运行脏值检测。

假设咱们想要禁用AComponent及其子项的脏值检测，经过设置 ViewState.ChecksEnabled为false是最简答的方式。可是直接改变状态在Angular中是底层操做，为此Angular提供了一些列公开方法。每一个组件能够经过 ChangeDetectorRef标识来获取关联视图。 Angular文档定义了如下公共接口：

class ChangeDetectorRef {
  markForCheck() : void
  detach() : void
  reattach() : void

  detectChanges() : void
  checkNoChanges() : void
}

让咱们看看这能够为咱们带来什么好处。

detach

第一种容许咱们操做状态的方法是detach，它能够简单地禁用对当前视图的脏值检测：

detach(): void { this._view.state &= ~ViewState.ChecksEnabled; }

让咱们看看它在代码中的应用：

export class AComponent {
  constructor(public cd: ChangeDetectorRef) {
    this.cd.detach();
  }

如今能够确保在脏值检测运行期间，左侧分支（从AComponent开始，橘色部分）AComponent将跳过检测：

这里须要注意两点：第一点，即便咱们改变了ACompoent的状态，它的全部子组件也不会进行检测；第二点，随着左侧分支脏值检测的中止，DOM更新也再也不运行。这里举个小例子：

@Component({
  selector: 'a-comp',
  template: `<span>See if I change: {{changed}}</span>`
})
export class AComponent {
  constructor(public cd: ChangeDetectorRef) {
    this.changed = 'false';

    setTimeout(() => {
      this.cd.detach();
      this.changed = 'true';
    }, 2000);
  }

一开始模板会被渲染成 See if I change: false，两秒以后change这个属性的值变为true，但相对应的文字却没有改过来。若是咱们删除了this.cd.detach()，一切就会如期进行。

reattach

正如文章第一部分所述，若是输入属性发生变化，OnChanges就会被触发。这意味着一旦咱们知晓输入属性了变化，咱们就能够激活当前组件的检测器来运行脏值检测，并在下一轮关闭它。举个例子：

export class AComponent {
  @Input() inputAProp;

  constructor(public cd: ChangeDetectorRef) {
    this.cd.detach();
  }

  ngOnChanges(values) {
    this.cd.reattach();
    setTimeout(() => {
      this.cd.detach();
    })
  }

reattach经过位运算简单的设置了 ViewState.ChecksEnabled

reattach(): void { this._view.state |= ViewState.ChecksEnabled; }

这几乎等同于把ChangeDetectionStrategy设置为OnPush：在第一次更改检测运行后禁用检查，在父组件绑定属性变化时启用它，并在运行后禁用。

请注意，OnChanges仅在禁用分支中最顶层的组件中触发，而不是在禁用的分支中的每一个组件触发。

markForCheck

reattach方法仅做用于当前组件，对父级组件则不起做用。这意味着该reattach方法仅适用于禁用分支中最顶层的组件。

咱们须要一种启用从当前组件到根组件检测的方法，markForCheck应用而生：

let currView: ViewData|null = view;
while (currView) {
  if (currView.def.flags & ViewFlags.OnPush) {
    currView.state |= ViewState.ChecksEnabled;
  }
  currView = currView.viewContainerParent || currView.parent;
}

从源码的实现中咱们能够看到，markForCheck向上逐层遍历并启用检测。

这有什么用处呢？正如在检测策略为OnPush的状况下， ngOnChanges和ngDoCheck依旧能够被触发， 一样，它仅在被禁用分支中的最顶层组件触发，而不是被禁用分支中的每一个组件触发。 可是咱们可使用该钩子来执行自定义逻辑，并将咱们的组件标记为符合一次脏值检测周期运行。 因为Angular只检查对象引用，因此咱们能够实现一些对象属性的脏检查：

Component({
  ...,
  changeDetection: ChangeDetectionStrategy.OnPush
})
MyComponent {
  @Input() items;
  prevLength;
  constructor(cd: ChangeDetectorRef) {}

  ngOnInit() {
      this.prevLength = this.items.length;
  }

  ngDoCheck() {
      if (this.items.length !== this.prevLength) {
        this.cd.markForCheck();
        this.prevLenght = this.items.length;
      }
  }

detectChanges

使用detectChanges能够为当前组件及其全部子项运行一次脏值检测。此方法会忽略视图的状态，这意味着当前视图可能依旧保持禁用状态，而且不会对组件进行常规脏值检测。举个例子：

export class AComponent {
  @Input() inputAProp;

  constructor(public cd: ChangeDetectorRef) {
    this.cd.detach();
  }

  ngOnChanges(values) {
    this.cd.detectChanges();
  }

即便脏值检测器依旧是detached，输入属性更改时DOM也会更新。

checkNoChanges

脏值检测的最后一个可用方法是确保在当前检测运行过程当中不会有变化发生。基本上，它执行了列表中1,7,8操做，若是它发现了须要变动的绑定或者会引起DOM的更新，它都会抛出异常。

译者注：

1.脏值检测的底层实如今Angualr不一样版本有些不一样，本文第一部分基于Angular4.0.1，若是想了解Angular2.4.1的实现机制，请移步stackoverflow