Strategie zur Erkennung von Winkeländerungen: OnPush- und Standardstrategien

Als Änderungserkennung wird der Mechanismus bezeichnet, der den aktuellen Zustand mit dem neuen Zustand vergleicht. Jeder Unterschied zwischen den beiden Zuständen deutet darauf hin, dass es Änderungen gibt, die aktualisiert werden müssen. Dies bedeutet, dass die Ansicht mit der Änderung der Daten aktualisiert werden muss.

Jede Änderung, die während einer Änderung in der App an den Komponenten auftritt, wird durch Angular 2+ erkannt. Bei jeder Änderung eines Modells werden die damit verbundenen Änderungen von angle erkannt und die Ansichten sofort aktualisiert. Diese Änderung wird als Winkeländerungserfassung bezeichnet.

Die Änderung kann das Ergebnis von Daten sein, die von Netzwerkanfragen empfangen wurden, oder durch ein Benutzerereignis erfolgen. Mit zunehmender Größe der App muss mehr Arbeit durch die Methode der Änderungserkennung geleistet werden. Die Winkelerkennung ist notwendig, um die zugrunde liegenden Ansichten und die entsprechenden Modelle synchron zu halten.

Die Änderung des Winkelmodells kann folgende Ursachen haben:

• DOM-Ereignisse (klicken, darüber fahren usw.)
• AJAX-Anfragen
• Timer (setTimer(), setInterval())

Voraussetzungen

Um diesen Artikel lesen zu können, müssen Sie möglicherweise mit den Konzepten der Winkelkomponenten vertraut sein. Auch die Konzepte von Werttypen und Referenztypen können beim Verständnis des Artikels hilfreich sein.

Änderungserkennung in Angular

Die Winkeländerungserkennung erfolgt in zwei Schritten, wobei der erste die Aktualisierung des Anwendungsmodells durch den Entwickler ist. Dem kann entweder das Aussenden eines Ereignisses oder die Eigenschaftsänderung einer Komponente vorausgehen. Der zweite Schritt ist die Aufgabe des Winkels, das Modell zu reflektieren. Es erkennt, ob explizit neue Daten in die Komponente gepusht werden. Dies kann entweder über eine Komponente oder ein Observable erfolgen, das über die Async-Pipe abonniert wird.

Daher sind die beiden Schritte:

• Aktualisieren Sie das Anwendungsmodell (Entwickler);
• Den Zustand des Modells in der Ansicht widerspiegeln (Winkel).

Die Änderungserkennung in Angular erkennt Änderungen gängiger Browserereignisse wie Mausklicks, HTTP-Anforderungen und andere Arten von Ereignissen. Sobald die Änderung erkannt wird, wird entschieden, ob die Aktualisierung der Ansicht erforderlich ist oder nicht.

Erkennungsstrategien ändern

Es sind zwei Winkeländerungserkennungsstrategien vorhanden, die Standardstrategie und die onPush.

Die Standardstrategie

• Die Änderungen an einem Modell werden von Angle überwacht, um sicherzustellen, dass alle Änderungen im Modell erfasst werden. Die Unterschiede zwischen dem neuen und dem vorherigen Zustand werden von angle überprüft.
• Damit eine Ansicht aktualisiert werden kann, sollte der Winkel Zugriff auf den neuen Wert haben, der dann mit dem alten Wert verglichen wird. Auf dieser Grundlage wird entschieden, ob die Ansicht aktualisiert wird oder nicht.
• Daher dreht sich der Winkel in einer Standardstrategie um die Frage, ob es Änderungen im Wert gibt.
• Es gibt keine Annahme darüber, wovon die Komponenten abhängen. Es ist eine konservative Strategie, die jedes Mal überprüft, wenn es eine damit verbundene Änderung gibt. Überprüfungen werden über alle Browserereignisse, Zeiten, Zusagen und XHRs durchgeführt.
• Problematisch kann die Strategie werden, wenn große Anwendungen mit vielen Komponenten betrachtet werden sollen.
• Standardmäßig wird die ChangeDetectionStrategy.Default- Strategie verwendet.

Überschreiben der Standardmechanismen des Browsers

