Как работает обнаружение изменений
Разберитесь в цикле обнаружения изменений Angular
«Как работает обнаружение изменений» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Что такое обнаружение изменений
Обнаружение изменений — это процесс, с помощью которого Angular синхронизирует DOM с состоянием компонента. При изменении данных Angular повторно вычисляет привязки и обновляет только отличающиеся части.
Цикл обнаружения
Angular проходит по дереву компонентов сверху вниз, проверяя привязки каждого компонента. Такой проход сверху вниз называется одним циклом обнаружения изменений (тактом).
Что запускает такт
По умолчанию Angular запускает обнаружение изменений после асинхронных событий: событий DOM, таймеров и ответов HTTP. Координацией занимается Zone.js.
Zone.js
Zone.js перехватывает асинхронные API (setTimeout, addEventListener, Promise, XHR), чтобы Angular знал, когда выполнение завершено и может потребоваться новый такт.
// Patched by Zone.js:
setTimeout(() => this.count++, 1000);
// After the timer, Angular runs change detection.NgZone
NgZone оборачивает Zone.js для Angular. Можно выполнять код за пределами зоны Angular, чтобы не запускать обнаружение изменений для часто выполняемых циклов.
private zone = inject(NgZone);
this.zone.runOutsideAngular(() => {
// heavy work, no CD triggered
});Повторный вход в зону
Чтобы обновить интерфейс из-за пределами зоны, войдите в неё снова с помощью run, чтобы Angular запланировал такт.
this.zone.run(() => {
this.ready = true;
});Стратегия по умолчанию
При стратегии по умолчанию каждый компонент проверяется на каждом такте. Это просто и безопасно, но в больших деревьях может приводить к лишней работе.
Сравнение привязок
Angular сравнивает текущее и предыдущее значения каждой привязки с помощью Object.is. Если значение не изменилось, DOM не затрагивается.
Выражения должны быть чистыми
Выражения шаблона выполняются при каждой проверке, поэтому они должны быть быстрыми и не иметь побочных эффектов. Не вызывайте непосредственно в шаблонах ресурсоёмкие функции.
<!-- Avoid: runs every tick -->
<p>{{ computeExpensiveTotal() }}</p>ExpressionChangedAfterChecked
В режиме разработки Angular выполняет второй проход проверки. Если значение изменилось между проходами, возникает ошибка ExpressionChangedAfterItHasBeenCheckedError, указывающая на изменение состояния во время отображения.
Ручное управление
Внедрите ChangeDetectorRef, чтобы управлять обнаружением: markForCheck(), detectChanges() и detach() обеспечивают точный контроль.
private cdr = inject(ChangeDetectorRef);
this.cdr.detectChanges();Быстрая проверка
Проверьте, насколько хорошо Вы понимаете обнаружение изменений.
Итоги
Вы узнали, что обнаружение изменений — это проход по дереву сверху вниз, синхронизирующий состояние с DOM и запускаемый асинхронными событиями через Zone.js/NgZone; при этом привязки сравниваются с помощью Object.is. ChangeDetectorRef обеспечивает ручное управление.
Часто задаваемые вопросы
Урок «Как работает обнаружение изменений» бесплатный?
Да — полный текст урока «Как работает обнаружение изменений» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Как работает обнаружение изменений»?
Разберитесь в цикле обнаружения изменений Angular Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Как работает обнаружение изменений»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Как работает обнаружение изменений
- Обнаружение изменений OnPush
- Angular без зон
- Оптимизация списков и отображения