Détection des changements avec OnPush
Réduisez les vérifications avec la stratégie OnPush
Détection des changements avec OnPush est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Le problème de performances
La stratégie par défaut vérifie chaque composant à chaque cycle. Dans les grandes applications, cela finit par peser. OnPush indique à Angular d'ignorer un composant tant que rien de pertinent n'a changé.
Activer OnPush
Définissez l'option changeDetection sur le composant.
@Component({
selector: 'app-user',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '{{ user().name }}'
})
export class UserComponent {}Quand OnPush effectue une nouvelle vérification
Un composant OnPush n'est vérifié que lorsque : la référence d'un @Input change, un événement est déclenché depuis son modèle, un observable lié avec async émet, ou que vous appelez markForCheck().
Égalité des références d'entrée
OnPush compare les références des entrées avec Object.is. Modifier un objet sur place ne déclenche pas de nouvelle vérification ; vous devez transmettre une nouvelle référence.
// Mutation: ignored by OnPush
this.user.name = 'New';
// New reference: detected
this.user = { ...this.user, name: 'New' };L'immutabilité aide
OnPush s'associe naturellement aux données immuables. Créez toujours de nouveaux objets ou tableaux au lieu de les modifier, afin que les vérifications de références détectent les changements de manière fiable.
this.items = [...this.items, newItem];Les événements fonctionnent toujours
Les événements provenant du modèle propre au composant (clics, saisies) le marquent automatiquement pour vérification. L'interactivité locale fonctionne donc sans code supplémentaire.
<button (click)="count.set(count() + 1)">+</button>Le pipe asynchrone
Le pipe async appelle markForCheck() lorsque son observable émet, ce qui permet à OnPush de fonctionner naturellement avec les flux.
<p>{{ data$ | async }}</p>markForCheck
Lorsque vous mettez à jour l'état en dehors des déclencheurs habituels, appelez markForCheck() pour planifier la vérification du composant et de ses ancêtres au prochain cycle.
private cdr = inject(ChangeDetectorRef);
this.cdr.markForCheck();Les signaux et OnPush
Les signaux s'intègrent à OnPush : lire un signal dans le modèle enregistre une dépendance, et sa mise à jour marque automatiquement le composant pour vérification, sans appels manuels.
count = signal(0);
increment() { this.count.update(c => c + 1); }Propagation d'OnPush
Lorsqu'il est marqué, le composant et tous ses ancêtres jusqu'à la racine sont signalés afin que ce chemin soit vérifié. Les enfants sont ensuite vérifiés normalement.
Bonne pratique
Utilisez OnPush par défaut pour les nouveaux composants. Associé aux signaux ou aux entrées immuables, il réduit considérablement le travail inutile.
Vérification rapide
Testez votre compréhension d'OnPush.
Récapitulatif
Vous avez appris que ChangeDetectionStrategy.OnPush ignore les vérifications sauf si une référence d'entrée change, si un événement du modèle est déclenché, si un pipe asynchrone émet ou si vous appelez markForCheck(). Cette stratégie s'associe particulièrement bien aux données immuables et aux signaux.
Questions Fréquemment Posées
La leçon « Détection des changements avec OnPush » est-elle gratuite ?
Oui — le texte complet de « Détection des changements avec OnPush » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Détection des changements avec OnPush » ?
Réduisez les vérifications avec la stratégie OnPush Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Détection des changements avec OnPush » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Fonctionnement de la détection des changements
- Détection des changements avec OnPush
- Angular sans zone
- Optimiser les listes et le rendu