G艂贸wnym elementem change detection strategy w Angularze jest Zone.js. Jest to biblioteka, kt贸ra patchuje metody asynchroniczne (requesty HTTP, timery) i zdarzenia, kt贸re s膮 wywo艂ywane przez u偶ytkownika. Tworzy przez to kontekst wykonania.
NgZone to serwis, kt贸ry pozwala na optymalizacj臋 obs艂ugi Zone. Stanowi on abstrakcj臋 nad Zone.js Dzi臋ki niemu, mo偶na na przyk艂ad wykluczy膰 fragment kodu, kt贸ry wykonuje asynchroniczne zdarzenia, z change detection. S艂u偶y temu metoda runOutsideAngular().
Nast臋pnie zone.js powiadamia Angulara o tym, 偶e zmiana si臋 wydarzy艂a, i framework przyst臋puje do sprawdzania komponent贸w. Domy艣lnie Angular triggeruje sprawdzanie komponentu od rodzica do dzieci i por贸wnuje, czy warto艣ci binding贸w si臋 zmieni艂y, je艣li tak, to komponent jest re-renderowany. Aktualizacj臋 widoku mo偶na 艂atwo wychwyci膰, na przyk艂ad dodaj膮c dla test贸w metod臋 wywo艂ywan膮 z templatki. Przy re-renderowaniu b臋dzie ona wywo艂ywana. Oczywi艣cie jest to antywzorzec.
Za angular.love - ka偶dy komponent posiada sw贸j w艂asny Change Detector, kt贸ry odpowiada za sprawdzanie jego binding贸w.
Co powoduje change detection w Angularze?
S膮 to obs艂u偶one akcje u偶ytkownika i zdarzenia asynchroniczne, oraz requesty HTTP. Po zdarzeniu, sprawdzane s膮 wszystkie komponenty, zaczynaj膮c od roota.
CDS On push
Change Detection Strategy mo偶na ustawi膰 tak偶e na onPush. Wtedy komponent i jego dzieci zostaj膮 wykluczone z automatycznego sprawdzania po tym, jak zone.js powiadomi Angulara o nowym zdarzeniu. Komponent zostanie sprawdzony jedynie gdy:
- zmieni si臋 input (por贸wnuj膮c jego referencj臋)
- u偶ytkownik wykona obs艂u偶on膮 akcj臋, np. click()
- async pipe otrzyma now膮 warto艣膰 (wywo艂uje to markForCheck)
- manualnie wywo艂amy metod臋 detectChanges()
Nie zostanie natomiast sprawdzony wtedy, gdy
- wywo艂ane zostan膮 metody setTimeout i setInterval
- dostaniemy now膮 warto艣膰 z Promise
R贸偶nica mi臋dzy metod膮 markForCheck i detectChanges
- detectChanges - wywo艂uje wykrywanie zmian dla komponentu i jego dzieci
- markForCheck - oznacza komponent i jego rodzic贸w jako CheckEnabled. Przy nast臋pnej okazji, ga艂膮藕 drzewa zostanie sprawdzona.
Brak komentarzy:
Prze艣lij komentarz