Производительность в Angular: ngDoCheck и IterableDiffers

Mar 31, 2018

ngDoCheck - может привести к тормозам в приложении, так как данный метод вызывается на любое изменение в приложении.

Рассмотрим пример: есть входящее свойство datasource, которое содержит массив объектов. Наша цель определить были ли объекты добавлены, удалены и т.д.

Angular имеет в своем наличии классы, называемые дифферами, которые предназначены для обнаружения изменений в разных типах объектов. Начнем с конструктора: объекты private IterableDiffers (для массивов) и KeyValueDiffers (для объектов) используются для обнаружения изменений в коллекции источника данных.

Метод IterableDiffers.find получает объект (datasource) и возвращает IterableDifferFactory (IterableDiffers#find).

Класс IterableDifferFactory имеет метод create(), который возвращает объект IterableDiffer, который в свою очередь и определяет изменения.

import { Component, Input, IterableDiffers, DoCheck } from '@angular/core';
@Component({
    selector: 'app-array-watch-demo',
    templateUrl: './array-watch-demo.component.html',
    styleUrls: ['./array-watch-demo.component.css']
})
export class ArrayWatchDemoComponent implements DoCheck {
    @Input() datasource: Array<any> = [];
    differ: any;

    constructor(differs: IterableDiffers) {
        this.differ = this.differs.find([]).create(null);
    }

    ngDoCheck() {
        const change = this.differ.diff(this.datasource);
        console.log(change);
        // here you can do what you want on array change
        // you can check for forEachAddedItem or forEachRemovedItem on change object to see the added/removed items
        // Attention: ngDoCheck() is triggered at each binded variable on componenet;
        // if you have more than one in your component, make sure you filter here the one you want.
    }
}

проверка на null позволяет директиве избежать лишней работы, например, если метод ngDoCheck вызывается в местах приложения, которые не связаны с объектом слежки.

В нашем примере мы следим за новыми в объектами в источнике данных, но Angular также может отслеживать изменения в паре "ключ - значение".

Добавить комментарий