> В чем разница между markForCheck и detectChanges в Angular Change Detection? (Angular)

Короткий ответ

markForCheck помечает компонент и его предков как dirty (требующие проверки), но не запускает change detection немедленно - он будет выполнен в ближайшем цикле. detectChanges запускает change detection немедленно для компонента и его дочерних элементов, игнорируя стратегию OnPush. markForCheck используется с OnPush для отложенной проверки, detectChanges - для принудительной синхронной проверки.

Подробное объяснение

В Angular change detection работает по умолчанию через Zone.js, который перехватывает асинхронные события и запускает проверку всего дерева компонентов. При использовании стратегии ChangeDetectionStrategy.OnPush проверка выполняется только при изменении входных свойств (через @Input) или при явном вызове markForCheck или detectChanges.

markForCheck:

• Добавляет текущий компонент и всех его предков в очередь компонентов, которые будут проверены в следующем цикле change detection.
• Не запускает проверку немедленно - она произойдет при следующем событии (например, клик, таймер, HTTP-ответ), которое активирует Zone.js.
• Полезен, когда данные обновляются внутри компонента (например, через сервис или асинхронный callback) и нужно сообщить Angular, что компонент "грязный".
• Работает только вверх по дереву: помечает предков, но не дочерние компоненты (они проверяются, если их родитель проверяется).

detectChanges:

• Запускает change detection немедленно и синхронно для текущего компонента и всех его дочерних элементов (рекурсивно вниз по дереву).
• Игнорирует стратегию OnPush - принудительно проверяет все дочерние компоненты, даже если они OnPush и не помечены как dirty.
• Требует осторожности: может вызвать лишние проверки и проблемы с производительностью, если вызывать часто.
• Обычно используется в тестах (через fixture.detectChanges()) или в редких случаях, когда нужно немедленно обновить представление после ручного изменения данных.

Ключевое различие: markForCheck - это "запланировать проверку позже", а detectChanges - "проверить сейчас". markForCheck работает вверх по дереву, detectChanges - вниз.

На практике

• С OnPush: используйте markForCheck в сервисах или при обновлении данных через BehaviorSubject/Observable, чтобы сообщить Angular о необходимости проверки. Например, после next() в сервисе вызовите cdRef.markForCheck() в компоненте.
• Избегайте detectChanges в production-коде, если это не критично - он нарушает оптимизацию OnPush и может привести к лишним проверкам.
• В тестах: fixture.detectChanges() - стандартный способ запустить change detection и проверить представление.
• Ручное обновление DOM: если вы изменили данные вне зоны Angular (например, через стороннюю библиотеку), используйте detectChanges для немедленного обновления, но лучше обернуть код в NgZone.run().
• Производительность: markForCheck предпочтительнее, так как он позволяет Angular оптимизировать проверки в рамках одного цикла.

Пример кода

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

@Component({
  selector: 'app-example',
  template: `<p>{{ data }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {
  data = 'initial';

  constructor(private cdr: ChangeDetectorRef) {}

  updateWithMarkForCheck() {
    this.data = 'updated via markForCheck';
    this.cdr.markForCheck(); // Проверка произойдет в ближайшем цикле
  }

  updateWithDetectChanges() {
    this.data = 'updated via detectChanges';
    this.cdr.detectChanges(); // Проверка произойдет немедленно
  }
}

Как отвечать на собеседовании

• Начните с краткого определения: markForCheck - отложенная проверка, detectChanges - немедленная.
• Объясните направление проверки: markForCheck идет вверх (к предкам), detectChanges - вниз (к детям).
• Упомяните связь с OnPush: markForCheck - основной способ для OnPush-компонентов сообщить об изменениях.
• Приведите практический пример: использование markForCheck в сервисе с Observable, detectChanges в тестах.
• Подчеркните, что detectChanges - это "тяжелая артиллерия", которую стоит применять осторожно.
• Если спросят про ApplicationRef.tick() - скажите, что это глобальный запуск проверки всего дерева, в отличие от локальных методов.

Что проверяет интервьюер

• Понимание механизма change detection и стратегии OnPush.
• Знание разницы между синхронной и отложенной проверкой.
• Умение выбирать правильный метод в зависимости от сценария (например, при работе с асинхронными данными).
• Осознание влияния на производительность и потенциальных проблем (лишние проверки, ошибки ExpressionChangedAfterItHasBeenCheckedError).
• Практический опыт: как вы используете эти методы в реальных проектах.

Типичные ошибки

• Путаница с направлением: думают, что markForCheck проверяет детей, а detectChanges - предков. На самом деле наоборот.
• Злоупотребление detectChanges: вызывают его в каждом обновлении данных, убивая преимущества OnPush.
• Забывают вызвать markForCheck в OnPush-компоненте при обновлении через сервис - представление не обновляется.
• Использование detectChanges внутри Angular-зон (например, в обработчике клика) - это избыточно, так как Zone.js уже запустит проверку.
• Вызов detectChanges в ngOnInit - может вызвать ошибку ExpressionChangedAfterItHasBeenCheckedError, так как компонент еще не стабилизирован.