Rilevamento delle modifiche OnPush
Ridurre i controlli con la strategia OnPush
Rilevamento delle modifiche OnPush è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
Il problema delle prestazioni
La strategia predefinita controlla ogni componente a ogni tick. Nelle app di grandi dimensioni, questo lavoro si accumula. OnPush indica ad Angular di saltare un componente finché non cambia qualcosa di rilevante.
Abilitare OnPush
Impostate l'opzione changeDetection sul componente.
@Component({
selector: 'app-user',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '{{ user().name }}'
})
export class UserComponent {}Quando OnPush esegue un nuovo controllo
Un componente OnPush viene controllato solo quando: cambia un riferimento @Input, si verifica un evento dal suo template, emette un observable associato con async oppure viene chiamato markForCheck().
Uguaglianza dei riferimenti degli input
OnPush confronta i riferimenti degli input con Object.is. Modificare un oggetto direttamente non attiva un nuovo controllo; dovete passare un nuovo riferimento.
// Mutation: ignored by OnPush
this.user.name = 'New';
// New reference: detected
this.user = { ...this.user, name: 'New' };L'immutabilità è utile
OnPush si abbina naturalmente ai dati immutabili. Create sempre nuovi oggetti o array invece di modificarli, così i controlli dei riferimenti rilevano le modifiche in modo affidabile.
this.items = [...this.items, newItem];Gli eventi continuano a funzionare
Gli eventi provenienti dal template del componente (click, input) lo contrassegnano automaticamente per il controllo, quindi l'interattività locale funziona senza codice aggiuntivo.
<button (click)="count.set(count() + 1)">+</button>La pipe async
La pipe async chiama markForCheck() quando il suo observable emette un valore, permettendo a OnPush di funzionare perfettamente con gli stream.
<p>{{ data$ | async }}</p>markForCheck
Quando aggiornate lo stato al di fuori dei normali trigger, chiamate markForCheck() per pianificare il controllo del componente (e dei suoi antenati) al tick successivo.
private cdr = inject(ChangeDetectorRef);
this.cdr.markForCheck();Signals e OnPush
I signals si integrano con OnPush: la lettura di un signal nel template registra una dipendenza e il suo aggiornamento contrassegna automaticamente il componente per il controllo, senza bisogno di chiamate manuali.
count = signal(0);
increment() { this.count.update(c => c + 1); }Propagazione di OnPush
Quando viene contrassegnato, il componente e tutti i suoi antenati fino alla radice vengono contrassegnati a loro volta, così il percorso viene controllato. I componenti figli al di sotto vengono controllati normalmente.
Buona pratica
Rendete OnPush il valore predefinito per i nuovi componenti. In combinazione con i signals o con input immutabili, riduce drasticamente il lavoro non necessario.
Verifica rapida
Verificate la vostra comprensione di OnPush.
Riepilogo
Avete imparato che ChangeDetectionStrategy.OnPush salta i controlli finché non cambia un riferimento di input, si verifica un evento del template, emette una pipe async oppure viene chiamato markForCheck(). Si abbina al meglio ai dati immutabili e ai signals.
Domande Frequenti
La lezione «Rilevamento delle modifiche OnPush» è gratuita?
Sì — il testo completo di «Rilevamento delle modifiche OnPush» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «Rilevamento delle modifiche OnPush»?
Ridurre i controlli con la strategia OnPush Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Rilevamento delle modifiche OnPush»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Angular Academy?
Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Come funziona il rilevamento delle modifiche
- Rilevamento delle modifiche OnPush
- Angular senza zone
- Ottimizzare liste e rendering