你所要知道的所有關於Angular的變化檢測機制詳解-js教程-PHP中文網

如果想像我一樣全面的了解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函數中。其大部分功能都集中在子組件視圖的操作上。從宿主元件開始為每個元件遞歸呼叫函數。這意味著隨著遞歸樹的展開子元件在下一次呼叫時變成父元件。

對於某一特定的視圖，函數會依照下列順序執行動作：

#如果視圖是第一次被偵測，那麼ViewState.firstCheck設定為true，否則為false
#檢查和更新子元件/指令實例上的輸入屬性
更新子視圖髒值偵測狀態
執行嵌入視圖的髒值偵測（重複清單中步驟）
#如果綁定的輸入值發生變化，子元件呼叫OnChanges這個生命週期鉤子
在子元件上呼叫OnInit和ngDoCheck（OnInit只在第一次檢查時呼叫）
子元件更新ContentChildren查詢清單
在子组件上调用AfterContentInit和AfterContentChecked（AfterContentInit仅在第一次检查时调用）
如果当前视图组件实例的属性有改变则更新对应的DOM插值
为子视图运行脏值检测（重复列表中步骤）
更新当前视图的 ViewChildren 查询列表
子组件上调用AfterViewInit和AfterViewChecked生命周期钩子（AfterViewInit仅在第一次检查时调用）
更新视图检测状态为禁用

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

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

登入後複製

探索影响

让我们假设有如下组件树：

你所要知道的所有關於Angular的變化檢測機制詳解

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

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

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

  detectChanges() : void
  checkNoChanges() : void
}

登入後複製

让我们看看这可以为我们带来什么好处。（想看更多就到PHP中文网AngularJS开发手册中学习）

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也会更新。