Angular Academy · Lekcja

Czyszczenie efektów i cykl życia

Zwalniaj zasoby wewnątrz efektów.

Czyszczenie efektów i cykl życia to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Dlaczego czyszczenie jest ważne

Efekt może uruchamiać zasoby: liczniki czasu, subskrypcje i nasłuchiwacze zdarzeń. Za każdym ponownym uruchomieniem efektu stary zasób trzeba najpierw usunąć — w przeciwnym razie wyciekną liczniki i nasłuchiwacze. Angular udostępnia do tego mechanizm onCleanup.

Funkcja zwrotna onCleanup

Funkcja efektu otrzymuje funkcję onCleanup. Zarejestruj za jej pomocą funkcję sprzątającą; Angular wywoła ją przed kolejnym uruchomieniem oraz przy niszczeniu efektu.

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

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

Czyszczenie przed każdym ponownym uruchomieniem

Gdy zmieni się zależność, Angular najpierw wywołuje zarejestrowane czyszczenie, a następnie ponownie uruchamia treść efektu. Dzięki temu jednocześnie aktywny jest tylko jeden zasób.

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

Czyszczenie nasłuchiwaczy zdarzeń

Nasłuchiwacze DOM dodane w efekcie należy usuwać podczas czyszczenia, aby uniknąć zduplikowanych obsługiwaczy i wycieków.

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

Czyszczenie subskrypcji

Jeśli efekt subskrybuje Observable, anuluj subskrypcję podczas czyszczenia. (Często używa się do tego innych narzędzi, ale ten przykład pokazuje wzorzec).

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

Czyszczenie przy niszczeniu

Gdy komponent będący właścicielem efektu zostanie zniszczony, Angular automatycznie wykona końcowe czyszczenie, a następnie zniszczy efekt. Nie pozostaną żadne wyciekające liczniki czasu.

Kolejność: czyszczenie, potem treść

Przy pierwszym uruchomieniu efektu nie ma jeszcze niczego do wyczyszczenia. Od drugiego uruchomienia kolejność jest zawsze taka sama: czyszczenie -> treść.

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

Unikanie ciężkich operacji bez czyszczenia

Każdy długotrwały zasób uruchomiony w efekcie powinien mieć odpowiadające mu czyszczenie. Częstym błędem jest jego pominięcie, co powoduje nakładanie się interwałów przy każdej zmianie zależności.

Opcja manualCleanup

W przypadku efektów tworzonych poza komponentem (np. w działającej przez cały czas usłudze głównej) możesz użyć opcji manualCleanup, a następnie samodzielnie wywołać ref.destroy() w odpowiednim momencie.

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

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

DestroyRef jako alternatywa

W przypadku czyszczenia niezwiązanego z efektem możesz wstrzyknąć DestroyRef i zarejestrować funkcje zwrotne za pomocą onDestroy. W efektach preferuj onCleanup do czyszczenia przy każdym uruchomieniu.

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

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

Połączenie wszystkich elementów

Efekt synchronizacji z opóźnieniem: każda zmiana wartości anuluje poprzedni licznik czasu i planuje nowy zapis.

const query = signal('');

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

Szybki sprawdzian

Sprawdź swoją wiedzę na temat czyszczenia efektów.

Podsumowanie: czyszczenie efektów i cykl życia

Użyj parametru onCleanup, aby usuwać zasoby uruchomione wewnątrz efektu.

Czyszczenie jest wykonywane przed każdym ponownym uruchomieniem i przy niszczeniu.
Zawsze usuwaj liczniki czasu, nasłuchiwacze i subskrypcje.
manualCleanup służy do długotrwałych efektów, a DestroyRef do ogólnego czyszczenia.

Następnie: linkedSignal i zaawansowane wzorce.

Często zadawane pytania

Czy lekcja „Czyszczenie efektów i cykl życia” jest bezpłatna?

Tak — pełny tekst „Czyszczenie efektów i cykl życia” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Czyszczenie efektów i cykl życia”?

Zwalniaj zasoby wewnątrz efektów. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Czyszczenie efektów i cykl życia”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy