Angular系列之變化檢測(Change Detection)

概述

簡單來講變化檢測就是Angular用來檢測視圖與模型之間綁定的值是否發生了改變，當檢測到模型中綁定的值發生改變時，則同步到視圖上，反之，當檢測到視圖上綁定的值發生改變時，則回調對應的綁定函數。

什麼狀況下會引發變化檢測？

總結起來, 主要有以下幾種狀況可能也改變數據：

• 用戶輸入操做，好比點擊，提交等
• 請求服務端數據(XHR)
• 定時事件，好比setTimeout，setInterval

上述三種狀況都有一個共同點，即這些致使綁定值發生改變的事件都是異步發生的。若是這些異步的事件在發生時可以通知到Angular框架，那麼Angular框架就能及時的檢測到變化。

左邊表示將要運行的代碼，這裏的stack表示Javascript的運行棧，而webApi則是瀏覽器中提供的一些Javascript的API，TaskQueue表示Javascript中任務隊列，由於Javascript是單線程的，異步任務在任務隊列中執行。

具體來講，異步執行的運行機制以下:

1. 全部同步任務都在主線程上執行，造成一個執行棧（execution context stack）。
2. 主線程以外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之 中放置一個事件。
3. 一旦"執行棧"中的全部同步任務執行完畢，系統就會讀取"任務隊列"，看看裏面有哪些事件。那些對應的異步任務，因而結束等待狀態，進入執行棧，開始執行。
4. 主線程不斷重複上面的第三步。

當上述代碼在Javascript中執行時，首先func1 進入運行棧，func1執行完畢後，setTimeout進入運行棧，執行setTimeout過程當中將回調函數cb 加入到任務隊列，而後setTimeout出棧，接着執行func2函數，func2函數執行完畢時，運行棧爲空，接着任務隊列中cb 進入運行棧獲得執行。能夠看出異步任務首先會進入任務隊列，當運行棧中的同步任務都執行完畢時，異步任務進入運行棧獲得執行。若是這些異步的任務執行前與執行後能提供一些鉤子函數，經過這些鉤子函數，Angular便能獲知異步任務的執行。

angular2 獲取變化通知

那麼問題來了，angular2是如何知道數據發生了改變？又是如何知道須要修改DOM的位置，準確的最小範圍的修改DOM呢？沒錯，儘量小的範圍修改DOM，由於操做DOM對於性能來講但是一件奢侈品。

在AngularJS中是由代碼$scope.$apply()或者$scope.$digest觸發，而Angular接入了ZoneJS，由它監聽了Angular全部的異步事件。

ZoneJS是怎麼作到的呢？

實際上Zone有一個叫猴子補丁的東西。在Zone.js運行時，就會爲這些異步事件作一層代理包裹，也就是說Zone.js運行後，調用setTimeout、addEventListener等瀏覽器異步事件時，再也不是調用原生的方法，而是被猴子補丁包裝事後的代理方法。代理裏setup了鉤子函數, 經過這些鉤子函數, 能夠方便的進入異步任務執行的上下文.

//如下是Zone.js啓動時執行邏輯的抽象代碼片斷
function zoneAwareAddEventListener() {...}
function zoneAwareRemoveEventListener() {...}
function zoneAwarePromise() {...}
function patchTimeout() {...}
window.prototype.addEventListener=zoneAwareAddEventListener;
window.prototype.removeEventListener=zoneAwareRemoveEventListener;
window.prototype.promise = zoneAwarePromise;
window.prototype.setTimeout = patchTimeout;

變化檢測的過程

Angular的核心是組件化，組件的嵌套會使得最終造成一棵組件樹。Angular的變化檢測能夠分組件進行，每個Component都對應有一個changeDetector，咱們能夠在Component中經過依賴注入來獲取到changeDetector。而咱們的多個Component是一個樹狀結構的組織，因爲一個Component對應一個changeDetector，那麼changeDetector之間一樣是一個樹狀結構的組織.

另外，Angular的數據流是自頂而下，從父組件到子組件單向流動。單向數據流向保證了高效、可預測的變化檢測。儘管檢查了父組件以後，子組件可能會改變父組件的數據使得父組件須要再次被檢查，這是不被推薦的數據處理方式。在開發模式下，Angular會進行二次檢查，若是出現上述狀況，二次檢查就會報錯：Expression Changed After It Has Been Checked Error。而在生產環境中，髒檢查只會執行一次。

相比之下，AngularJS採用的是雙向數據流，錯綜複雜的數據流使得它不得很少次檢查，使得數據最終趨向穩定。理論上，數據可能永遠不穩定。AngularJS給出的策略是，髒檢查超過10次，就認爲程序有問題，再也不進行檢查。

變化檢測策略

Angular有兩種變化檢測策略。Default是Angular默認的變化檢測策略，也就是上述提到的髒檢查,只要有值發生變化，就所有從父組件到全部子組件進行檢查,。另外一種更加高效的變化檢測方式：OnPush。OnPush策略，就是隻有當輸入數據(即@Input)的引用發生變化或者有事件觸發時，組件才進行變化檢測。

defalut 策略

main.component.ts

@Component({
  selector: 'app-root',
  template: `
  <h1>變動檢測策略</h1>
  <p>{{ slogan }}</p>
  <button type="button" (click)="changeStar()">  改變明星屬性
  </button>
  <button type="button" (click)="changeStarObject()">
     改變明星對象
  </button>
  <movie [title]="title" [star]="star"></movie>`,
})
export class AppComponent {
  slogan: string = 'change detection';
  title: string = 'default 策略';
  star: Star = new Star('周', '杰倫');
  changeStar() {
    this.star.firstName = '吳';
    this.star.lastName = '彥祖';
  }
  changeStarObject() {
    this.star = new Star('劉', '德華');
  }
  
}

