ANGULAR 2 LIFECYCLE HOOKS – ngOnChanges & ngDoCheck

Zapewne wiesz, że komponenty mają swój cykl życia, składający się z hooków, w które możemy się wpiąć. W tym artykule skupię się na 2 hookach: ngOnChanges oraz ngDoCheck, sprawdzimy jak możemy reagować na zmiany data-bound oraz poszczególnych właściwości obiektu.

Na starcie polecam spojrzeć do live example, ułatwi Ci to dalsze zrozumienie kodu:

LIVE EXAMPLE

ngOnChanges

NgOnChanges jest hookiem, od którego komponent rozpoczyna swoje życie. Uruchamia się w dwóch przypadkach:

  • raz przed ngOnInit, jako pierwszy hook cyklu życia komponentu
  • za każdym razem, kiedy zmieni się referencja do obiektu w data-bound (data-bound to np. [actor]=”John”), natomiast mutowanie obiektu nie zawoła ngOnChanges!

 

Co umożliwia ngChanges? Możemy uruchomić custom code, w momencie jak data-bound zmieni swoją zawartość (referencję do obiektu, którą przetrzymuje).

NgOnChanges przyjmuje jeden parametr typu SimpleChanges. Parametr daje nam dostęp do poprzedniej oraz aktualnej wartości dowolnego Inputa. Sprawdźmy to na przykładzie:

Sięgamy po nasz OnChangesComponent w AppComponent, i dodamy dwie metody na buttonach:

Oraz nasze logi przy tworzeniu komponentu, ale jeszcze przed ngOnInit:

 

oraz po kliknięciu buttona Change Reference, który podmienił nam obiekt:

 

 

Świetna sprawa, mamy dostęp do poprzedniej wartości Inputa oraz możemy złapać moment zmiany wartości. A co jeśli nie mamy do czynienia z Immutable data i chcemy wyłapać zmianę pojedynczego property obiektu? Z pomocą przychodzi nam ngDoCheck.

ngDoCheck

NgDoCheck jest kolejnym hookiem cyklu życia komponentu. Kiedy się z nim spotykamy?

  • uruchamia się bezpośrednio po ngOnInit
  • uruchamia się za każdym razem, kiedy odpala się Change Detection

 

Po co ten cały ngDoCheck? Rozszerza działanie change Detectora, który domyślnie sprawdza, czy zmieniła się tylko referencja w data-bound. Dzięki ngDoCheck możemy zareagować na zmianę danego property obiektu.

Przykład:

Jeśli powyższy kod umieścimy w ngOnChanges(), nie będzie żadnego efektu.

KeyValueDiffers + ngDoCheck = ngDoCheck na sterydach

Jeśli chcemy mieć pełen dostęp do tego co się działo z właściwościami obiektu, to polecam połączyć ngDoCheck z klasą KeyValueDiffers. Sprawdźmy, jak to działa:

Jeśli zajrzysz do LIVE EXAMPLE i klikniesz button Change Reference, to w konsoli ujrzysz następujące logi:

Jak na dłoni widzimy jakie properties obiektu się zmieniły/pojawiły/usunęły.

Ok, do rzeczy. Czym jest KeyValueDiffers?

To serwis, który umożliwia nam śledzenie zmian dokonanych na właściwościach obiektu. Na jakie zmiany w obiekcie możemy reagować?

  • na zmienione properties (forEachChangedIem)
  • na usunięte properties (forEachRemovedItem)
  • na dodane properties (forEachAddedItem)

Zapewne zwróciłeś uwagę na kod w konstruktorze:

W tej linijce tworzymy tzw. differa. Metoda find({}) daje nam odpowiedniego differa:

  • find({}) dla „object differ”, jeśli chcemy łapać różnice w obiekcie
  • find([]) dla „array differ”, jeśli chcemy łapać różnice w tablicy

Natomiast metoda create(null) przypisuje do differa wartość początkową null, bez tego byśmy nie złapali różnic w pierwszym użyciu.

 

PODSUMOWANIE

Podstawowa różnica między ngOnChanges & ngDoCheck:

  • ngOnChanges NIE reaguje na zmiany danego property, wywoła się wyłącznie kiedy w data-bound (Inpucie) zmieni się refrencja do obiektu
  • ngDoCheck pozwala nam reagować na zmianę pojedynczego property, wywoła się zawsze przy uruchomieniu systemu detekcji, więc częste używanie ngDoCheck może negatywnie wpłynąć na performance aplikacji

O czym należy pamiętać:

  • Połącznie ngOnChanges i ngDoCheck trzeba zrobić z głową lub w ogóle nie łączyć, z racji, że ngOnChanges będzie dalej wołany jak Change Detector wyłapie zmianę zawartości w data-bound, co doprowadzi do tego, że będziemy wołać jednocześnie ngDoCheck i ngOnChanges.

 

 

One Comment

  1. Pingback: ANGULAR 2 CUSTOM VALIDATORS

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *