Poznaj Change Detection w Angularze

Marek Purwin12 Styczeń 20243.25 min

Change Detection automatycznie monitoruje i aktualizuje widok aplikacji, reagując na zmiany w danych. Zapoznaj się z różnymi strategiami, takimi jak tryb OnPush, oraz istotnymi metodami Change Detection Ref, w tym detectChanges czy markForCheck, które umożliwiają programistom precyzyjną kontrolę procesu detekcji zmian.

Czym jest Change Detection w Angularze?

Change Detection w Angularze to mechanizm, który śledzi i automatycznie aktualizuje widok aplikacji w odpowiedzi na zmiany w jej stanie lub danych. Innymi słowy, gdy coś się zmienia w komponencie (na przykład wartość zmiennej), Angular wykrywa tę zmianę i aktualizuje widok, aby odzwierciedlić nowy stan.

Mamy prosty przykład:

Change Detection automatycznie śledzi te zmiany i aktualizuje widok w momencie, gdy wartość count zostaje zmieniona. Nie musimy ręcznie manipulować DOM-em ani odświeżać widoku – Angular zrobi to za nas.

Sposoby wykrywania zmian w komponentach:

Change Detection w Angularze korzysta z różnych strategii do wykrywania zmian i aktualizacji widoku. Dwa główne tryby to:

  1. Default (Domyślny):

    W trybie domyślnym Angular sprawdza wszystkie komponenty w drzewie komponentów za każdym razem, gdy zachodzi zdarzenie (np. kliknięcie, asynchroniczne zdarzenie). To jest bardziej kosztowne z punktu widzenia wydajności, ale bardziej elastyczne.

OnPush:

W trybie OnPush Change Detection sprawdza komponenty tylko wtedy, gdy dane wejściowe (@Input) dla danego komponentu ulegną zmianie lub gdy komponent otrzyma zdarzenie zmiany detektorów. Jest to bardziej efektywne, ponieważ ogranicza zakres sprawdzania zmian tylko do tych komponentów, które faktycznie ich potrzebują.


Główne zdarzenia, które wywołują Change Detection w tym trybie, to:

  • Zmiana danych wejściowych (@Input):

    • Change Detection w trybie OnPush reaguje na zmiany wartości wejściowych komponentu. Jeśli komponent otrzymuje nowe dane wejściowe, to jest to jedno z zdarzeń, które wywoła ponowne sprawdzenie zmian.

  • Zdarzenia użytkownika:

    • Kliknięcia, wprowadzanie tekstu, czy inne zdarzenia użytkownika, które powodują interakcję z interfejsem użytkownika.

  • Zdarzenia asynchroniczne:

    • Wywołania asynchroniczne, takie jak operacje sieciowe, obsługa zdarzeń czasowych, czy operacje na Observable.

  • Formularze:

    • Interakcje z formularzami, zwłaszcza w przypadku dwukierunkowego wiązania danych z użyciem ngModel.

  • Detektory zmian (Change Detectors):

    • Automatyczne detekcje zmian w trakcie cyklu życia komponentu.

  • Timery i interwały:

    • Korzystanie z funkcji setTimeout czy setInterval, które wykonują się asynchronicznie po upływie określonego czasu.

Programista może decydować, który tryb jest używany, określając strategię Change Detection na poziomie komponentu za pomocą dekoratora @Component i ustawiając changeDetection: ChangeDetectionStrategy.OnPush. Ta elastyczność pozwala na optymalizację wydajności w zależności od specyfiki danego komponentu.

Oto przykład jak ustawić Strategie OnPush dla komponentu:

Istnieje także opcja domyślnego ustawienia strategii OnPush dla komponentów Angular. Ta funkcjonalność umożliwia znaczącą poprawę wydajności naszych aplikacji.

W obiekcieprojects ⇒ schematics umieszczamy poniższy kod:

Change Detection Ref (CDR)

Change Detection Ref to mechanizm w Angularze, który monitoruje i śledzi zmiany w modelu danych, aby następnie zaktualizować widok. To kluczowe narzędzie dla zachowania spójności między danymi a interfejsem użytkownika. Jedną z jego głównych ról jest umożliwienie programistom kontrolowania, kiedy i jakie elementy powinny zostać odświeżone w aplikacji.

Metody Change Detection Ref: detectChanges i markForCheck

