Detección de cambios con OnPush
Reducir las comprobaciones con la estrategia OnPush
Detección de cambios con OnPush es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
El problema de rendimiento
La estrategia predeterminada comprueba cada componente en cada ciclo. En aplicaciones grandes, esto se acumula. OnPush indica a Angular que omita un componente a menos que algo relevante haya cambiado.
Habilitar OnPush
Establezca la opción changeDetection en el componente.
@Component({
selector: 'app-user',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '{{ user().name }}'
})
export class UserComponent {}Cuándo vuelve a comprobarse OnPush
Un componente OnPush solo se comprueba cuando: cambia una referencia de @Input, se dispara un evento desde su plantilla, emite un observable enlazado con async o se llama a markForCheck().
Igualdad de referencias de entrada
OnPush compara las referencias de entrada con Object.is. Mutar un objeto directamente no activa una nueva comprobación; debe pasar una referencia nueva.
// Mutation: ignored by OnPush
this.user.name = 'New';
// New reference: detected
this.user = { ...this.user, name: 'New' };La inmutabilidad ayuda
OnPush combina de forma natural con los datos inmutables. Cree siempre objetos o arrays nuevos en lugar de mutarlos, para que las comprobaciones de referencias detecten los cambios de forma fiable.
this.items = [...this.items, newItem];Los eventos siguen funcionando
Los eventos de la propia plantilla del componente (clics, entradas) lo marcan automáticamente para comprobarlo, por lo que la interactividad local funciona sin código adicional.
<button (click)="count.set(count() + 1)">+</button>El pipe async
El pipe async llama a markForCheck() cuando emite su observable, lo que permite que OnPush funcione sin problemas con los streams.
<p>{{ data$ | async }}</p>markForCheck
Cuando actualice el estado fuera de los activadores normales, llame a markForCheck() para programar el componente (y sus ancestros) para el siguiente ciclo.
private cdr = inject(ChangeDetectorRef);
this.cdr.markForCheck();Signals y OnPush
Signals se integra con OnPush: leer un signal en la plantilla registra una dependencia y actualizarlo marca automáticamente el componente para comprobarlo, sin necesidad de llamadas manuales.
count = signal(0);
increment() { this.count.update(c => c + 1); }Propagación de OnPush
Cuando se marca, el componente y todos sus ancestros hasta la raíz quedan señalados para que se compruebe esa ruta. Los elementos secundarios se comprueban normalmente por debajo de él.
Práctica recomendada
Establezca OnPush como valor predeterminado para los componentes nuevos. Combinado con signals o entradas inmutables, reduce drásticamente el trabajo innecesario.
Comprobación rápida
Compruebe cuánto entiende OnPush.
Resumen
Ha aprendido que ChangeDetectionStrategy.OnPush omite las comprobaciones a menos que cambie una referencia de entrada, se dispare un evento de plantilla, emita un pipe async o se llame a markForCheck(). Combina mejor con datos inmutables y signals.
Preguntas frecuentes
¿La lección «Detección de cambios con OnPush» es gratis?
Sí — el texto completo de «Detección de cambios con OnPush» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Detección de cambios con OnPush»?
Reducir las comprobaciones con la estrategia OnPush Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Detección de cambios con OnPush»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Cómo funciona la detección de cambios
- Detección de cambios con OnPush
- Angular sin zonas
- Optimización de listas y renderizado