Стратегии обнаружения изменений

В Angular Change Detection отвечает за синхронизацию состояния компонентов с представлением. В основе лежит механизм проверки зависимостей от данных, чтобы обновления интерфейса выполнялись только при изменении значений.

Angular предоставляет две основные стратегии обнаружения изменений:

  1. Default (по умолчанию)

    • Каждый компонент и его потомки проверяются при любом событии в приложении: клике, таймере, HTTP-запросе.
    • Проверка происходит сверху вниз по дереву компонентов.
    • Удобна для большинства приложений, но может быть затратной при большом количестве компонентов.

  2. OnPush

    • Проверка выполняется только если:

      • изменился входной параметр компонента (@Input()),
      • компонент сгенерировал событие через EventEmitter,
      • Observable или Promise компонента сработал.

    • Используется для повышения производительности, особенно в крупных приложениях с неизменяемыми данными (immutable data).

Пример применения стратегии OnPush:

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

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

Для контроля обнаружения изменений Angular предоставляет сервис ChangeDetectorRef с методами:

  • markForCheck() — помечает компонент и его родителей для проверки в следующем цикле.
  • detectChanges() — немедленно запускает проверку текущего компонента и его потомков.
  • detach() / reattach() — отключает/включает компонент из дерева обнаружения изменений, что полезно для оптимизации тяжелых компонентов.

Комбинация OnPush и ручного управления через ChangeDetectorRef позволяет тонко настраивать производительность интерфейса, минимизируя ненужные перерисовки и обеспечивая предсказуемое поведение.

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

Оглавление