Strategia wykrywania zmian kątowych: strategie OnPush i domyślne

Wykrywanie zmian jest określane jako mechanizm, który porównuje stan obecny z nowym stanem. Jakakolwiek różnica między tymi dwoma stanami sugeruje, że istnieją zmiany, które należy zaktualizować. Oznacza to, że widok musi być aktualizowany wraz ze zmianą danych.

Każda zmiana zachodząca w komponentach podczas zmiany w aplikacji jest wykrywana przez Angular 2+. Za każdym razem, gdy model zostanie zmieniony, powiązane zmiany są wykrywane przez kąt, a widoki są natychmiast aktualizowane. Ta zmiana jest określana jako wykrywanie zmiany kątowej.

Zmiana może być wynikiem danych otrzymanych z żądań sieciowych lub może nastąpić w wyniku zdarzenia użytkownika. Wraz z rosnącym rozmiarem aplikacji, więcej pracy musi być wykonane przez metodę wykrywania zmian. Wykrywanie kątowe jest konieczne, aby zachować synchronizację między podstawowymi widokami a odpowiednimi modelami.

Zmiana w modelu kątowym może wynikać z dowolnej z następujących przyczyn:

• Zdarzenia DOM (kliknij, najedź kursorem itp.)
• Żądania AJAX
• Zegary (setTimer(), setInterval())

Warunki wstępne

Aby zapoznać się z tym artykułem, być może będziesz musiał zapoznać się z pojęciami komponentów kątowych. Również koncepcje typów wartości i typów referencyjnych mogą być pomocne w zrozumieniu artykułu.

Wykrywanie zmian w Angular

Wykrywanie zmian w Angular odbywa się w dwóch krokach, z których pierwszym jest aktualizacja modelu aplikacji przez programistę. Może być poprzedzona emisją zdarzenia lub zmianą właściwości komponentu. Drugi krok to zadanie kątownika polegające na odbiciu modelu. Wykrywa, czy jakiekolwiek nowe dane są jawnie wpychane do komponentu. Można to zrobić za pomocą komponentu lub obserwowalnego subskrybowanego za pomocą potoku asynchronicznego.

Dlatego te dwa kroki to:

• Zaktualizuj model aplikacji (programista);
• Odzwierciedlaj stan modelu w widoku (Kątowy).

Wykrywanie zmian w trybie kątowym wykrywa zmiany typowych zdarzeń przeglądarki, takich jak kliknięcia myszą, żądania HTTP i inne rodzaje zdarzeń. Po wykryciu zmiany podejmuje się decyzję, czy aktualizacja widoku jest wymagana, czy nie.

Strategie wykrywania zmian

Istnieją dwie strategie wykrywania zmian kątowych , domyślna i onPush.

Strategia domyślna

• Zmiany w modelu są monitorowane kątowo, aby upewnić się, że wszystkie zmiany w modelu są uchwycone. Różnice między nowym a poprzednim stanem sprawdzane są kątowo.
• Aby widok został zaktualizowany, kątownik powinien mieć dostęp do nowej wartości, która jest następnie porównywana ze starą wartością. Na tej podstawie podejmowana jest decyzja, czy zaktualizować widok, czy nie.
• Dlatego w strategii domyślnej kąt obraca się wokół pytania, czy zachodzą jakiekolwiek zmiany wartości.
• Nie ma założenia, od czego zależą komponenty. Jest to konserwatywna strategia, która sprawdzi się za każdym razem, gdy nastąpi powiązana zmiana. Kontrole będą przeprowadzane na wszystkich zdarzeniach przeglądarki, godzinach, obietnicach i XHR.
• Strategia może być problematyczna, gdy rozważane są duże aplikacje z wieloma komponentami.
• Domyślnie używa strategii ChangeDetectionStrategy.Default .

Zastępowanie domyślnych mechanizmów przeglądarki

• Kilka interfejsów API niskiego poziomu zostanie załatany przez angular w czasie uruchamiania. Te interfejsy API mogą być addEventListener; funkcja przeglądarki, która służy do rejestrowania zdarzeń przeglądania.
• AddEventListener zostanie zastąpiony przez angular z nowszą wersją, działającą jak poprzednia.
• Nowa wersja addEventListener dodaje więcej funkcji do obsługi zdarzeń . Interfejs użytkownika jest aktualizowany po uruchomieniu sprawdzania wydajności metodą kątową.

Pracujący

Biblioteka dostarczana z Zone.js wykonuje poprawki niskiego poziomu interfejsu API przeglądarki.

• Strefa jest zdefiniowana jako zawartość wykonania w wielu turach wykonywania maszyny JVM. Dzięki temu mechanizmowi do przeglądarki można dodać dodatkową funkcjonalność. Strefy są używane wewnętrznie kątowo do wykrywania wszelkich zmian i wyzwalania detekcji.
• Strefa ma zwykle trzy fazy, tj. jest stabilna na początku, staje się niestabilna, jeśli jakieś zadanie zostanie uruchomione w strefie, i staje się stabilna po zakończeniu zadania.
• Mechanizmy przeglądarki, które zostały zaktualizowane, aby wspierać wykrywanie zmian, to:

1. zdarzenia przeglądarki, takie jak kliknięcie itp.
2. setInterval() i setTimeout()
3. Żądania Ajax HTTP

• Aby wyzwolić wykrywanie zmian w angular, Zone.js służy do łatania kilku interfejsów API innej przeglądarki, takiej jak Websockets.
• Ograniczeniem tej metody jest: jeśli Zone.js nie obsługuje interfejsu API przeglądarki, nie będzie wyzwalania podczas wykrywania zmian.

Jak działa wykrywanie zmiany kątowej po wyzwoleniu wykrywania zmiany?

Wyzwolone zmiany są wykrywane przez detektor zmian. Ten detektor zmian jest tworzony podczas uruchamiania aplikacji. Przykładem może być komponent TodoItem . Zdarzenie zostanie wyemitowane po odebraniu obiektu Todo przez komponent, jeśli status zadania jest przełączony. Dowiedz się więcej o prowadzeniu projektów kątowych.

Działanie domyślnego mechanizmu wykrywania zmian

Mechanizm wykrywania zmian jest prosty. W każdym wyrażeniu wartość bieżąca dla właściwości jest porównywana z wartością tej właściwości w poprzednim stanie w wyrażeniu.

• Posiadanie różnicy w wartości właściwości spowoduje ustawienie wartości true na isChanged .

2. Strategia OnPush

• Korzystając ze strategii onPush , kątownik nie musi zgadywać, kiedy należy przeprowadzić kontrolę.
• Na podstawie zmiany odniesienia wejściowego lub zdarzeń wyzwolonych przez same komponenty, kątownik wykona sprawdzenie zmian.
• Ponadto kąt może zostać wyraźnie poproszony o wykonanie sprawdzenia zmian. Odbywa się to za pomocą metody componentRef.markForCheck().
• Składniki tej strategii będą zależeć tylko od jej danych wejściowych. Strategia wykrywania zmian zostanie wykonana tylko wtedy, gdy:

• Nastąpiła zmiana w referencji wejściowej.
• Istnieją skojarzone zmiany w komponentach modelu lub dowolnym z jego elementów podrzędnych.
• Kiedy należy przeprowadzić detekcję wyraźnej zmiany.
• Gdy używany jest potok asynchroniczny w widoku.

• W porównaniu ze strategią domyślną, strategia onpush skupia się głównie wokół dwóch pytań, którymi są:

• Czy nastąpiła jakaś zmiana w typie referencyjnym?
• Jeśli nastąpiły zmiany w odwołaniu typu referencyjnego, to czy są jakieś zmiany w wartościach pamięci sterty?

• Zapobiega to niepotrzebnym sprawdzeniu komponentów, a także komponentów podrzędnych.

Wdrażanie strategii onPush dla komponentu

