Angular Change Detection 的学习笔记

Angular 变化检测机制比 AngularJs 中的等效机制更透明且更易于推理。但是在某些情况下（例如在进行性能优化时），我们确实需要知道幕后发生了什么。因此，让我们通过以下主题深入了解变更检测：

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

如何实施变更检测？
Angular 可以检测到组件数据何时发生变化，然后自动重新渲染视图以反映该变化。但是，在像单击按钮这样的低级事件之后，它怎么能做到这一点，这可能发生在页面的任何地方？

要理解这是如何工作的，我们需要首先意识到在 Javascript 中整个运行时(runtime)在设计上是可重载的。如果我们愿意，我们可以重载 String 或者 Number 这些原生函数。

Overriding browser default mechanisms

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

支持浏览器异步 API

Patch 了以下常用浏览器机制以支持更改检测：

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

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

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

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

The change detection tree

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

下面是一个例子:

@Component({
    selector: 'todo-item',
    template: `{{todo.owner.firstname}} - {{todo.description}}
       - completed: {{todo.completed}}`
})
export class TodoItem {
    @Input()
    todo:Todo;

    @Output()
    toggle = new EventEmitter