movie.component.ts

@Component({
  selector: 'movie',
  styles: ['div {border: 1px solid black}'],
  template: `
<div>
<h3>{{ title }}</h3>
<p>
<label>Star:</label>
<span>{{star.firstName}} {{star.lastName}}</span>
</p>
</div>`,

})
export class MovieComponent {
  @Input() title: string;
  @Input() star;

}

上面代碼中, 當點擊第一個按鈕改變明星屬性時,依次對slogan, title, star三個屬性進行檢測, 此時三個屬性都沒有變化, star沒有發生變化,是由於實質上在對star檢測時只檢測star自己的引用值是否發生了改變，改變star的屬性值並未改變star自己的引用，所以是沒有發生變化。

而當咱們點擊第二個按鈕改變明星對象時 ，從新new了一個 star ，這時變化檢測纔會檢測到 star發生了改變。

而後變化檢測進入到子組件中,檢測到star.firstName和star.lastName發生了變化, 而後更新視圖.

OnPush策略

與上面代碼相比, 只在movie.component.ts中的@component中增長了一行代碼:

changeDetection:ChangeDetectionStrategy.OnPush

此時, 當點擊第一個按鈕時, 檢測到star沒有發生變化, ok,變化檢測到此結束, 不會進入到子組件中, 視圖不會發生變化.

當點擊第二個按鈕時,檢測到star發生了變化, 而後變化檢測進入到子組件中,檢測到star.firstName和star.lastName發生了變化, 而後更新視圖.

因此，當你使用了OnPush檢測機制時，在修改一個綁定值的屬性時，要確保同時修改到了綁定值自己的引用。可是每次須要改變屬性值的時候去new一個新的對象會很麻煩，immutable.js 你值得擁有！

變化檢測對象引用

經過引用變化檢測對象ChangeDetectorRef，能夠手動去操做變化檢測。咱們能夠在組件中的經過依賴注入的方式來獲取該對象：

constructor(
    private changeRef:ChangeDetectorRef
  ){}

變化檢測對象提供的方法有如下幾種：

• markForCheck() - 在組件的 metadata 中若是設置了 changeDetection:ChangeDetectionStrategy.OnPush 條件，那麼變化檢測不會再次執行，除非手動調用該方法, 該方法的意思是在變化監測時必須檢測該組件。
• detach() - 從變化檢測樹中分離變化檢測器，該組件的變化檢測器將再也不執行變化檢測，除非手動調用 reattach() 方法。
• reattach() - 從新添加已分離的變化檢測器，使得該組件及其子組件都能執行變化檢測
• detectChanges() - 從該組件到各個子組件執行一次變化檢測

OnPush策略下手動發起變化檢測

• 組件中添加事件改變輸入屬性

  在上面代碼movie.component.ts中修改以下

  @Component({
    selector: 'movie',
    styles: ['div {border: 1px solid black}'],
    template: `
  <div>
  <h3>{{ title }}</h3>
  <p>
  <button (click)="changeStar()">點擊切換名字</button>        
  <label>Star:</label>
  <span>{{star.firstName}} {{star.lastName}}</span>
  </p>
  </div>`,
  changeDetection:ChangeDetectionStrategy.OnPush
  })
  export class MovieComponent {
    constructor(
      private changeRef:ChangeDetectorRef
    ){}
    @Input() title: string;
    @Input() star;
    
    changeStar(){
      this.star.lastName = 'xjl';
    }
  }

此時點擊按鈕切換名字時,star更改以下

![圖片描述][3]

• 第二種就是上面講到的使用變化檢測對象中的 markForCheck()方法.

  ngOnInit() {
      setInterval(() => {
        this.star.lastName = 'xjl';
        this.changeRef.markForCheck();
      }, 1000);
    }

輸入屬性爲Observable

修改app.component.ts

@Component({
  selector: 'app-root',
  template: `
  <h1>變動檢測策略</h1>
  <p>{{ slogan }}</p>
  <button type="button" (click)="changeStar()">  改變明星屬性
  </button>
  <button type="button" (click)="changeStarObject()">
     改變明星對象
  </button>
  <movie [title]="title" [star]="star" [addCount]="count"></movie>`,
})
export class AppComponent implements OnInit{
  slogan: string = 'change detection';
  title: string = 'OnPush 策略';
  star: Star = new Star('周', '杰倫');
  count:Observable<any>;

  ngOnInit(){
    this.count = Observable.timer(0, 1000)
  }
  changeStar() {
    this.star.firstName = '吳';
    this.star.lastName = '彥祖';
  }
  changeStarObject() {
    this.star = new Star('劉', '德華');
  }
  
}

此時,有兩種方式讓MovieComponent進入檢測,一種是使用變化檢測對象中的 markForCheck()方法.

ngOnInit() {
    this.addCount.subscribe(() => {
      this.count++;
      this.changeRef.markForCheck();
    })

另一種是使用async pipe 管道

@Component({
  selector: 'movie',
  styles: ['div {border: 1px solid black}'],
  template: `
<div>
<h3>{{ title }}</h3>
<p>
<button (click)="changeStar()">點擊切換名字</button>        
<label>Star:</label>
<span>{{star.firstName}} {{star.lastName}}</span>
</p>
<p>{{addCount | async}}</p>
</div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})