这5篇文章将使你成为一个Angular Change Detection专家。

在过去的8个月里，我大部分空闲时间都是reverse-engineering Angular。我最感兴趣的话题是变化检测。我认为它是框架中最重要的部分，由于它负责像DOM更新、输入绑定和查询列表更新这样的“可视”工做。个人探索产生了一系列深刻的文章，突出了变化检测机制的主要思想，深刻了解它的实现细节。在这篇文章中，我把它们放在一块儿，简短地描述了每个你能找到什么。一旦你读完它们，你将得到变化检测启发?。

---

理解变化检测

下面是5篇深刻研究的文章，它们将极大的扩展你所知道的Angular变化检测过程的范围。每篇文章创建在前一个解释的信息基础上，因此我建议你按照他们在这里列出的顺序阅读它们。

Angular’s $digest is reborn in the newer version of Angular

这篇文章把AngularJS的digest过程和Angular的变化检测进行了对比。它解释了对二者的需求，并说明如何使用相同的脏检查概念来构建它们。而后提供了一些例子，论证了Angular的生命周期钩子如何做为相同的机制在AngularJS的$watch中进行使用。它还代表了Angular如今所谓的从上到下的单项数据流不一样于AngularJS 。文章解释了这个强制执行背后的缘由以及它对架构的好处和限制。本文将对那些正寻找迁移到Angular有AngularJS经验的开发者是很是有用的。

Do you still think that NgZone (zone.js) is required for change detection in Angular?

这篇文章描述了NgZone是如何在zone.js这个库上实施的以及NgZone 在这个框架上扮演的角色。与一般的观点相反，它不是变化检测过程的一部分，而是用来触发它的。文章首先说明Angular能够检测变化进行渲染，没有ngzone和zone.js，进而说明NgZone带来的价值以及它如何实现的。文章的大部份内容是解释经常使用的公共API如isStable, onUnstable 和 onMicrotaskEmpty。文章最后解释了当使用第三方库的时候好比GoogleAPI一些常见的不会被检测到的变化陷阱。

Everything you need to know about change detection in Angular

若是您想深刻了解变动检测机制，这篇文章是必读的。它提供了如何使用相关连接进行进一步探索的高级概述。编写工做首先介绍了一个称为View的内部组件表示，并解释了变动检测过程在视图上运行。而后，它列出了在执行顺序的变化检测期间执行的全部操做的列表。这些操做包括更新视图状态、渲染、处理输入绑定和调用生命周期钩子。最后它解释了ChangeDetectorRef 公共的API如detach, detectChanges 和 markForCheck以及提供了方法用法的简短示例。

The mechanics of DOM updates in Angular

本文深刻探讨了与DOM的同步应用模型中的实现细节，即单向数据绑定或DOM渲染。此操做在变动检测过程当中占据中心位置，由于它正是使组件在DOM渲染中呈现变化的缘由。本文首先介绍了关于View(视图)概念的附加细节，特别是View Factory (视图工厂)和几个基本类型的View Nodes(视图节点)。而后，它展现了变动检测机制如何经过对这些节点进行插值或输入绑定来执行DOM更新设置。

The mechanics of property bindings update in Angular

与前面关于DOM更新的文章相似，这篇文章探讨了负责更新子组件和指令的输入绑定的过程的实现细节。它引入了绑定定义的概念及其在变化检测过程当中的做用。而后，它将演示编译器在处理属性绑定的模板语法时，如何生成这些绑定定义。最后，它概述了在视图节点上运行变化检测和更新子组件和指令的输入属性的一个按部就班的过程。

---

避免常见的困惑

这里是另一些有价值的文章列表，能够解释我在stackoverflow常常看到的关于变化检测的一些困惑。

Do you really know what unidirectional data flow means in Angular

本文解释双向数据绑定和单向数据流之间的区别。它演示了在Angular和AngularJS 中更新输入绑定的过程是如何不一样的，以及这种差别是如何重要的。

Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error

这篇文章解释了Angular社区频繁和常常被误解的错误背后的缘由和机制。虽然有些开发人员认为它是一个bug，但实际上这是一个设计决策，经过将变动检测运行限制为单个运行，而不是AngularJS中的屡次运行($digest runs)，从而提升性能。本文解释了如何抛出错误有助于防止模型数据和UI之间的不一致，从而将错误或旧数据显示给页面上的用户。本文主要由两部分组成：第一部分探讨错误产生的缘由，第二部分提出可能的修正。它还解释了为何不在生产模式中抛出错误。

If you think ngDoCheck means your component is being checked

本文对于为何使用OnPush策略组件的ngDoCheck周期钩子被引起即便对这些组件的输入绑定没有改变提供了一个详细的回答。它解释了一般未预料到的事实：当父组件被选中时，钩子会触发子组件，并显示该机制是如何触发ngDoCheck的，即便看起来没有理由这样作。文章的第二部分经过演示几个用例回答了咱们须要ngDoCheck的问题。

The essential difference between Constructor and ngOnInit in Angular

关于在stackoverflow有超过10万见解的最受欢迎的Angular问题，本文提供了一个详细的回答，那就是构造函数和ngOnInit之间的差别。本文给出了一个全面的比较，突出了用法上的差别，并对组件初始化过程进行了分析。

---

Angular Air 上有趣的插曲

我还强烈推荐观看Angular Air episode，我在这里讨论视图层的内部表示和更改检测渲染部分。我也揭示了zones 和使用ChangeDetectorRef变化检测手动控制相关的一些常见的误解

---

关于Angular内幕的实物书

我开始写一本关于Angular内幕的综合书。它将被称为“Angular内幕，框架结构的最终指南”，并将对编译器、视图、DI和更改检测机制如何在引擎盖下工做进行深刻的解释。我还计划在调试或优化工做时，包含一些真实的示例，说明在虚拟机引导下实现的知识可能会有什么帮助。这本书大约有150到200页长，有不少图表便于理解材料。若是你感兴趣的话，你会买一本关于Angular内幕的书吗？文章提供了更多关于这本书的信息，并包含一个订阅表格，你能够用它告诉我你有兴趣买这本书。

---

感谢您的阅读! 若是喜欢这篇文章, 请点赞。 它对我意义重大，它能帮助其余人看到这篇文章。 对于更高级的文章，你能够在Twitter或Medium上跟随我。

---

参考资源

• These 5 articles will make you an Angular Change Detection expert