Pipe pure e impure
Comprenda il comportamento delle pipe nel rilevamento delle modifiche.
Pipe pure e impure è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 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.
Pipe pure per impostazione predefinita
Ogni pipe è pura per impostazione predefinita. Una pipe pura viene eseguita di nuovo solo quando il valore di input o gli argomenti cambiano per riferimento.
Perché le pipe pure sono veloci
Angular evita di chiamare una pipe pura durante il rilevamento delle modifiche se il riferimento dell'input non è cambiato. Questo rende efficienti le pipe pure.
@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
transform(value: string) { return value + "!"; }
}
// pure: only re-runs when value changesCambiamenti del riferimento e del valore
Le pipe pure rilevano i cambiamenti del riferimento. Modificare un array direttamente NON attiva una pipe pura, perché il riferimento dell'array rimane lo stesso.
// this will NOT re-run a pure pipe:
this.items.push("new");
// this WILL, new reference:
this.items = [...this.items, "new"];Dichiarare una pipe impura
Imposti pure: false nel decoratore @Pipe per rendere impura una pipe. Una pipe impura viene eseguita a ogni ciclo di rilevamento delle modifiche.
@Pipe({ name: "filter", standalone: true, pure: false })
export class FilterPipe implements PipeTransform {
transform(items: string[], term: string) {
return items.filter(i => i.includes(term));
}
}Quando usare le pipe impure
Usi le pipe impure quando la trasformazione dipende da dati mutabili, ad esempio per filtrare un array modificato direttamente, oppure da valori che cambiano senza un nuovo riferimento.
Il costo delle pipe impure
Le pipe impure vengono eseguite molto spesso, a ogni ciclo di rilevamento delle modifiche. Una logica complessa al loro interno può compromettere le prestazioni, quindi le mantenga leggere.
La pipe async è impura
La pipe integrata async è impura. Si sottoscrive a un Observable o a una Promise e aggiorna la vista quando arrivano nuovi valori.
<p>{{ data$ | async }}</p>
// component
data$ = this.http.get("/api/data");La pipe async annulla automaticamente la sottoscrizione
Un grande vantaggio della pipe async è l'annullamento automatico della sottoscrizione quando il componente viene distrutto, evitando perdite di memoria.
@Component({
template: "<p>{{ count$ | async }}</p>"
})
export class DemoComponent {
count$ = interval(1000);
}Evitare la mutazione con le pipe pure
Per mantenere efficienti le pipe pure con le raccolte di dati, tratti i dati come immutabili: crei nuovi array e oggetti invece di modificare quelli esistenti.
// good for pure pipes:
this.users = this.users.concat(newUser);
this.user = { ...this.user, name: "Ada" };Scegliere tra pure e impure
Preferisca le pipe pure per ottenere un comportamento prevedibile e veloce. Ricorra alle pipe impure solo quando deve davvero reagire alle mutazioni. Spesso una riprogettazione con dati immutabili consente di evitare del tutto le pipe impure.
Buone pratiche per le pipe impure
Se deve usare una pipe impura, memorizzi nella cache i risultati per non ricalcolarli quando gli input non sono cambiati.
@Pipe({ name: "memoFilter", standalone: true, pure: false })
export class MemoFilterPipe implements PipeTransform {
private last = "";
private cache: string[] = [];
transform(items: string[], term: string) {
if (term === this.last) return this.cache;
this.last = term;
this.cache = items.filter(i => i.includes(term));
return this.cache;
}
}Verifica rapida
Verifichi la Sua comprensione delle pipe pure e impure.
Riepilogo
Le pipe pure vengono eseguite solo quando cambiano i riferimenti e sono veloci; le pipe impure (pure: false) vengono eseguite a ogni ciclo e sono adatte ai dati mutabili. La pipe async è impura e annulla automaticamente la sottoscrizione.
Preferisca dati immutabili, così le pipe pure rimangono efficienti.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 38
- Lezioni
- 144
Domande Frequenti
La lezione «Pipe pure e impure» è gratuita?
Sì — il testo completo di «Pipe pure e impure» è 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 «Pipe pure e impure»?
Comprenda il comportamento delle pipe nel rilevamento delle modifiche. 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 4 di 4.
Quanto tempo richiede la lezione «Pipe pure e impure»?
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
- Utilizzo delle pipe integrate
- Concatenamento e parametrizzazione delle pipe
- Creazione di pipe personalizzate
- Pipe pure e impure