W świecie Angulara, mamy do dyspozycji dwie kluczowe metody w Change Detection Ref - detectChanges oraz markForCheck. Pierwsza z nich, detectChanges, ręcznie inicjuje proces Change Detection, sprawdzając wszelkie zmiany w modelu danych. Z kolei markForCheck informuje Angulara o konieczności sprawdzenia całego drzewa komponentów, co może być szczególnie użyteczne w sytuacjach, gdzie zmiany mogą wystąpić poza zasięgiem standardowej detekcji.

Przykład użycia detectChanges

Po wywołaniu metody updateData, dane są pobierane asynchronicznie, a po 1 sekundzie aktualizują wartość właściwości this.data. Użycie metody detectChanges skutkuje sprawdzeniem zmian w modelu danych po wykonaniu tej asynchronicznej akcji.

Przykład użycia markForCheck

W przypadku użycia metody markForCheck, informujemy Angulara o konieczności sprawdzenia całego drzewa komponentów w celu aktualizacji widoku po tej asynchronicznej akcji. Oznacza to, że Angular przeprowadzi proces Change Detection, sprawdzając wszystkie komponenty, co umożliwi uwzględnienie zmian w modelu danych w widoku.

Różnice między markForCheck , a detectChanges

markForCheck i detectChanges są dwiema funkcjami związanych z change detection w kontekście frameworka Angular. Oto prosta różnica między nimi:

  1. markForCheck:

    • markForCheck jest metodą dostępną w serwisie ChangeDetectorRef w Angularze.

    • Używana jest do oznaczania komponentu i jego poddrzewa do sprawdzenia zmian podczas następnej iteracji change detection.

    • Jest przydatna, gdy chcemy, aby change detection sprawdził stan komponentu i jego dzieci, ale nie chcemy natychmiastowego uruchamiania procesu change detection.

2. detectChanges:

  • detectChanges to metoda dostępna bezpośrednio na obiekcie ChangeDetector w Angularze.

  • Wywołanie tej metody natychmiastowo uruchamia proces change detection dla danego komponentu i jego poddrzewa.

  • Stosowana jest, gdy chcemy wymusić sprawdzenie zmian w danym komponencie, nawet jeśli nie zachodzą żadne zdarzenia, które zazwyczaj by je spowodowały.

Podsumowując, markForCheck oznacza komponent do późniejszego sprawdzenia zmian podczas normalnej iteracji change detection, podczas gdy detectChanges natychmiastowo uruchamia proces sprawdzania zmian w danym komponencie i jego poddrzewie.



Ostatnie wpisy

kariera

Spersonalizowana ścieżka kariery dla programisty frontend

Podczas nauki programowania skoncentruj się na frontendzie, opanuj HTML, CSS, JavaScript, podstawy internetowe. Dostosuj naukę do oczekiwań rynku, wybierz konkretny kierunek (np. aplikacje mobilne), śledź rynek pracy, a skuteczne portfolio i CV pomogą w zdobyciu wymarzonej pracy.

Marek Purwin

Marek Purwin

CEO / Owner

kariera

Początki z programowaniem frontend. Praktyczny przewodnik.

Zastanawiasz się nad programowaniem frontendu? Poznaj tę fascynującą ścieżkę! Tworzenie responsywnych stron, projektowanie sklepów online, rozwijanie zaawansowanych aplikacji webowych. Frontend to więcej niż zmiana kolorów - to dbałość o użyteczność, dostępność i jakość interfejsu. Współpraca z zespołem, nowe technologie (React, Angular, Vue), narzędzia automatyzacji (Webpack, Parcel), i nowoczesne standardy CSS. Rozwijaj umiejętności, ale świadomie wybieraj - dynamiczny rozwój, zróżnicowane środowiska przeglądarkowe, wyzwania zabezpieczeń i wydajności. Frontend to pasja i wyzwania, ale także satysfakcja. Czekamy na Ciebie na bezpłatnej lekcji wprowadzającej. Sprawdź, czy to dla Ciebie!

Marek Purwin

Marek Purwin

CEO / Owner

frameworki

Poznaj Change Detection w Angularze

Change Detection automatycznie monitoruje i aktualizuje widok aplikacji, reagując na zmiany w danych. Zapoznaj się z różnymi strategiami, takimi jak tryb OnPush, oraz istotnymi metodami Change Detection Ref, w tym detectChanges czy markForCheck, które umożliwiają programistom precyzyjną kontrolę procesu detekcji zmian.

Marek Purwin

Marek Purwin

CEO / Owner