> Как работает механизм Change Detection в Angular и из чего он состоит? (Angular)
Уровень: senior · Роль: frontend · Категория: Технические вопросы
Компании: LeverX
Стек: Angular
> Пример ответа
Механизм Change Detection в Angular отвечает за синхронизацию состояния приложения (модели) с пользовательским интерфейсом (шаблоном). Он состоит из двух ключевых частей: Zone.js и дерева компонентов с собственными Change Detector.
-
Zone.js - это библиотека, которая "патчит" асинхронные операции (setTimeout, addEventListener, HTTP-запросы и т.д.). Когда происходит любое асинхронное событие, Zone.js уведомляет Angular, что нужно запустить проверку изменений.
-
ChangeDetectorRef - это объект, привязанный к каждому компоненту. Он содержит ссылку на Change Detector -внутреннюю структуру, которая хранит текущие и предыдущие значения входных свойств (@Input) и выражений из шаблона.
Процесс проверки:
-
Angular обходит дерево компонентов сверху вниз.
-
Для каждого компонента сравниваются текущие значения с предыдущими (с помощью
===). -
Если значение изменилось, Angular обновляет соответствующую часть DOM.
Стратегии:
-
Default: проверяет каждый компонент при любом асинхронном событии.
-
OnPush: проверяет компонент только если изменилась ссылка на @Input, или если вручную вызван
markForCheck().
Также можно отключить Change Detection для компонента (ChangeDetectionStrategy.OnPush + detectChanges() вручную) для оптимизации производительности.
> Похожие задачи по frontend
В чем разница между Ahead-of-Time и Just-in-Time компиляциями в Angular?
Какие основные сущности существуют в Angular до версии 16, исключая сигналы?
Что такое NgZone и как он взаимодействует с Change Detection в Angular?
В чем разница между markForCheck и detectChanges в Angular Change Detection?
> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?
Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью