Angular [變化檢測機制](https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/)比 AngularJs 中的等效機制更透明且更易於推理。但是在某些情況下（例如在進行效能最佳化時），我們確實需要知道幕後發生了什麼。因此，讓我們透過以下主題深入瞭解變更檢測：

- 如何實施變更檢測？
- Angular 變化檢測器是什麼樣子的，我能看到嗎？
- 預設的變更檢測機制是如何工作的
- 開啟/關閉更改檢測，並手動觸發它
- 避免變更檢測迴圈：生產與開發模式
- 什麼是OnPush變化檢測模式實際上呢？
- 使用 Immutable.js 簡化 Angular 應用程式的構建

如何實施變更檢測？
Angular 可以檢測到元件資料何時發生變化，然後自動重新渲染檢視以反映該變化。但是，在像單擊按鈕這樣的低階事件之後，它怎麼能做到這一點，這可能發生在頁面的任何地方？

要理解這是如何工作的，我們需要首先意識到在 Javascript 中整個執行時(runtime)在設計上是可過載的。如果我們願意，我們可以過載 String 或者 Number 這些原生函式。

# Overriding browser default mechanisms

Angular 應用在啟動時，會 patch 幾個低階瀏覽器 API，例如 addEventListener，它是用於註冊所有瀏覽器事件（包括單擊處理程式）的瀏覽器函式。

Angular 將其替換addEventListener 的另一個新版本：

```typescript
// this is the new version of addEventListener
function addEventListener(eventName, callback) {
     // call the real addEventListener
     callRealAddEventListener(eventName, function() {
        // first call the original callback
        callback(...);     
        // and then run Angular-specific functionality
        var changed = angular.runChangeDetection();
         if (changed) {
             angular.reRenderUIPart();
         }
     });
}
```

新版本 addEventListener為任何事件處理程式新增了更多功能：不僅呼叫了註冊的回撥，而且 Angular 有機會執行更改檢測和更新 UI。

這種低階執行時的 patch 動作是如何工作的？

瀏覽器 API 的這種低階 patch 是由一個名為Zone.js 的Angular 附帶的庫完成的。瞭解什麼是區域很重要。

區域只不過是在多個 Javascript VM 執行輪次中倖存下來的執行上下文。這是一種通用機制，我們可以使用它向瀏覽器新增額外的功能。Angular 在內部使用 Zones 來觸發更改檢測，但另一個可能的用途是進行應用程式分析，或跟蹤跨多個 VM 輪次執行的長堆疊跟蹤。

# 支援瀏覽器非同步 API

Patch 了以下常用瀏覽器機制以支援更改檢測：

- 所有瀏覽器事件（點選、滑鼠懸停、按鍵等）
- setTimeout() 和 setInterval()
- Ajax HTTP 請求

事實上，Zone.js patch 了許多其他瀏覽器 API 以透明地觸發 Angular 更改檢測，例如 Websockets。

這種機制的一個限制是，如果由於某種原因，Zone.js 不支援非同步瀏覽器 API，則不會觸發更改檢測。

這解釋瞭如何觸發更改檢測，但是一旦觸發它實際上是如何工作的？

# The change detection tree

每個 Angular 元件都有一個關聯的變更檢測器，它是在應用程式啟動時建立的。

下面是一個例子:

```typescript
@Component({
    selector: 'todo-item',
    template: `<span class="todo noselect">{{todo.owner.firstname}} - {{todo.description}}
       - completed: {{todo.completed}}</span>`
})
export class TodoItem {
    @Input()
    todo:Todo;

@Output()
    toggle = new EventEmitter<object>();

onToggle() {
        this.toggle.emit(this.todo);
    }
}
```

該元件將接收一個 Todo 物件作為輸入，並在 todo 狀態切換時發出一個事件。 為了使示例更有趣，Todo 類包含一個巢狀物件：

```typescript
export class Todo {
    constructor(public id: number, 
        public description: string, 
        public completed: boolean, 
        public owner: Owner) {
    }
}
```

在 Todo 類的程式碼裡設定一個斷點:

![](https://img-blog.csdnimg.cn/img_convert/195ef10c79d07ff1e3e08cf54c894535.png)

當上圖第11行程式碼觸發時,我們在偵錯程式裡觀察上下文:
![](https://img-blog.csdnimg.cn/img_convert/933d899450834eed68d7f8b0fafea4fa.png)

# How does the default change detection mechanism work?

這個方法一開始可能看起來很奇怪，所有的變數名字都很奇怪。 但是透過深入研究它，我們注意到它做了一些非常簡單的事情：對於模板中使用的每個表示式，它將表示式中使用的屬性的當前值與該屬性的先前值進行比較。

如果前後的屬性值不同，就會設定 isChanged為true，原理就是這樣。實際上，它是透過使用一種名為 looseNotIdentical() 的方法來比較值
，這實際上只是與 NaN 情況下的特殊邏輯的 === 比較。

原始碼如下：
![](https://img-blog.csdnimg.cn/img_convert/f1fe0230a96982e2bef0c3a45f86f8d5.png)

# And what about the nested object owner?

我們可以在 change detector 程式碼中看到，owner 巢狀物件的屬性也在進行變更檢查。

但只比較 firstname 屬性，而不是 lastname 屬性。

這是因為在元件模板中沒有使用 lastname 這個屬性。同樣，Todo 的頂級 id 屬性也未進行比較。

預設情況下，Angular Change Detection 透過檢查模板表示式(template expression)的值是否已更改來工作。 這是為所有元件完成的。

並且，Angular 不做深度物件比較來檢測變化，它只考慮模板使用的屬性。

# The OnPush change detection mode

如果我們的 Todo 列表變得非常大，我們可以將 TodoList 元件配置為僅在 Todo 列表更改時更新自身。 這可以透過將元件更改檢測策略更新為 OnPush 來完成：

```typescript
@Component({
    selector: 'todo-list',
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: ...
})
export class TodoList {
    ...
}
```

現在讓我們嚮應用程式新增幾個按鈕：一個透過直接改變它來切換列表的第一項，另一個將 Todo 新增到整個列表。 程式碼如下所示：

```typescript
@Component({
    selector: 'app',
    template: `<div>
                    <todo-list></todo-list>
               </div>
               <button>Toggle First Item</button>
               <button>Add Todo to List</button>`
})
export class App {
    todos:Array = initialData;

constructor() {
    }

toggleFirst() {
        this.todos[0].completed = ! this.todos[0].completed;
    }

addTodo() {
        let newTodos = this.todos.slice(0);
        newTodos.push( new Todo(1, "TODO 4", 
            false, new Owner("John", "Doe")));
        this.todos = newTodos;
    }
}
```

測試結果：

* 第一個按鈕“切換第一項”不起作用！ 這是因為 toggleFirst() 方法直接改變了列表的一個元素。
TodoList 無法檢測到這一點，因為它的輸入引用 todos 沒有改變

* 第二個按鈕能夠工作。 請注意，方法 addTodo() 建立了待辦事項列表的副本，然後在副本中新增了一個專案，最後將 todos 成員變數替換為複製的列表。 這會觸發更改檢測，因為元件檢測到其輸入中的引用更改：它收到了一個新列表。

當使用 OnPush 檢測器時，當 OnPush 元件的任何輸入屬性發生變化、觸發事件或 Observable 觸發事件時，框架將對該元件進行變更檢測。

Angular 變更檢測的重要特性之一是，與 AngularJs 不同，它強制執行單向資料流：當我們的控制器類上的資料更新時，變更檢測會執行並更新檢視。

但是，檢視的更新本身不會觸發進一步的更改。假設這些被檢視更新觸發的進一步更新，又會回過頭來觸發對檢視的進一步更新，這就是 AngularJs 中所謂的摘要迴圈(digest cycle)。

# 總結

Angular 變化檢測是一個內建的框架功能，可確保元件的資料與其 HTML 模板檢視之間的自動同步。

變更檢測的工作原理是檢測常見的瀏覽器事件，如滑鼠點選、HTTP 請求和其他型別的事件，並決定是否需要更新每個元件的檢視。

有兩種型別的變化檢測：

- 預設更改檢測：Angular 透過比較事件發生前後的所有模板表示式值來決定是否需要更新檢視。
- OnPush 更改檢測：這透過檢測是否已透過元件輸入或使用非同步管道訂閱的 Observable 將某些新資料顯式推送到元件中來工作。

Angular 預設更改檢測機制實際上與 AngularJs 非常相似：它比較瀏覽器事件前後模板表示式的值，以檢視是否發生了變化。它對所有元件都這樣做。但也有一些重要的區別：

- 一方面，沒有變化檢測迴圈，也沒有在 AngularJs 中命名的摘要迴圈。這允許僅透過檢視其模板和控制器來推理每個元件。

- 另一個區別是，由於構建變化檢測器的方式，檢測元件變化的機制要快得多。

最後，與 AngularJs 不同的是，變更檢測機制是可定製的。</object>

Angular Change Detection 的學習筆記

相關文章