Sobes.tech
Back to questions
Middle
6

В чём разница между стратегиями change detection OnPush и Default? Зачем использовать OnPush?

Companies where asked
Цифротех

Answer from AI

sobes.tech AI

В Angular стратегия обнаружения изменений (change detection) определяет, когда и как Angular проверяет компоненты на предмет изменений и обновляет DOM.

Default — это стандартная стратегия, при которой Angular проверяет компонент и все его дочерние компоненты при любом событии, которое может изменить состояние (например, событие пользователя, таймер, HTTP-запрос и т.д.). Это гарантирует актуальность данных, но может приводить к избыточным проверкам и снижению производительности.

OnPush — оптимизированная стратегия, при которой Angular проверяет компонент только если:

  • изменился входящий @Input (сравнение по ссылке),
  • произошло событие внутри компонента,
  • или вручную вызван метод markForCheck().

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

Пример:

@Component({
  selector: 'my-comp',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `{{data.name}}`
})
export class MyComponent {
  @Input() data: { name: string };
}

Если в родителе заменить data новым объектом, компонент обновится, если же изменить поле name у того же объекта, изменений не будет видно.

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