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中文網其他相關文章！