Dopiero gdy nowe odwołanie zostanie przekazane jako wartość @Input() , wyzwala wykrywanie zmian. Wartości mogą być typami pierwotnymi, takimi jak liczby, wartości logiczne, łańcuchy i null. Można również używać tablic i obiektów. Zmodyfikowane obiekty lub tablice nie mogą być używane do wyzwalania wykrywania zmian w komponencie onPush , ponieważ nie jest dla nich tworzone nowe odniesienie. W związku z tym należy przekazać nowy obiekt lub odniesienie do tablicy, aby wyzwolić detektor wykrywający zmianę.

Aby uniknąć błędów w metodzie wykrywania zmian, aplikacja może zostać zbudowana z wykorzystaniem wykrywania zmian onPush wszędzie poprzez użycie niezmiennych obiektów i list. Modyfikację niezmiennych obiektów można przeprowadzić poprzez utworzenie nowego odniesienia do obiektu, a zatem:

• Dla każdej zmiany wyzwalana jest detekcja zmiany onPush .
• Zawsze tworzone jest nowe odniesienie do obiektu, co zapobiega powstawaniu błędów.

W takich przypadkach można użyć Immutable.js, ponieważ zawiera on niezmienne struktury danych dla obiektów (Map) i list (List).

• Dodanie parametru changeDetection w adnotacji komponentu zaimplementuje strategię onPush. Zamiast przekazywać nowe referencje za każdym razem, ChangeDetectorRef może być również używany do pełnej kontroli.

ChangeDetectorRef.detectChanges()

• Metodę wykrywania zmian można dołączyć lub odłączyć ręcznie za pomocą metod odłączania i ponownego dołączania w changeDetectorRef.

ChangeDetectorRef.detach() i Niezmienny.js

W przypadku stosowania strategii onPush do wykrywania zmian zawsze dobrze jest wymusić niezmienność. W takich przypadkach używany jest Immutable.js.

immutable.js to biblioteka stworzona do włączania niezmienności w JavaScript wraz z niezmiennymi strukturami danych, takimi jak List, Stack i Map.

Aby dodać Immutable.js w projektach, w terminalu należy użyć następującego polecenia. Dowiedz się więcej o projektach kątowych.

$ npm zainstalować niezmienne – zapisz

Aby zaimportować struktury danych z Immutable.js, należy użyć następującego polecenia. Polecenie pokazuje importowanie tylko struktur danych List i Map w tym przypadku.

importuj {Mapę, Listę} z 'niezmiennego' Można również użyć tablicy.

Również jeśli używany jest Immutable.js, wiąże się z nim kilka wad.

• Korzystanie z API jest nieco kłopotliwe.
• Nie można zaimplementować interfejsów do modelu danych, ponieważ biblioteka Imutable.js nie obsługuje żadnych interfejsów.

Ucz się kursów oprogramowania online z najlepszych światowych uniwersytetów. Zdobywaj programy Executive PG, Advanced Certificate Programs lub Masters Programs, aby przyspieszyć swoją karierę.

Streszczenie

Artykuł wprowadził Cię w mechanizm wykrywania zmian i strategie. Angular domyślnie wykona wykrywanie zmian we wszystkich komponentach. Ponadto ChangeDetectorRef można zastosować do wykrywania zmian w nowych odniesieniach, gdy dane zostaną zmutowane. Zapotrzebowanie na zabudowę kątową stale rośnie, co skutkuje pensją dewelopera kątowego w Indiach.

Jeśli chcesz dowiedzieć się więcej o technologii oprogramowania, jego rozwoju i mechanizmach za nim stojących, możesz zapoznać się z kursem Executive PG Program in Software Development – ​​Specialization in Full Stack Development oferowanym przez upGrad. Kurs specjalizacyjny to 23-tygodniowy program online oferujący ponad 300 studiów przypadków, aby poszerzyć Twoją wiedzę i dostępne narzędzia oraz język programowania, aby poprawić Twoje umiejętności praktyczne. Jeśli masz więcej pytań związanych z kursem, napisz do nas. Nasz zespół skontaktuje się z Tobą.