• Mehrere Low-Level-APIs werden zum Zeitpunkt des Starts von Angular gepatcht. Diese APIs können addEventListener sein; eine Browserfunktion, die zum Registrieren von Browsing-Ereignissen verwendet wird.
• Der addEventListener wird durch eckig ersetzt, wobei eine neuere Version wie die frühere Version funktioniert.
• Dem Event-Handler wird durch die neue Version von addEventListener mehr Funktionalität hinzugefügt . Die Benutzeroberfläche wird aktualisiert, nachdem die Leistungsprüfung von Angular ausgeführt wurde.

Arbeiten

Eine Bibliothek, die mit Zone.js geliefert wird, führt das Low-Level-Patching der Browser-API durch.

• Die Zone ist als Ausführungsinhalt unter mehreren JVM-Ausführungsrunden definiert. Über diesen Mechanismus können zusätzliche Funktionen zu einem Browser hinzugefügt werden. Die Zonen werden intern von Angular verwendet, um Änderungen zu erkennen und die Erkennung auszulösen.
• Normalerweise gibt es in einer Zone drei Phasen, dh sie ist zu Beginn stabil, wird instabil, wenn irgendeine Aufgabe in der Zone läuft, und sie wird stabil, sobald die Aufgabe abgeschlossen ist.
• Browser-Mechanismen, die gepatcht werden, um die Erkennung von Änderungen zu unterstützen, sind:

1. Browser-Ereignisse wie Klick usw.
2. setInterval() und setTimeout()
3. Anfragen von Ajax HTTP

• Um die Änderungserkennung in Angular auszulösen, wird Zone.js verwendet, um mehrere APIs eines anderen Browsers wie Websockets zu patchen.
• Eine Einschränkung für diese Methode ist: Wenn Zone.js die Browser-API nicht unterstützt, gibt es keinen Trigger während der Änderungserkennung.

Wie funktioniert die Winkeländerungserkennung, wenn die Änderungserkennung ausgelöst wird?

Die ausgelösten Änderungen werden durch einen Änderungsdetektor erkannt. Dieser Änderungsdetektor wird während der Startzeit der Anwendung erstellt. Als Beispiel kann die TodoItem- Komponente betrachtet werden. Beim Empfang eines Todo-Objekts durch die Komponente wird ein Ereignis ausgegeben, wenn der Status des Todo umgeschaltet wird. Erfahren Sie mehr darüber, wie Sie Winkelprojekte ausführen.

Funktionsweise des standardmäßigen Änderungserkennungsmechanismus

Der Mechanismus der Änderungserkennung ist einfach. In jedem Ausdruck wird der aktuelle Wert der Eigenschaft mit dem Wert dieser Eigenschaft im vorherigen Zustand im Ausdruck verglichen.

• Bei einem Unterschied im Wert der Eigenschaft wird der Wert von isChanged auf true gesetzt .

2. OnPush-Strategie

• Bei Verwendung der onPush- Strategie muss der Winkel nicht raten, wann die Überprüfung durchgeführt werden muss.
• Basierend auf der Änderung der Eingangsreferenz oder Ereignissen, die von den Komponenten selbst ausgelöst werden, führt der Winkel die Überprüfung auf Änderungen durch.
• Außerdem kann der Winkel explizit aufgefordert werden, die Überprüfung auf Änderungen durchzuführen. Dies erfolgt über die Methode von componentRef.markForCheck().
• Die Komponenten während dieser Strategie hängen nur von ihren Eingaben ab. Die Änderungserkennungsstrategie wird nur ausgeführt, wenn:

• Es gibt eine Änderung in der Eingangsreferenz.
• Es gibt zugeordnete Änderungen in den Komponenten des Modells oder eines seiner untergeordneten Elemente.
• Wenn eine explizite Änderungserkennung durchgeführt werden muss.
• Wenn eine asynchrone Pipe in der Ansicht verwendet wird.

• Im Vergleich zur Default-Strategie dreht sich die Onpush-Strategie hauptsächlich um zwei Fragen:

• Ändert sich der Referenztyp?
• Wenn es Änderungen in der Referenz des Referenztyps gibt, gibt es dann Änderungen in den Werten des Heap-Speichers?

• Es verhindert unnötige Überprüfungen der Komponenten und auch der untergeordneten Komponenten.

Implementieren der onPush-Strategie für eine Komponente

