Angular Academy · Lezione

Pulizia degli effect e ciclo di vita

Libera le risorse all'interno degli effect.

Pulizia degli effect e ciclo di vita è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Perché la pulizia è importante

Un effect può avviare risorse come timer, subscription e listener di eventi. Ogni volta che l'effect viene rieseguito, la risorsa precedente deve essere prima terminata; altrimenti si verificano perdite di timer e listener. Angular fornisce l'hook onCleanup per questo scopo.

Il callback onCleanup

La funzione dell'effect riceve una funzione onCleanup. Vi registri un callback di teardown: Angular lo chiama prima dell'esecuzione successiva e durante la distruzione.

import { effect } from '@angular/core';

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), 1000);
  onCleanup(() => clearInterval(id));
});

La pulizia viene eseguita prima di ogni riesecuzione

Quando cambia una dipendenza, Angular chiama prima la funzione di pulizia registrata, quindi esegue nuovamente il corpo dell'effect. In questo modo è garantita una sola risorsa attiva alla volta.

const delay = signal(1000);

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), delay());
  onCleanup(() => clearInterval(id)); // clears old interval first
});

delay.set(500); // old interval cleared, new one started

Pulire i listener di eventi

I listener DOM aggiunti in un effect devono essere rimossi durante la pulizia per evitare handler duplicati e perdite di memoria.

effect((onCleanup) => {
  const handler = () => console.log(window.innerWidth);
  window.addEventListener('resize', handler);
  onCleanup(() => window.removeEventListener('resize', handler));
});

Pulizia delle subscription

Se un effect sottoscrive un Observable, annulli la subscription durante la pulizia. (Spesso si userebbero altri strumenti, ma questo esempio mostra il modello.)

effect((onCleanup) => {
  const sub = interval$.subscribe(v => console.log(v));
  onCleanup(() => sub.unsubscribe());
});

Pulizia durante la distruzione

Quando il componente proprietario dell'effect viene distrutto, Angular esegue automaticamente la pulizia finale, quindi distrugge l'effect. Non rimangono timer attivi.

Ordine: pulizia, poi corpo

La prima volta che un effect viene eseguito non c'è nulla da pulire. Dalla seconda esecuzione in poi, la sequenza è sempre: cleanup -> body.

let runs = 0;
effect((onCleanup) => {
  runs++;
  console.log('run', runs, dep());
  onCleanup(() => console.log('cleanup before run', runs + 1));
});

Evitare lavoro pesante senza pulizia

Qualsiasi risorsa di lunga durata avviata in un effect dovrebbe avere una pulizia corrispondente. Un errore comune consiste nel dimenticare la pulizia, facendo accumulare gli intervalli a ogni cambiamento di una dipendenza.

Opzione manualCleanup

Per gli effect creati al di fuori di un componente, ad esempio in un servizio root che vive per sempre, può usare l'opzione manualCleanup, quindi chiamare personalmente ref.destroy() quando opportuno.

const ref = effect(() => {
  console.log(value());
}, { manualCleanup: true });

// You are now responsible for:
// ref.destroy();

DestroyRef come alternativa

Per un teardown non legato agli effect può effettuare l'injection di DestroyRef e registrare callback con onDestroy. All'interno degli effect, preferisca onCleanup per il teardown a ogni esecuzione.

import { inject, DestroyRef } from '@angular/core';

const destroyRef = inject(DestroyRef);
destroyRef.onDestroy(() => console.log('component destroyed'));

Mettere insieme i concetti

Un effect di sincronizzazione con debounce: ogni cambiamento di valore annulla il timer precedente e pianifica un nuovo salvataggio.

const query = signal('');

effect((onCleanup) => {
  const q = query();
  const id = setTimeout(() => save(q), 300);
  onCleanup(() => clearTimeout(id));
});

Verifica rapida

Verifichi la propria comprensione della pulizia degli effect.

Riepilogo: pulizia e ciclo di vita degli effect

Usi il parametro onCleanup per terminare le risorse avviate all'interno di un effect.

La pulizia viene eseguita prima di ogni riesecuzione e durante la distruzione.
Ripulisca sempre timer, listener e subscription.
manualCleanup per effect di lunga durata; DestroyRef per il teardown generale.

Prossimo argomento: linkedSignal e pattern avanzati.

Domande Frequenti

La lezione «Pulizia degli effect e ciclo di vita» è gratuita?

Sì — il testo completo di «Pulizia degli effect e ciclo di vita» è 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 «Pulizia degli effect e ciclo di vita»?

Libera le risorse all'interno degli effect. 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 3 di 4.

Quanto tempo richiede la lezione «Pulizia degli effect e ciclo di vita»?

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

← Torna a Angular Academy