¿Qué es la detección de cambios? El siguiente artículo hablará sobre el mecanismo de detección de cambios en Angular, presentará cómo los cambios de estado notifican la detección de cambios y la estrategia de detección de cambios de Angular. Espero que sea útil para todos.
Resumen: un检测机制de cambios que atraviesa el árbol de componentes, busca cambios en cada componente y activa actualizaciones DOM cuando cambian las propiedades del componente. [Tutoriales relacionados recomendados: "tutorial angular"]
La tarea básica de la detección de cambios: obtener el状态interno del programa y hacerlo可见en la interfaz de usuario. Este estado puede ser cualquier objeto, matriz o tipo de datos básicos.
Las fuentes basadas en eventos se clasifican en las tres categorías siguientes:
Eventos: hacer clic en la página, enviar, presionar el mouse...
XHR: obtener datos del servidor backend
Temporizadores: setTimeout(), setInterval()
Estos puntos tienen una cosa en común, es decir, todos son asincrónicos, es decir, todas异步操作son el factor raíz que puede provocar cambios en los datos, por lo que siempre que se realicen algunas operaciones asincrónicas, el estado de nuestra aplicación puede cambiar. En este momento, necesitas actualizar la vista.
En Angular NgZone está conectado, que monitorea todos异步事件de Angular. Angular reescribirá (a través de Zone.js ) algunas de las API del navegador subyacente al inicio (interceptando violentamente todos los eventos asincrónicos).
Hay dos formas comunes de activar la detección de cambios. Un método se basa en enlaces del ciclo de vida de los componentes.
ngAfterViewChecked() {
console.log('cluster-master.component cd');
}Otro método es controlar manualmente la activación o desactivación de la detección de cambios y activarla manualmente
constructor(cd privado: ChangeDetectorRef) {
cd.separar()
establecerIntervalo(() => {
this.cd.detectChanges()
}, 5000)
} El núcleo de Angular es la componenteización. El anidamiento de componentes eventualmente formará un组件树. La detección de cambios de Angular se puede dividir en componentes. Cada componente tiene un变化检测器ChangeDetector correspondiente. Es posible que estos detectores de cambios también formen un árbol.
En Angular cada componente tiene su propio detector de cambios, lo que nos permite controlar cómo y cuándo se realiza la detección de cambios para cada componente.
Angular también brinda a los desarrolladores la posibilidad de personalizar las estrategias de detección de cambios.
predeterminado:每次detección de cambios provocará la detección de cambios en el componente, incluidos cambios de estado de其他组件y cambios en los valores de atributos internos de las variables de referencia本组件
Onpush: cada detección de cambio omitirá la verificación de cambios de este componente a menos que满足一些条件.
4.1 predeterminado
El mecanismo de detección de cambios predeterminado de Angular es ChangeDetectionStrategy.Default . Después de que finaliza cada devolución de llamada de evento asincrónico, NgZone activará整个组件树para realizar la detección de cambios至上而下
4.2 onPush
Estrategia OnPush, utilizada para跳过la detección de cambios de un componente y所有子组件debajo de él.
De hecho, después de configurar la política OnPush , todavía hay muchas formas de activar la detección de cambios;
1)引用del atributo @Input del componente cambia.
2) Eventos DOM dentro del componente, incluidos eventos DOM de sus subcomponentes, como click、submit、mouse down .
3) Observable en el componente se suscribe al evento y configura Async pipe al mismo tiempo.
4) Utilice manualmente ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() en el componente.
markForCheck(): se utiliza para que子组件该子组件到根组件, notificando al detector angular一定verifique los componentes en esta ruta durante la siguiente detección de cambios, incluso si la estrategia de detección de cambios está configurada en onPush
detectChanges(): inicia manualmente la detección de cambios desde该组件到各个子组件
detach():脱离el detector del componente de la cantidad de detectores y ya no será controlado por el mecanismo de detección a menos que se vuelva a conectar.
reattach():重新链接el detector desconectado al árbol de detectores