Frontender Libs - обзор библио… on Telegram: “Оптимизация производительности в Angular ChangeD…”

Оптимизация производительности в Angular

ChangeDetectionStrategy.OnPush работает по принципу, что изменения в компоненте должны происходить только в следующих случаях:

1. Изменение входного свойства (@Input).
2. Событие внутри компонента (например, клик по кнопке).
3. Использование асинхронного пайпа для подписки на Observable или Promise.

Для использования этой стратегии, в декораторе компонента нужно задать свойство changeDetection:

import { Component, ChangeDetectionStrategy, Input } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `
    <div>
      <p>{{ user.name }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserComponent {
  @Input() user: { name: string };
}

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

👉 @sWebDev