Angular Academy · Lektion

Rensning av effects och livscykel

Rensa resurser inuti effects.

Lektion 3 av 413 steg

Rensning av effects och livscykel är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Varför rensning är viktig

En effekt kan starta resurser: timers, prenumerationer och händelselyssnare. Varje gång effekten körs igen måste den gamla resursen först avslutas — annars läcker timers och lyssnare. Angular tillhandahåller en hook med onCleanup för detta.

Callback-funktionen onCleanup

Effektfunktionen tar emot en funktion med namnet onCleanup. Registrera en callback för nedmontering med den; Angular anropar den före nästa körning och vid förstöring.

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

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

Rensning sker före varje ny körning

När ett beroende ändras anropar Angular först den registrerade rensningen och kör sedan effektens innehåll igen. Det säkerställer att endast en resurs är aktiv åt gången.

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

Rensa händelselyssnare

DOM-lyssnare som läggs till i en effekt måste tas bort vid rensningen för att undvika dubbla hanterare och läckor.

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

Rensning med prenumerationer

Om en effekt prenumererar på en Observable avslutar du prenumerationen vid rensningen. (Ofta skulle du använda andra verktyg, men detta visar mönstret.)

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

Rensning vid förstöring

När komponenten som äger effekten förstörs kör Angular automatiskt den slutliga rensningen och förstör sedan effekten. Inga läckta timers blir kvar.

Ordning: rensning sedan innehåll

Första gången en effekt körs finns inget att rensa. Från och med den andra körningen är ordningen alltid: rensning -> innehåll.

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

Undvik tungt arbete utan rensning

Alla långlivade resurser som startas i en effekt bör ha motsvarande rensning. Ett vanligt fel är att glömma rensningen, vilket gör att intervall staplas vid varje ändring av ett beroende.

Alternativet manualCleanup

För effekter som skapas utanför en komponent (t.ex. i en root-tjänst som lever för evigt) kan du använda alternativet manualCleanup och sedan själv anropa ref.destroy() när det är lämpligt.

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

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

DestroyRef som alternativ

För nedmontering som inte gäller effekter kan du injicera DestroyRef och registrera callbacks med onDestroy. I effekter bör du föredra onCleanup för nedmontering per körning.

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

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

Sätta ihop delarna

En debouncead synkroniseringseffekt: varje värdeändring avbryter den föregående timern och schemalägger en ny sparning.

const query = signal('');

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

Snabbtest

Testa din förståelse av rensning av effekter.

Besvara frågan i den interaktiva lektionen

Sammanfattning: rensning och livscykel för effekter

Använd parametern onCleanup för att avsluta resurser som startas i en effekt.

Rensning sker före varje ny körning och vid förstöring.
Rensa alltid timers, lyssnare och prenumerationer.
manualCleanup används för långlivade effekter och DestroyRef för generell nedmontering.

Nästa steg: linkedSignal och avancerade mönster.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Rensning av effects och livscykel” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Rensning av effects och livscykel”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Rensning av effects och livscykel”?

Rensa resurser inuti effects. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Rensning av effects och livscykel”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy