Что такое обнаружение изменений? В следующей статье будет рассказано о механизме обнаружения изменений в Angular, о том, как изменения статуса уведомляют об обнаружении изменений, а также о стратегии обнаружения изменений Angular. Надеюсь, она будет полезна всем.
Описание:检测机制изменений, который просматривает дерево компонентов, проверяет наличие изменений в каждом компоненте и запускает обновления DOM при изменении свойств компонента. [Рекомендуемые связанные учебные пособия: «учебник по Angular»]
Основная задача обнаружения изменений: получить внутреннее状态программы и сделать可见в пользовательском интерфейсе. Это состояние может быть любым объектом, массивом или базовым типом данных.
Источники, управляемые событиями, делятся на следующие три категории:
События: клик по странице, отправка, нажатие мыши...
XHR: получить данные с внутреннего сервера
Таймеры: setTimeout(), setInterval().
У этих точек есть одна общая черта: все они асинхронны, то есть все异步操作являются корневыми факторами, которые могут вызвать изменения данных, поэтому всякий раз, когда выполняются какие-то асинхронные операции, состояние нашего приложения может измениться. В это время вам необходимо обновить представление
В Angular подключен NgZone , который отслеживает все异步事件Angular. Angular переписывает (через Zone.js ) некоторые базовые API браузера при запуске (жестоко перехватывая все асинхронные события).
Существует два распространенных способа запуска обнаружения изменений. Один метод основан на перехватчиках жизненного цикла компонентов.
ngAfterViewChecked() {
console.log('cluster-master.comComponent cd');
}Другой метод — вручную включить или выключить обнаружение изменений и запустить его вручную.
конструктор (частный компакт-диск: ChangeDetectorRef) {
cd.detach()
setInterval(() => {
this.cd.detectChanges()
}, 5000)
} Ядром Angular является компонентизация. Вложение компонентов в конечном итоге образует组件树. Каждый компонент имеет соответствующий变化检测器ChangeDetector . Вполне возможно, что эти детекторы изменений также образуют дерево.
В Angular каждый компонент имеет свой собственный детектор изменений, который позволяет нам контролировать, как и когда выполняется обнаружение изменений для каждого компонента.
Angular также дает разработчикам возможность настраивать стратегии обнаружения изменений.
по умолчанию:每次обнаружение изменений приведет к обнаружению изменений компонента, включая изменения состояния其他组件и изменения значений внутренних атрибутов ссылочных переменных本组件
Onpush: при каждом обнаружении изменений проверка изменений этого компонента будет пропущена, если не满足一些条件.
4.1 по умолчанию
Механизм обнаружения изменений в Angular по умолчанию — ChangeDetectionStrategy.Default . После завершения каждого обратного вызова асинхронного события NgZone запускает整个组件树для обнаружения изменений至上而下
4.2 onPush
Стратегия OnPush, используемая для跳过обнаружения изменений компонента и所有子组件ниже него.
Фактически, после установки политики OnPush по-прежнему существует множество способов инициировать обнаружение изменений;
1) Изменяется引用на атрибут @Input компонента.
2) События DOM внутри компонента, включая события DOM его подкомпонентов, такие как click、submit、mouse down .
3) Observable в компоненте подписывается на событие и одновременно устанавливает Async pipe .
4) Вручную используйте методы ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() в компоненте.
markForCheck(): используется для子组件该子组件到根组件, уведомляя детектор углов一定проверки компонентов на этом пути во время следующего обнаружения изменений, даже если для стратегии обнаружения изменений установлено значение onPush
DetectChanges(): вручную инициировать обнаружение изменений из该组件到各个子组件
detach():脱离детектор компонента от нескольких детекторов и больше не управлять механизмом обнаружения, пока он не будет повторно подключен.
reattach():重新链接отсоединенный детектор с деревом детекторов.