Understanding ngDoCheck and KeyValueDiffers in Angular（译）
这篇文章的理解基于读者知道什么是 简单数据类型 (string number ...)和 引用（地址）类型 (存储的是指向具体数据的地址) 的前提下去看
在这篇文章中，我们将学习ngStyle是如何使用
ngDoCheck
生命周期钩子和
KeyValueDiffers
组合去实现的。
The KeyValueDiffers service:
KeyValueDiffers
服务是作用于变化检测，它对一个(构建ngStyle)对象进行实时的跟踪检测，并通过暴露一个API对这些更改后的对象作出反应(稍后我们将看到如何使用该服务)。
The ngDoCheck lifecycle:
我们都很熟悉
ngOnChanges
的生命周期挂钩。如果您的输入是原始类型或输入引用（引用地址）的更改，您可以实现
ngOnChanges
通知更改。
如果模型的引用地址没有改变，但是输入模型的一些属性发生了变化，您可以使用
ngDoCheck
生命周期钩子来手动构造您的变更检测逻辑。
Ok，说完这些后我们用代码实践一下。
我们创建ngStyle指令并实现DoCheck接口。同时我们注入
KeyValueDiffers
、
Renderer
和
ElementRef
（获取宿主元素）。
我们（在组件上或元素上）创建一个作为setter的ngStyle输入。如果我们还未定义differ，（第一次）我们就会通过调用来创造一个新的differ（可以理解需要有旧值才能做脏值校验）:
this._differ = this._differs.find(value).create(null);find()方法只作脏值检测。
如果你感兴趣的话，下面就是Angular differ检测机制是如何查找value值是否属于地址引用:
return obj instanceof Map || isJsObject(obj);create()方法只是创建differ，并返回defaultkeyvalue的实例。(null用于ChangeDetectorRef（变化检测）)
我们需要实现
ngDoCheck
生命周期钩子，因为正如我们前面所说的，我们没有改变对象引用地址，所以我们不能使用
ngOnChanges
。
For example:
<div [ngStyle]=”style”></div>
// In our component constructor
this.style = { color: 'red' };
// After click event
this.style.color = 'blue'接下来，我们将通过调用带有新值的diff()方法来检查对象是否被更改。如果没有任何更改，则返回值将为null。如果有任何更改，返回值将是一个对象，，我们可以使用该对象的三个方法对这些更改作出反应。
这些方法是很容易理解的，我们通过一个回调传递给我们需要知道的每一个更改。每个回调都会给您一个KeyValueChangeRecord的记录。这个对象包含三个有用的关键字、
key
、
currentValue
和
previousValue
现在，每当我们有了一个更改，我们就调用setStyle()方法，该方法从我们的
Renderer
服务调用setElementStyle()来设置新的元素样式。
这是ngStyle的源代码。我没有写这段代码，也没有质疑他的写法，我只是在解释这些概念（
KeyValueDiffers
）以及它是如何在幕后工作的。
你可以在这里看完整的ngStyle代码， here 。
总结：
在我的理解中，ngDoCheck是不可以乱用的，因为触发这个钩子的场景特别多尤其后台系统，有表格且交互特别多的情况，这会导致系统很卡因为其变化检测太频繁，可以使用google的perfermance查看页面渲染及变化检测用到的时间去判断卡的原因，一般页面渲染影响很卡的情况很少，现在的浏览器性能足以应付大多数页面的渲染。
ngOnChanges只会监听通过@Input元数据传递的值是否变化从而响应相应的Logic，但这仅仅适用于监听简单数据类型的传递，当遇到引用（地址）类型（Object、Array）只改变属性或数组值是不会被监听到的，所以本文的抽象类KeyValueDiffers就是应用于Object这种情况，数组使用的抽象类IterableDiffers，用法大同小异，就是前者传对象'{}'，后者传数组'[]'。
this.differ = differs.find([]).create(null);具体例子点击 Pluker
翻译源： Understanding ngDoCheck and KeyValueDiffers in Angular
参考资源 ：
