Understanding ngDoCheck and KeyValueDiffers in Angular（译）

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/u/2949632/blog/1576975