Обнаружение изменений — это фундаментальный аспект Angular, отвечающий за идентификацию и обновление частей DOM, которые изменились в ответ на изменения данных или взаимодействия с пользователем. Этот процесс гарантирует, что пользовательский интерфейс остается согласованным с базовыми данными, улучшая взаимодействие с пользователем и производительность приложения.

Роль Zone.js

Исторически Angular использовал Zone.js в качестве механизма обнаружения изменений. Zone.js — это библиотека JavaScript, которая перехватывает асинхронные операции, позволяя Angular отслеживать изменения и соответствующим образом запускать обновления. Однако включение Zone.js может увеличить нагрузку на приложение, особенно в сценариях с частыми асинхронными действиями.

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

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

• По умолчанию: Обнаружение изменений срабатывает после каждого перехвата жизненного цикла, например ngOnInit или ngAfterViewInit. Эта стратегия проста, но может привести к ненужным обновлениям DOM, особенно в больших приложениях.

@Component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `
})
export class MyComponent {
  message = 'Hello, world!';
}

Эту стратегию легче реализовать, поскольку Angular автоматически обрабатывает большую часть логики обнаружения изменений.
Самая большая проблема с этой стратегией обнаружения изменений заключалась в том, что она приводила к ненужным обновлениям DOM, что становится критически важным для больших приложений.

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

@Component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  message = 'Hello, world!';
} 

Хотя стратегия обнаружения изменений onPush свела к минимуму ненужные манипуляции с DOM, самая большая проблема со стратегией изменений onPush заключалась в том, что разработчикам приходилось выполнять больше ручного управления и инициировать изменения вручную. Им приходилось явно обрабатывать обнаружение изменений с помощью метода ChangeDetectorRef.detectChanges() в определенных сценариях, например, когда данные изменяются косвенно или при использовании изменяемых объектов.

Angular 18 и гибридное обнаружение изменений: бесзональный подход

Чтобы решить проблемы, связанные с Zone.js, в Angular 18 введена экспериментальная функция, известная как обнаружение гибридных изменений. Этот подход направлен на полное устранение Zone.js с использованием нового механизма обнаружения изменений для обнаружения изменений и манипулирования DOM.

Включение обнаружения гибридных изменений:

Чтобы включить обнаружение гибридных изменений, вы можете использовать следующий код:

bootstrapApplication(RootCmp,
{ providers: [provideExperimentalZonelessChangeDetection()] 
}
);

Это приведет к обнаружению изменений в следующих сценариях:

• Сигнал обновлен.
• ВызываетсяchangeDetectorRef.markForCheck().
• Наблюдаемый объект, подписанный с помощью AsyncPipe, получает новое значение.
• Компонент присоединяется или отсоединяется.
• Вход установлен.

После включения обнаружения гибридных изменений вы можете безопасно удалить Zone.js из полифилов вашего приложения.

 "polyfills": [
              "zone.js" //remove this line
            ],

Преимущества обнаружения гибридных изменений

• Повышение производительности: Устранение Zone.js снижает накладные расходы, что приводит к повышению производительности, особенно в приложениях с многочисленными асинхронными операциями.

• Расширенные возможности для разработчиков: Удаление ручного обнаружения изменений упрощает разработку и снижает вероятность ошибок.

• Меньший размер приложения: Zone.js обычно увеличивает размер приложения примерно на 13 КБ. Если его удалить, пакет может стать меньше.