Nur wenn eine neue Referenz als @Input() -Wert übergeben wird, löst dies eine Änderungserkennung aus. Die Werte können primitive Typen wie Zahlen, boolesche Werte, Zeichenfolgen und Null sein. Arrays und Objekte können ebenfalls verwendet werden. Geänderte Objekte oder Arrays können nicht zum Auslösen der Änderungserkennung auf einer onPush - Komponente verwendet werden, da keine neue Referenz für sie erstellt wird. Daher muss ein neues Objekt oder eine Array-Referenz übergeben werden, um den Detektor auszulösen, der die Änderung erkennt.

Um Fehler in den Verfahren zur Änderungserkennung zu vermeiden, kann die Anwendung überall mit onPush- Änderungserkennung durch die Verwendung von unveränderlichen Objekten und Listen erstellt werden. Die Änderung von unveränderlichen Objekten kann durch die Erstellung einer neuen Objektreferenz erfolgen und somit:

• Bei jeder Änderung wird die onPush- Änderungserkennung ausgelöst.
• Es wird immer ein neuer Objektverweis erstellt, der die Entstehung von Fehlern verhindert.

In solchen Fällen kann die Immutable.js verwendet werden, da sie unveränderliche Datenstrukturen für Objekte (Map) und Listen (List) enthält.

• Durch Hinzufügen des changeDetection -Parameters in der Komponentenanmerkung wird die onPush-Strategie implementiert. Anstatt jedes Mal neue Referenzen zu übergeben, kann die ChangeDetectorRef auch zur vollständigen Kontrolle verwendet werden.

ChangeDetectorRef.detectChanges()

• Die Methode der Änderungserkennung kann manuell mit Methoden zum Trennen und erneuten Anfügen in changeDetectorRef angefügt oder getrennt werden.

ChangeDetectorRef.detach() und Unveränderlich.js

Bei Verwendung der onPush-Strategie zur Änderungserkennung ist es immer eine gute Idee, wenn Unveränderlichkeit erzwungen wird. In solchen Fällen wird Immutable.js verwendet.

Die immutable.js ist eine Bibliothek, die erstellt wurde, um Unveränderlichkeit in JavaScript zusammen mit unveränderlichen Datenstrukturen wie List, Stack und Map zu integrieren.

Um Immutable.js in den Projekten hinzuzufügen, muss der folgende Befehl im Terminal verwendet werden. Erfahren Sie mehr über Winkelprojekte.

$ npm install unveränderlich – speichern

Um die Datenstrukturen aus Immutable.js zu importieren, muss der folgende Befehl verwendet werden. Der Befehl zeigt, dass in diesem Fall nur die Listen- und Kartendatenstrukturen importiert werden.

importiere {Karte, Liste} aus 'unveränderlich' Es kann auch ein Array verwendet werden.

Auch wenn Immutable.js verwendet wird, sind einige Nachteile damit verbunden.

• Die Verwendung der API ist etwas umständlich.
• Schnittstellen zum Datenmodell können nicht implementiert werden, da die Bibliothek Imutable.js keine Schnittstellen unterstützt.

Lernen Sie Softwarekurse online von den besten Universitäten der Welt. Verdienen Sie Executive PG-Programme, Advanced Certificate-Programme oder Master-Programme, um Ihre Karriere zu beschleunigen.

Zusammenfassung

Der Artikel hat Ihnen den Mechanismus der Änderungserkennung und die Strategien vorgestellt. Angular führt standardmäßig eine Änderungserkennung für alle Komponenten durch. Außerdem kann ChangeDetectorRef angewendet werden, um Änderungen in den neuen Referenzen zu erkennen, wenn die Daten mutiert werden. Die Nachfrage nach eckiger Entwicklung steigt weiter, was zu einem eckigen Entwicklergehalt in Indien führt.

Wenn Sie mehr über Softwaretechnologie, ihre Entwicklung und die Mechanismen dahinter erfahren möchten, können Sie den von upGrad angebotenen Kurs Executive PG Program in Software Development – ​​Specialization in Full Stack Development besuchen. Der Spezialisierungskurs ist ein 23-wöchiges Online-Programm, das über 300 Fallstudien bietet, um Ihr Wissen zu erweitern, und verfügbare Tools und Programmiersprachen, um Ihre praktischen Fähigkeiten zu verbessern. Wenn Sie weitere Fragen zum Kurs haben, schreiben Sie uns eine Nachricht. Unser Team wird Sie kontaktieren.