No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Optimización de componentes con OnPush

19/23
Recursos

¿Cómo optimizar la detección de cambios en Angular?

En el desarrollo de aplicaciones web con Angular, la optimización de la detección de cambios es fundamental para asegurar un rendimiento eficiente. La detección de cambios en Angular tiene lugar cada vez que un evento se produce y puede llevar a recalcular o volver a renderizar componentes. Esto puede convertirse en una complejidad, especialmente cuando no está bien manejado. Exploremos cómo podemos optimizar este proceso para mejorar la eficiencia de nuestras aplicaciones Angular.

¿Qué es la detección de cambios en Angular?

La detección de cambios es un mecanismo por el cual Angular detecta modificaciones en el estado de los componentes. Cada vez que ocurre un evento o acción del usuario, Angular verifica si los datos de los componentes han cambiado y actualiza el DOM (Document Object Model) según sea necesario. Este proceso ocurre por defecto para cada modificación del modelo de datos, lo que puede llevar a un alto consumo de recursos si no está optimizado.

¿Cómo implementamos una estrategia eficiente?

Una estrategia efectiva de manejo de cambios en Angular es usar ChangeDetectionStrategy.OnPush. Este método cambia el enfoque de detección de cambios de manera predeterminada hacia un método más optimizado, ejecutándose solo cuando se envían nuevos inputs hacia los componentes.

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  // Component logic here
}

Al aplicar la estrategia OnPush, Angular solo llevará a cabo la detección de cambios cuando:

  • Los inputs del componente han sido modificados.
  • Se ha marcado explícitamente un cambio a través de markForCheck.
  • Un evento de usuario provoca un cambio.

¿Por qué usar OnPush puede mejorar el rendimiento?

El uso de ChangeDetectionStrategy.OnPush reduce la frecuencia de ejecución de la detección de cambios. Esto es especialmente útil en componentes que reciben inputs y no dependen de otros factores internos para actualizarse, permitiendo que Angular optimice el ciclo de verificación de cambios. Al aplicar esto, se consigue:

  • Menor carga sobre el CPU de los dispositivos del usuario.
  • Reducción en la cantidad de cálculos innecesarios.
  • Mejora del tiempo de respuesta en la interfaz de usuario.

Casos de uso recomendados

Debemos considerar usar OnPush en situaciones donde la arquitectura de la aplicación se preste para el uso eficiente del estado mediante props o servicios observables que gestionan el estado de la aplicación. Por ejemplo:

  • Componentes que solo leen inputs de otros componentes.
  • Aplicaciones donde los datos se gestionan principalmente a través de servicios reactivos.
  • Situaciones donde es crucial minimizar los recursos del navegador, como dispositivos móviles o ambientes con recursos limitados.

Implementar estrategias de detección de cambios más enfocadas como OnPush asegura que solo se procesen actualizaciones necesarias y esenciales, ofreciendo un estado óptimo de rendimiento para aplicaciones Angular.

Este enfoque optimizado nos invita a pensar y diseñar conscientemente nuestras arquitecturas de aplicación, y así maximizar la eficiencia beneficiosa para los usuarios y el sistema en general. ¡Continúa explorando estas técnicas para convertirte en un experto en Angular!

Aportes 4

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

La estrategia por defecto de Detección de cambios personalizada en Angular empieza en la cima con los componentes de raíz y sigue su camino hacia abajo a través del árbol de componentes, comprobando cada elemento incluso si éste no ha cambiado. Compara el valor actual de la propiedad utilizada en la expresión del template con el valor anterior de esa propiedad

Primer aproximamiento a Change Detection.

@Component({
    ...
    changeDetection:ChangeDetectionStrategy.OnPush
    // changeDetection:ChangeDetectionStrategy.Default
})

esto sirve pero escucha a todos los eventos del componente, no es lo que buscamos en este caso.

Siento que no es un problema comun, nunca me ha pasado eso de afectar un modulo b al actualizar el modulo a

ERROR in src/app/website/contact/components/list/list.component.ts:17:20 - error NG1010: changeDetection must be a member of ChangeDetectionStrategy enum from @angular/core

17   changeDetection: ChangeDetectionStrategy.OnPush
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/website/contact/contact.module.ts:12:9 - error NG6001: The class 'ListComponent' is listed in the declarations of the NgModule 'ContactModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

12         ListComponent
           ~~~~~~~~~~~~~```

Para los que tengan este error solo corrijan el import de changeDetectionStrategy debe ser de angularCore