Estrategia de detección de cambios angulares: OnPush y estrategias predeterminadas

La detección de cambios se conoce como el mecanismo que compara el estado actual con el del nuevo estado. Cualquier diferencia entre los dos estados sugiere que hay cambios que deben actualizarse. Significa que la vista debe actualizarse con el cambio en los datos.

Cualquier cambio que ocurra en los componentes durante un cambio en la aplicación se detecta a través de Angular 2+. Cada vez que se cambia un modelo, angular detecta los cambios asociados y las vistas se actualizan inmediatamente. Este cambio se conoce como detección de cambio en angular.

El cambio puede ser el resultado de datos recibidos de solicitudes de red u ocurrir a través de un evento de usuario. Con el aumento del tamaño de la aplicación, se debe realizar más trabajo mediante el método de detección de cambios. La detección angular es necesaria para mantener la sincronización entre las vistas subyacentes y los modelos correspondientes.

El cambio en el modelo angular puede deberse a cualquiera de los siguientes:

• Eventos DOM (clic, pasar el cursor por encima, etc.)
• Solicitudes AJAX
• Temporizadores (setTimer(), setInterval())

requisitos previos

Para obtener este artículo, es posible que deba estar familiarizado con los conceptos de componentes angulares. Además, los conceptos de tipos de valor y tipos de referencia pueden resultar útiles para comprender el artículo.

Detección de cambios en Angular

La detección de cambios en angular se realiza en dos pasos, siendo el primero la actualización del modelo de la aplicación a través del desarrollador. Puede estar precedido por la emisión de un evento o por el cambio en la propiedad de un componente. El segundo paso es el trabajo del angular de reflejar el modelo. Detecta si se insertan nuevos datos en el componente de forma explícita. Esto se puede hacer a través de un componente o un Observable suscrito usando la tubería asíncrona.

Por lo tanto, los dos pasos son:

• Actualizar el modelo de aplicación (desarrollador);
• Refleja el estado del modelo en la vista (Angular).

La detección de cambios en angular detecta cambios de eventos comunes del navegador, como clics del mouse, solicitudes HTTP y otros tipos de eventos. Una vez que se detecta el cambio, se decide si se requiere o no la actualización de la vista.

Estrategias de detección de cambios

Están presentes dos estrategias de detección de cambios angulares, que son la predeterminada y onPush.

La estrategia por defecto

• Los cambios en un modelo son monitoreados por angular para asegurarse de que se capturen todos los cambios en el modelo. Las diferencias entre el estado nuevo y el anterior son verificadas por angular.
• Para que una vista se actualice, el angular debe tener acceso al nuevo valor que luego se compara con el valor anterior. En base a esto, se toma la decisión de actualizar la vista o no.
• Por lo tanto, en una estrategia predeterminada, el angular gira en torno a la cuestión de si hay cambios en el valor.
• No se supone de dónde dependen los componentes. Es una estrategia conservadora que verificará cada vez que haya un cambio asociado. Se realizarán comprobaciones sobre cualquier evento del navegador, horas, promesas y XHR.
• La estrategia puede ser problemática cuando se van a considerar grandes aplicaciones con muchos componentes.
• De forma predeterminada, utiliza la estrategia ChangeDetectionStrategy.Default .

Anular los mecanismos predeterminados del navegador

• Varias API de bajo nivel serán parcheadas por angular en el momento del inicio. Estas API pueden ser addEventListener; una función de navegador que se utiliza para registrar eventos de navegación.
• El addEventListener será reemplazado por angular con una versión más nueva que funciona como la versión anterior.
• La nueva versión addEventListener agrega más funciones al controlador de eventos . La interfaz de usuario se actualiza después de ejecutar la verificación de rendimiento por angular.

Trabajando

Una biblioteca que se envía con Zone.js realiza la aplicación de parches de bajo nivel de la API del navegador.

• La zona se define como el contenido de ejecución en varios turnos de ejecución de JVM. Se puede agregar funcionalidad adicional a un navegador a través de este mecanismo. Las zonas son utilizadas internamente por angular para detectar cualquier cambio y activar la detección.
• Normalmente hay tres fases en una zona, es decir, es estable al principio, se vuelve inestable si se ejecuta alguna tarea en la zona y se vuelve estable una vez que se completa la tarea.
• Los mecanismos del navegador que están parcheados para soportar la detección en cambio son:

1. eventos del navegador como clic, etc.
2. setInterval() y setTimeout()
3. Solicitudes de Ajax HTTP

• Para activar la detección de cambios en angular, Zone.js se usa para parchear varias API de otro navegador como Websockets.
• Una limitación de este método es: si Zone.js no es compatible con la API del navegador, no se activará durante la detección de cambios.

¿Cómo funciona la detección de cambios angulares cuando se activa la detección de cambios?

Los cambios activados se detectan a través de un detector de cambios. Este detector de cambios se crea durante el tiempo de inicio de la aplicación. Se puede considerar un ejemplo del componente TodoItem . Se emitirá un evento al recibir un objeto Todo por parte del componente si se cambia el estado del todo. Obtenga más información sobre cómo ejecutar proyectos angulares.

Funcionamiento del mecanismo de detección de cambios por defecto

El mecanismo de detección de cambios es simple. En cada expresión, el valor actual de la propiedad se compara con el valor de esa propiedad en el estado anterior de la expresión.

• Tener una diferencia en el valor de la propiedad establecerá el valor en verdadero de isChanged .

2. Estrategia OnPush

• Al usar la estrategia onPush , el angular no necesita adivinar cuándo se debe realizar la verificación.
• Según el cambio en la referencia de entrada, o los eventos activados por los propios componentes, el angular realizará la verificación de cambios.
• Además, se le puede pedir explícitamente al angular que realice la verificación de cambios. Esto se hace a través del método de componentRef.markForCheck().
• Los componentes durante esta estrategia dependerán únicamente de sus insumos. La estrategia de detección de cambios se realizará solo cuando:

• Hay un cambio en la referencia de entrada.
• Hay cambios asociados en los componentes del modelo o alguno de sus hijos.
• Cuando se debe realizar una detección de cambios explícitos.
• Cuando se usa una canalización asíncrona en la vista.

• En comparación con la estrategia predeterminada, la estrategia onpush gira principalmente en torno a dos preguntas que son:

• ¿Hay algún cambio en el tipo de referencia?
• Si hay cambios en la referencia del tipo de referencia, ¿hay cambios en los valores de la memoria del montón?

• Evita verificaciones innecesarias sobre los componentes y también sobre los componentes secundarios.

Implementación de la estrategia onPush para un componente

Solo cuando se pasa una nueva referencia como valor @Input() , activa la detección de cambios. Los valores pueden ser tipos primitivos como números, booleanos, cadenas y nulos. También se pueden utilizar matrices y objetos. Los objetos o matrices modificados no se pueden usar para activar la detección de cambios en un componente onPush, ya que no se crea una nueva referencia para ellos. Por lo tanto, se debe pasar un objeto nuevo o una referencia de matriz para activar el detector que detecta el cambio.

Para evitar errores en el método de los métodos de detección de cambios, la aplicación se puede construir utilizando la detección de cambios onPush en todas partes mediante el uso de listas y objetos inmutables. La modificación de objetos inmutables se puede realizar mediante la creación de una nueva referencia de objeto y, por lo tanto:

• Para cada cambio, se activa la detección de cambios onPush .
• Siempre se crea una nueva referencia de objeto que evita la causa de errores.

En tales casos, se puede usar Immutable.js, ya que contiene estructuras de datos inmutables para objetos (mapa) y listas (lista).

• Agregar el parámetro changeDetection en la anotación del componente implementará la estrategia onPush. En lugar de pasar nuevas referencias cada vez, ChangeDetectorRef también se puede usar para un control completo.

ChangeDetectorRef.detectChanges()

• El método de detección de cambios se puede conectar o desconectar manualmente con métodos de desconectar y volver a conectar en changeDetectorRef.

ChangeDetectorRef.detach() y Inmutable.js

Cuando se utiliza la estrategia onPush para la detección de cambios , siempre es una buena idea aplicar la inmutabilidad. En tales casos, se utiliza Immutable.js.

Immutable.js es una biblioteca creada para incorporar la inmutabilidad en JavaScript junto con estructuras de datos inmutables como List, Stack y Map.

Para agregar Immutable.js en los proyectos, se debe usar el siguiente comando en la terminal. Más información sobre proyectos angulares.

$ npm instalar inmutable –guardar

Para importar las estructuras de datos de Immutable.js, se debe usar el siguiente comando. El comando muestra la importación solo de las estructuras de datos Lista y Mapa en este caso.

importar {Mapa, Lista} de 'inmutable' También se puede utilizar una matriz.

Además, si se usa Immutable.js, se asocian algunos inconvenientes.

• Usar la API es un poco engorroso.
• Las interfaces no se pueden implementar en el modelo de datos ya que la biblioteca Imutable.js no admite ninguna interfaz.

Aprenda cursos de software en línea de las mejores universidades del mundo. Obtenga programas Executive PG, programas de certificados avanzados o programas de maestría para acelerar su carrera.

Resumen

El artículo le presentó el mecanismo de detección de cambios y las estrategias. Angular realizará la detección de cambios en todos los componentes de forma predeterminada. Además, ChangeDetectorRef se puede aplicar para detectar cambios en las nuevas referencias cuando los datos se modifican. La demanda de desarrollo angular sigue aumentando, lo que da como resultado un salario de desarrollador angular en la India.

Si desea obtener más información sobre la tecnología de software, su desarrollo y el mecanismo detrás de ella, puede consultar el curso Executive PG Program in Software Development - Specialization in Full Stack Development ofrecido por upGrad. El curso de especialización es un programa en línea de 23 semanas que ofrece más de 300 estudios de casos para aumentar su conocimiento y las herramientas disponibles y el lenguaje de programación para mejorar sus habilidades prácticas. Si tienes más consultas relacionadas con el curso, déjanos un mensaje. Nuestro equipo se pondrá en contacto contigo.