Understanding ngDoCheck and KeyValueDiffers in Angular（译）

摘要: angular2值变化检测

这篇文章的理解基于读者知道什么是简单数据类型(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);

具体例子点击Plunker

翻译源：Understanding ngDoCheck and KeyValueDiffers in Angular

参考资源：

1、Primeng使用IterableDiffers

2、Detect changes in objects inside array in Angular2