Tras una jornada navideño-vacacional, la apertura de la tienda de pegatinas y el inicio del taller de Angular de la UA… ¡Volvemos a la carga! Hoy he realizado un par de pruebas sencillas para comprender las dos estrategias de detección de cambios ofrecidas por Angular.

Estrategia por defecto

En la estrategia por defecto no es necesario especificar nada en nuestros componentes. Siempre que se produzca algún evento se desatará la detección de cambios en el componente actual, y se propagará hacia sus hijos.

Podemos observar este comportamiento en este plunker. El componente padre pasa un objeto de datos hacia su hijo. Cuando hacemos click en el botón, modificamos un atributo del dato que inmediatamente se propaga hacia el componente hijo.

Estrategia onPush

Por otro lado, la estrategia onPush comprueba que el objeto que se pasa haya cambiado. Mientras el objeto sea el mismo, el componente no se dará cuenta de posibles cambios en sus atributos.

Este plunker es un fork del anterior, donde se ha cambiado únicamente la estrategia del componente hijo. Observamos que, pese a que el dato ha cambiado, el componente hijo no se ha enterado de estos cambios.

Esta estrategia debe ir de la mano del uso de objetos inmutables. Si cada vez que cambiamos un atributo del dato creamos un nuevo objeto, el componente hijo vuelve a ser consciente de los cambios.

En este plunker hago uso de Object.assign para que el componente padre cree un nuevo objeto de datos al hacer click en el botón. Precisamente por esto, el componente hijo será consciente del cambio realizado en Input.

La ventaja del uso de inmutables facilita que no se dispare la detección de cambios en todo un sub-árbol de componentes de Angular. Dado que impacta directamente en el repintado de nuestras pantallas, puede suponer importantes mejoras en el rendimiento de nuestra aplicación.

Anuncios