Angular Academy · leksjon

Opprydding og livssyklus for effekter

Rydd opp i ressurser inne i effekter.

Leksjon 3 av 413 trinn

Opprydding og livssyklus for effekter er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hvorfor opprydding er viktig

En effekt kan starte ressurser som tidtakere, abonnementer og hendelseslyttere. Hver gang effekten kjører på nytt, må den gamle ressursen avsluttes først — ellers lekker tidtakere og lyttere. Angular tilbyr en onCleanup-hook for dette.

onCleanup-callbacken

Effektfunksjonen mottar en onCleanup-funksjon. Registrer en oppryddingscallback med den; Angular kaller den før neste kjøring og ved ødeleggelse.

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

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

Opprydding skjer før hver nye kjøring

Når en avhengighet endres, kaller Angular først den registrerte oppryddingen og kjører deretter effektkroppen på nytt. Dette sikrer at bare én ressurs er aktiv om gangen.

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

Rydde opp i hendelseslyttere

DOM-lyttere som legges til i en effekt, må fjernes under oppryddingen for å unngå dupliserte behandlere og lekkasjer.

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

Opprydding med abonnementer

Hvis en effekt abonnerer på en Observable, må De avslutte abonnementet under oppryddingen. (Ofte ville De brukt andre verktøy, men dette viser mønsteret.)

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

Opprydding ved ødeleggelse

Når komponenten som eier effekten, ødelegges, kjører Angular den siste oppryddingen automatisk og ødelegger deretter effekten. Ingen lekkede tidtakere blir igjen.

Rekkefølge: opprydding, deretter kropp

Første gang en effekt kjører, er det ingenting å rydde opp i. Fra og med andre kjøring er rekkefølgen alltid: cleanup -> body.

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

Unngå tungt arbeid uten opprydding

Alle langvarige ressurser som startes i en effekt, bør ha en tilsvarende opprydding. En vanlig feil er å glemme oppryddingen, slik at intervaller hoper seg opp ved hver endring i avhengighetene.

Alternativet manualCleanup

For effekter som opprettes utenfor en komponent (for eksempel i en root-tjeneste som lever for alltid), kan De bruke alternativet manualCleanup og deretter selv kalle ref.destroy() når det passer.

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

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

DestroyRef som alternativ

For opprydding som ikke gjelder effekter kan De injisere DestroyRef og registrere callbacker med onDestroy. Inne i effekter bør De foretrekke onCleanup for opprydding per kjøring.

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

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

Sette det hele sammen

En debounced synkroniseringseffekt: Hver verdiendring avbryter den forrige tidtakeren og planlegger en ny lagring.

const query = signal('');

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

Rask kontroll

Test forståelsen Deres av opprydding i effekter.

Besvar den i den interaktive leksjonen

Oppsummering: Opprydding og livssyklus for effekter

Bruk parameteren onCleanup til å avslutte ressurser som startes inne i en effekt.

Opprydding skjer før hver nye kjøring og ved ødeleggelse.
Rydd alltid opp i tidtakere, lyttere og abonnementer.
manualCleanup for langvarige effekter og DestroyRef for generell opprydding.

Deretter: linkedSignal og avanserte mønstre.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 38
Leksjoner: 144

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Opprydding og livssyklus for effekter» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Opprydding og livssyklus for effekter», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Opprydding og livssyklus for effekter»?

Rydd opp i ressurser inne i effekter. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Angular Academy?

Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Opprydding og livssyklus for effekter»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?

Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Angular Academy