关于angular:Angular-Change-Detection-的学习笔记

Angular 变化检测机制比 AngularJs 中的等效机制更通明且更易于推理。然而在某些状况下（例如在进行性能优化时），咱们的确须要晓得幕后产生了什么。因而，让咱们通过以下主题深刻理解变更检测：

如何施行变更检测？
Angular 变动检测器是什么样子的，我能看到吗？
默认的变更检测机制是如何工作的
关上 / 敞开更改检测，并手动触发它
防止变更检测循环：生产与开发模式
什么是 OnPush 变化检测模式实际上呢？
应用 Immutable.js 简化 Angular 应用程序的构建

如何施行变更检测？
Angular 能够检测到组件数据何时发生变化，而后主动从新渲染视图以反映该变动。然而，在像单击按钮这样的低级事件之后，它怎么能做到这一点，这可能产生在页面的任何中央？

要了解这是如何工作的，咱们须要首先意识到在 Javascript 中整个运行时 (runtime) 在设计上是可重载的。如果咱们违心，咱们能够重载 String 或者 Number 这些原生函数。

Angular 利用在启动时，会 patch 几个低级浏览器 API，例如 addEventListener，它是用于注册所有浏览器事件（包含单击处理程序）的浏览器函数。

Angular 将其替换 addEventListener 的另一个新版本：

// 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 轮次运行的长堆栈跟踪。

Patch 了以下罕用浏览器机制以反对更改检测：

所有浏览器事件（点击、鼠标悬停、按键等）
setTimeout() 和 setInterval()
Ajax HTTP 申请

事实上，Zone.js patch 了许多其余浏览器 API 以通明地触发 Angular 更改检测，例如 Websockets。

这种机制的一个限度是，如果因为某种原因，Zone.js 不反对异步浏览器 API，则不会触发更改检测。

这解释了如何触发更改检测，然而一旦触发它实际上是如何工作的？

每个 Angular 组件都有一个关联的变更检测器，它是在应用程序启动时创立的。

上面是一个例子:

@Component({
    selector: 'todo-item',
    template: `<span class="todo noselect" 
       (click)="onToggle()">{{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 类蕴含一个嵌套对象：

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

在 Todo 类的代码里设置一个断点:

当上图第 11 行代码触发时, 咱们在调试器里察看上下文:

这个办法一开始可能看起来很奇怪，所有的变量名字都很奇怪。然而通过深入研究它，咱们留神到它做了一些非常简单的事件：对于模板中应用的每个表达式，它将表达式中应用的属性的以后值与该属性的先前值进行比拟。

如果前后的属性值不同，就会设置 isChanged 为 true，原理就是这样。实际上，它是通过应用一种名为 looseNotIdentical() 的办法来比拟值
，这实际上只是与 NaN 状况下的非凡逻辑的 === 比拟。

源代码如下：

咱们能够在 change detector 代码中看到，owner 嵌套对象的属性也在进行变更查看。

但只比拟 firstname 属性，而不是 lastname 属性。

这是因为在组件模板中没有应用 lastname 这个属性。同样，Todo 的顶级 id 属性也未进行比拟。

默认状况下，Angular Change Detection 通过查看模板表达式 (template expression) 的值是否已更改来工作。这是为所有组件实现的。

并且，Angular 不做深度对象比拟来检测变动，它只思考模板应用的属性。

如果咱们的 Todo 列表变得十分大，咱们能够将 TodoList 组件配置为仅在 Todo 列表更改时更新本身。这能够通过将组件更改检测策略更新为 OnPush 来实现：

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

当初让咱们向应用程序增加几个按钮：一个通过间接扭转它来切换列表的第一项，另一个将 Todo 增加到整个列表。代码如下所示：

@Component({
    selector: 'app',
    template: `<div>
                    <todo-list [todos]="todos"></todo-list>
               </div>
               <button (click)="toggleFirst()">Toggle First Item</button>
               <button (click)="addTodo()">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 不同的是，变更检测机制是可定制的。

更多 Jerry 的原创文章，尽在：” 汪子熙 ”:

关于angular:Angular-Change-Detection-的学习笔记

Overriding browser default mechanisms

反对浏览器异步 API

The change detection tree

How does the default change detection mechanism work?

And what about the nested object owner?

The OnPush change detection mode

总结