Angular Academy · Lekcja

Wykrywanie zmian OnPush

Ograniczać liczbę sprawdzeń za pomocą strategii OnPush

Wykrywanie zmian OnPush to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 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.

Problem z wydajnością

Strategia domyślna sprawdza każdy komponent przy każdym przebiegu. W dużych aplikacjach szybko się to sumuje. OnPush informuje Angular, aby pomijał komponent, dopóki nie zmieni się coś istotnego.

Włączanie OnPush

Należy ustawić opcję changeDetection w komponencie.

@Component({
  selector: 'app-user',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '{{ user().name }}'
})
export class UserComponent {}

Kiedy OnPush wykonuje ponowne sprawdzenie

Komponent OnPush jest sprawdzany tylko wtedy, gdy: zmieni się referencja @Input, wystąpi zdarzenie w jego szablonie, observable powiązany za pomocą async wyemituje wartość lub zostanie wywołane markForCheck().

Równość referencji wejściowych

OnPush porównuje referencje wejściowe za pomocą Object.is. Modyfikowanie obiektu w miejscu nie uruchamia ponownego sprawdzenia — należy przekazać nową referencję.

// Mutation: ignored by OnPush
this.user.name = 'New';
// New reference: detected
this.user = { ...this.user, name: 'New' };

Niezmienność pomaga

OnPush naturalnie dobrze współpracuje z niezmiennymi danymi. Przy każdej zmianie należy tworzyć nowe obiekty lub tablice zamiast je modyfikować, aby sprawdzanie referencji niezawodnie wykrywało zmiany.

this.items = [...this.items, newItem];

Zdarzenia nadal działają

Zdarzenia pochodzące z własnego szablonu komponentu, takie jak kliknięcia i dane wejściowe, automatycznie oznaczają go do sprawdzenia, więc lokalna interakcja działa bez dodatkowego kodu.

<button (click)="count.set(count() + 1)">+</button>

Potok async

Potok async wywołuje markForCheck(), gdy observable emituje wartość, dzięki czemu OnPush bezproblemowo współpracuje ze strumieniami.

<p>{{ data$ | async }}</p>

markForCheck

Gdy stan jest aktualizowany poza standardowymi wyzwalaczami, należy wywołać markForCheck(), aby zaplanować sprawdzenie komponentu i jego przodków podczas następnego przebiegu.

private cdr = inject(ChangeDetectorRef);
this.cdr.markForCheck();

Sygnały i OnPush

Sygnały integrują się z OnPush: odczytanie sygnału w szablonie rejestruje zależność, a jego aktualizacja automatycznie oznacza komponent do sprawdzenia, bez konieczności ręcznego wywoływania metod.

count = signal(0);
increment() { this.count.update(c => c + 1); }

Propagacja OnPush

Po oznaczeniu komponent i wszyscy jego przodkowie aż do korzenia są oznaczani, aby sprawdzona została cała ścieżka. Komponenty potomne są poniżej sprawdzane normalnie.

Dobra praktyka

W przypadku nowych komponentów należy domyślnie używać OnPush. W połączeniu z sygnałami lub niezmiennymi danymi wejściowymi znacznie ogranicza to niepotrzebną pracę.

Szybki test

Sprawdź swoją wiedzę na temat OnPush.

Podsumowanie

Dowiedziałeś się, że ChangeDetectionStrategy.OnPush pomija sprawdzanie, dopóki nie zmieni się referencja wejściowa, nie wystąpi zdarzenie w szablonie, nie wyemituje potok async lub nie zostanie wywołane markForCheck(). Najlepiej współpracuje z niezmiennymi danymi i sygnałami.

Często zadawane pytania

Czy lekcja „Wykrywanie zmian OnPush” jest bezpłatna?

Tak — pełny tekst „Wykrywanie zmian OnPush” 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 „Wykrywanie zmian OnPush”?

Ograniczać liczbę sprawdzeń za pomocą strategii OnPush Ć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 2 z 4.

Ile czasu zajmuje lekcja „Wykrywanie zmian OnPush”?

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