61. Stratégie de détection de changement : Default vs OnPush
La détection de changement (Change Detection - CD) est le processus par lequel Angular vérifie l'état de l'application pour voir si des données ont changé et, si c'est le cas, met à jour la vue (DOM). Ce contrôle a lieu très fréquemment.
1. Stratégie par défaut (ChangeDetectionStrategy.Default)
Avec la stratégie par défaut, Angular est pessimiste. Il suppose que n'importe quelle propriété utilisée dans le template a pu changer. Un cycle de CD est déclenché par :
- Tout événement DOM (clic, touche pressée).
- Les réponses HTTP.
- Les timers (
setTimeout,setInterval). - Les Promises résolues.
Lorsqu'un changement survient, Angular vérifie tous les composants, de la racine aux feuilles. Bien que rapide, cela peut devenir un goulot d'étranglement dans les très grandes applications.
2. Stratégie OnPush (ChangeDetectionStrategy.OnPush)
OnPush est l'approche optimiste. Un composant marqué OnPush ne lancera la détection de changement (vérification de son template et de ses enfants) que si l'un des cas suivants se produit :
- Changement de référence d'un Input : Une propriété
@Input()change de référence (l'adresse mémoire de l'objet ou du tableau est différente). Les modifications internes à un objet (mutation) sont ignorées. - Événement déclenché : Un gestionnaire d'événement attaché au composant ou à ses enfants est exécuté.
- Émission d'un Observable (avec
AsyncPipe) : Un Observable lié via l'AsyncPipeémet une nouvelle valeur. - Déclenchement manuel : La détection est forcée via
ChangeDetectorRef.
Appliquer OnPush
typescript import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({ selector: 'app-optimized-list', templateUrl: './optimized-list.component.html', changeDetection: ChangeDetectionStrategy.OnPush // <-- Utiliser ceci }) export class OptimizedListComponent { /* ... */ }
OnPush améliore considérablement les performances en ignorant de larges pans de l'arbre des composants, sauf notification explicite.