Какова производительность проверки атрибута по сравнению с проверкой возвращаемого значения функции?

Question

У меня есть список элементов в компоненте:

list: Array<MyType>;

Пользователь может выбрать и отменить выбор элементов при нажатии:

toggleItem(item: MyType) {
  if (this.selection.has(item)) {
    this.selection.delete(item);
    return;
  }

  this.selection.add(item);
}

Выбранные элементы сохраняются в Set:

selected: Set<MyType> = new Set();

Теперь мне нужно переключить класс CSS и атрибут title в зависимости от того, выбран элемент или нет:

<button class="toggle"
        type="button"
        [ngClass]="{'selected': selection.has(item)}"
        [title]="selection.has(item) ? 'Select' : 'Deselect'"
        (click)="toggleItem(item)">
  {{ item.title }}
</button>

---

Теперь я где-то читал, что это плохая идея - оценивать вызовы функций, так как Angular периодически будет вызывать их для обнаружения изменений, как здесь:

[ngClass]="{'selected': selection.has(item)}"

Говорят, что вместо этого лучше проверить переменную или член объекта, например:

[ngClass]="{'selected': item.selected}"

Верно ли и снижает ли производительность то, как я ее использую в настоящее время? Должен ли я добавлять свойство к каждому элементу, который устанавливается при добавлении или удалении из Set?

Answer 1

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

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

Но это не совсем так с функцией. С функциями Angular может определить, изменилась ли переменная, вызвав саму функцию.

Теперь это не имеет большого значения, если функция является однострочным возвращением значения.

Но если функция имеет сложную логику, она по существу убьет всю производительность. При каждом запуске цикла обнаружения изменений Angular будет вызывать эту функцию, чтобы проверить наличие изменений и обнаружить их.

Следовательно, на самом деле не рекомендуется писать функции в синтаксисе привязки данных в шаблонах.

ПРИМЕЧАНИЕ: Я также написал Среднюю статью об этом. Я бы посоветовал вам проверить это. В основном это касается производительности Angular Reactive Forms. Но это поможет вам лучше понять, что я сказал выше.