Potoki czyste a nieczyste
Poznaj zachowanie wykrywania zmian przez potoki.
Potoki czyste a nieczyste to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 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.
Potoki czyste domyślnie
Każdy potok jest domyślnie czysty. Czysty potok uruchamia się ponownie tylko wtedy, gdy zmieni się referencja jego wartości wejściowej lub argumentów.
Dlaczego czyste potoki są szybkie
Angular pomija wywołanie czystego potoku podczas wykrywania zmian, jeśli referencja danych wejściowych się nie zmieniła. Dzięki temu czyste potoki są wydajne.
@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
transform(value: string) { return value + "!"; }
}
// pure: only re-runs when value changesZmiana referencji a zmiana wartości
Czyste potoki wykrywają zmiany referencji. Modyfikacja tablicy w miejscu NIE uruchamia czystego potoku, ponieważ referencja tablicy pozostaje taka sama.
// this will NOT re-run a pure pipe:
this.items.push("new");
// this WILL, new reference:
this.items = [...this.items, "new"];Deklarowanie nieczystego potoku
Ustaw pure: false w dekoratorze @Pipe, aby uczynić potok nieczystym. Nieczysty potok uruchamia się podczas każdego cyklu wykrywania zmian.
@Pipe({ name: "filter", standalone: true, pure: false })
export class FilterPipe implements PipeTransform {
transform(items: string[], term: string) {
return items.filter(i => i.includes(term));
}
}Kiedy używać nieczystych potoków
Używaj nieczystych potoków, gdy przekształcenie zależy od modyfikowalnych danych, na przykład podczas filtrowania tablicy zmienianej w miejscu, albo od wartości zmieniających się bez utworzenia nowej referencji.
Koszt nieczystych potoków
Nieczyste potoki uruchamiają się bardzo często, podczas każdego cyklu wykrywania zmian. Złożona logika może pogorszyć wydajność, dlatego należy ją ograniczyć do minimum.
Potok async jest nieczysty
Wbudowany potok async jest nieczysty. Subskrybuje Observable lub Promise i aktualizuje widok, gdy pojawiają się nowe wartości.
<p>{{ data$ | async }}</p>
// component
data$ = this.http.get("/api/data");Potok async automatycznie anuluje subskrypcję
Dużą zaletą potoku async jest automatyczne anulowanie subskrypcji po zniszczeniu komponentu, co zapobiega wyciekom pamięci.
@Component({
template: "<p>{{ count$ | async }}</p>"
})
export class DemoComponent {
count$ = interval(1000);
}Unikaj mutacji w przypadku czystych potoków
Aby czyste potoki poprawnie działały z kolekcjami, traktuj dane jako niezmienne: zamiast modyfikować istniejące tablice i obiekty, twórz nowe.
// good for pure pipes:
this.users = this.users.concat(newUser);
this.user = { ...this.user, name: "Ada" };Wybór między potokiem czystym a nieczystym
Preferuj czyste potoki, aby uzyskać przewidywalne i szybkie działanie. Po nieczyste sięgaj tylko wtedy, gdy naprawdę musisz reagować na mutacje. Często przeprojektowanie kodu z użyciem niezmiennych danych całkowicie eliminuje potrzebę stosowania nieczystych potoków.
Dobre praktyki dotyczące nieczystych potoków
Jeśli musisz użyć nieczystego potoku, zapamiętuj wyniki, aby nie obliczać ich ponownie, gdy dane wejściowe się nie zmieniły.
@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;
}
}Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat czystych i nieczystych potoków.
Podsumowanie
Czyste potoki uruchamiają się tylko po zmianie referencji i są szybkie, natomiast nieczyste potoki (pure: false) uruchamiają się w każdym cyklu i pasują do modyfikowalnych danych. Potok async jest nieczysty i automatycznie anuluje subskrypcję.
Preferuj niezmienne dane, aby czyste potoki pozostały wydajne.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 38
- Lekcje
- 144
Często zadawane pytania
Czy lekcja „Potoki czyste a nieczyste” jest bezpłatna?
Tak — pełny tekst „Potoki czyste a nieczyste” 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 „Potoki czyste a nieczyste”?
Poznaj zachowanie wykrywania zmian przez potoki. Ć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 4 z 4.
Ile czasu zajmuje lekcja „Potoki czyste a nieczyste”?
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
- Używanie wbudowanych potoków
- Łączenie potoków i przekazywanie parametrów
- Tworzenie niestandardowych potoków
- Potoki czyste a nieczyste