什麼是變更檢測？聊聊angular的變更機制

一、什麼是變更檢測

• 概括： 一種更改檢測機制，用於遍歷元件樹，檢查每個元件的變化，並在元件屬性發生變化的時候觸發DOM的更新。【相關教學推薦：《》】
• 變更檢測的基本任務： 獲得程式的內部狀態並使之在使用者介面可見。這個狀態可以是任何的物件、陣列、基本資料型別。

二、什麼引起了變更

事件驅動，來源有以下三大類:

• 事件：頁面 click、submit、mouse down……
• XHR：從後端伺服器拿到資料
• Timers：setTimeout()、setInterval()

這幾點有一個共同點，就是它們都是非同步的，也就是說，所有的非同步操作是可能導致資料變化的根源因素，所以每當執行一些非同步操作時，我們的應用程式狀態可能發生改變，而這時則需要去更新檢視

三、狀態變化怎麼通知變更檢測

在Angular當中則接入了NgZone，由它來監聽Angular所有的非同步事件，Angular 在啟動時會重寫（通過 Zone.js）部分底層瀏覽器 API（暴力的攔截了所有的非同步事件）。

常見的有兩種方式來觸發變化檢測，一種方法是基於元件的生命週期勾點

ngAfterViewChecked() {
    console.log('cluster-master.component cd');
  }

另一種方法是手動控制變化檢測的開啟或者關閉，並手動觸發

constructor(private cd: ChangeDetectorRef) {
  cd.detach()
  setInterval(() => {
    this.cd.detectChanges()
  }, 5000)
}

三、Angular 變更檢測

Angular 的核心是元件化，元件的巢狀會使得最終形成一棵元件樹，Angular 的變化檢測可以分元件進行，每個元件都有對應的變化檢測器 ChangeDetector，可想而知這些變化檢測器也會構成一棵樹。
在 Angular 中每個元件都有自己的變化檢測器，這使得我們可以對每個元件分別控制如何以及何時進行變更檢測。

四、變更檢測策略

Angular還讓開發者擁有客製化變化檢測策略的能力。

• default: 每次變更檢測都會引起元件的變更檢測，包括其他元件的狀態變化，以及本元件參照型變數內部屬性值變化
• Onpush: 每次變更檢測會跳過本元件的變更檢查，除非滿足一些條件

4.1 default

Angular 預設的變化檢測機制是 ChangeDetectionStrategy.Default，每次非同步事件 callback 結束後，NgZone會觸發整個元件樹 至上而下做變化檢測

4.2 onPush

OnPush 策略，用以跳過某個 component 以及它下面所有子元件的變化檢測

其實在設定了 OnPush 策略以後，還是有許多方法可以觸發變更檢測的；

• 1）元件的 @Input 屬性的參照發生變化。
• 2）元件內的 DOM 事件，包括它子元件的 DOM 事件，比如 click、submit、mouse down。
• 3）元件內的 Observable 訂閱事件，同時設定 Async pipe。
• 4）元件內手動使用 ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() 方法

五、變化檢測物件參照

• markForCheck()：使用於子元件，將該子元件到根元件之間的路徑標記起來，通知 angular 檢測器下次變化檢測時一定檢查此路徑上的元件，即使設定了變化檢測策略為 onPush
• detectChanges()：手動發起該元件到各個子元件的變更檢測
• detach()：將元件的檢測器從檢測器數中脫離，不再受檢測機制的控制，除非重新 attach 上
• reattach()：把脫離的檢測器重新連結到檢測器樹上

更多程式設計相關知識，請存取：！！

以上就是什麼是變更檢測？聊聊angular的變更機制的詳細內容，更多請關注TW511.COM其它相關文章！