Обнаружение изменений Angular 2 - обновление DOM, хотя ничего не изменилось - PullRequest
Новая
       35

Обнаружение изменений Angular 2 - обновление DOM, хотя ничего не изменилось

0 голосов
/ 02 июня 2018

Я создал приложение, работающее в режиме бета-версии, и сейчас пытаюсь оптимизировать его производительность.У меня есть случай, когда есть таблица с изображениями, и я заметил, что изображения продолжают мерцать, что заставило меня заглянуть под капот, и я заметил, что DOM продолжает обновляться.При обновлении, как в, ничего не меняется, но он продолжает удалять и заново добавлять себя несколько раз в секунду.

Я подумал, что сначала я войду в функцию ngOnChanges (_: SimpleChanges), но ничего не происходитоттуда console.log, что означает, что сам компонент не изменился, но по какой-то причине он считает необходимым обновить свой DOM.

Мне просто интересно, как я могу отладить это и узнать,что вызывает обновление компонента DOM?

Может быть, некоторые инструменты помогут?Я пробовал Augury, но это не помогает при отладке проблем с производительностью.

PS.Визуализация компонента в режиме 

changeDetection: ChangeDetectionStrategy.OnPush

немного помогает (до сих пор не понимаю, почему это помогает, если OnChanges никогда не запускается) ... Но это не полностью устраняет обновление DOM в случайные моменты времени.

Редактировать 1

Обновление DOM в консоли выглядит следующим образом enter image description here

1 Ответ

0 голосов
/ 02 июня 2018

Я нашел ответ на свой вопрос.Моя проблема заключалась в использовании массивов, сгенерированных методом get в моем шаблоне.Ака.Есть две модели: [ParentModel, ChildModel], ParentModel содержит массив ChildModels.Теперь я хотел получить только выборку этих ChildModels из ParentModel, и то, что я сделал, было 

class ParentModel {
    __specificChildren() : IChild[] {}
}

, и в шаблоне я использовал 

*ngFor="let child of parentModel.__specificChildren()"

Это начало бесконечно обновляться.Возможно, потому что некоторые глобальные события вызвали обнаружение изменений в связанных моделях, которые каждый раз создавали массив с другим указателем, который сообщал Angular, что что-то изменилось, и, таким образом, инициировал обнаружение изменений.

В любом случае, какЯ решил, что вместо того, чтобы иметь функцию в шаблоне, которая была оптимальной, потому что я не хотел создавать бесполезную переменную в компоненте, чтобы усложнять вещи, я все еще создал вспомогательную переменную в компоненте, что привело к:

Компонент 

public specificChildren: IChild[]

parentDatatabe.subscribe( _parent {
    this.parent = _parent;
    this.specificChildren = _parent.__specificChildren()
})

Шаблон 

*ngFor="let child of specificChildren"

Таким образом, установка новых потомков возможна только тогда, когда родительская база данных выдвигаетновое значение

...