Чем отличаются стратегии Default и OnPush и при каких событиях проверяется компонент с OnPush?

Angular использует механизм change detection, чтобы синхронизировать состояние компонентов с DOM. По умолчанию каждый компонент имеет стратегию Default, при которой Angular проверяет его при каждом цикле обнаружения изменений, инициированном событиями DOM, таймерами, HTTP-запросами или промисами (через Zone.js). Это надёжно, но при большом дереве компонентов становится дорого.

Стратегия OnPush

Стратегия OnPush сообщает Angular, что компонент нужно проверять только в определённых случаях:

• изменилась ссылка на входное свойство @Input (сравнение по ссылке, а не по значению);
• произошло событие внутри самого компонента или его дочерних элементов (например, клик, ввод);
• сработал async-pipe, привязанный к Observable;
• явно вызван ChangeDetectorRef.markForCheck() или detectChanges();
• обновлён сигнал (в Angular 16+ с signals).

Пример

@Component({
  selector: 'app-user',
  template: '{{ user.name }}',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserComponent {
  @Input() user!: { name: string };

  constructor(private cd: ChangeDetectorRef) {}

  // мутация не сработает — нужна новая ссылка
  update() {
    this.user = { ...this.user, name: 'Bob' };
    // либо this.cd.markForCheck();
  }
}

Практические следствия

• Данные должны быть иммутабельными: вместо arr.push(x) используйте this.arr = [...this.arr, x].
• Мутации объектов и массивов не вызовут перерисовку без markForCheck().
• OnPush хорошо сочетается с RxJS и async-pipe, который сам помечает компонент для проверки.
• Default проще в использовании, но менее производителен на больших приложениях.

Итог: OnPush стоит применять в крупных приложениях и «глупых» презентационных компонентах, где важна производительность и данные приходят иммутабельно; Default уместен в небольших проектах или там, где мутации неизбежны.