Ändern Sie die Erkennung in Angular: alles, was Sie wissen müssen

Eingehende Analyse des Nachweismechanismus für Winkeländerung

In diesem Artikel wird Angulars Änderungserkennungsmechanismus eingehend untersucht, seine zugrunde liegenden Betriebsprinzipien enthüllen und Optimierungsstrategien bereitstellen. Im Internet finden Sie relativ wenig Informationen zu diesem Thema.

Kernkonzept: Ansicht (Ansicht)

Winkelanwendungen bestehen nicht nur aus Komponenten, sondern sehen Bäume. Jede Komponente entspricht einer Ansicht, die die grundlegende Einheit in der Winkel -UI -Architektur ist und für die Behandlung aller Eigenschaftsprüfungen und DOM -Updates verantwortlich ist. Die Beschreibung der Ansicht im Quellcode lautet wie folgt:

Ansicht ist der grundlegende Baustein der Anwendungs ​​-Benutzeroberfläche. Es ist die kleinste Gruppierung von Elementen, die zusammen geschaffen und zerstört werden.

Die Eigenschaften von Elementen in der Ansicht können geändert werden, aber die Struktur (Anzahl und Reihenfolge) von Elementen in der Ansicht kann nicht geändert werden. Das Ändern der Struktur eines Elements kann nur durch Einfügen, Bewegen oder Löschen verschachtelter Ansichten mit ViewContainerRef erfolgen. Jede Ansicht kann mehrere Ansichtsbehälter enthalten.

In diesem Artikel verwenden wir Komponentenansichten und Komponentenkonzepte austauschbar. Es ist zu beachten, dass viele Antworten von Webartikeln und Stapelüberlauf auf die hier als "Erkennungsobjekt" oder "veränderte tectorRef" beschriebene Ansicht bezeichnen. Tatsächlich gibt es kein separates Änderungserkennungsobjekt im Angular, die Änderungserkennung direkt auf der Ansicht.

Jede Ansicht ist über die Eigenschaft nodes mit ihrer Unteransicht verknüpft, sodass Aktionen auf der Unteransicht ausgeführt werden können.

Ansichtsstatus (ViewState)

Ansichten haben Zustände, die eine Schlüsselrolle bei der Entscheidung spielen, ob eine Änderungserkennung für eine Ansicht und alle Subviews ausgeführt werden sollen. Wichtige Zustände sind:

1. FirstCheck: Gibt an, ob die Ansicht die erste Überprüfung ist.
2. ChecksEnabled: Zeigt an, ob die Änderungserkennung der Ansicht aktiviert werden soll.
3. Errored: Gibt an, ob in der Ansicht ein Fehler aufgetreten ist.
4. Destroyed: Gibt an, ob die Ansicht zerstört wurde.

Wenn ChecksEnabled false ist oder die Ansicht im Zustand Errored oder Destroyed ist, wird die Änderungserkennung der Ansicht und deren Unteransicht übersprungen. Standardmäßig werden alle Ansichten mit ChangeDetectionStrategy.OnPush initialisiert, es sei denn, ChecksEnabled wird verwendet.

Angular liefert erweiterte Konzepte, um Ansichten zu manipulieren, wie z. Wenn ein asynchrones Ereignis auftritt, löst Angular die Erkennung der obersten Ebene aus, die die Unteransicht nach seiner eigenen Änderungserkennung rekursiv erkennt. ViewRef detectChanges Das ViewRef kann durch das ViewRef -Token in den Komponentenkonstruktor injiziert werden:

ChangeDetectorRef ViewRef Erkennungsbetrieb

<code class="language-typescript">export class AppComponent {
  constructor(cd: ChangeDetectorRef) { ... }
}</code>

ändern

checkAndUpdateView Funktionen sind die Hauptlogik, die für die Erkennung von Ansichtsänderungen verantwortlich ist. Die Funktion ruft sich rekursiv auf und beginnt mit der Hostkomponente und überprüft nacheinander jede Komponente und deren Unterkomponenten.

Wenn die Funktion abgefeuert wird, führt sie Operationen in der folgenden Reihenfolge aus:

1. set ViewState.firstCheck.
2. Überprüfen und aktualisieren Sie die Eingabeeigenschaften von Unterkomponenten/Anweisungen.
3. Aktualisieren Sie den Status "Unteransicht Änderungserkennung" (Teil der Umsetzung der Änderungserkennung).
4. Führen Sie die Änderungserkennung der eingebetteten Ansicht aus (wiederholen Sie die obigen Schritte).
5. Wenn sich die Bindung ändert, wird der OnChanges Lebenszyklushaken der untergeordneten Komponente aufgerufen.
6. ruft die OnInit und ngDoCheck Lebenszyklushaken des Unterkomponenten auf (OnInit wird nur bei der ersten Prüfung aufgerufen).
7. Aktualisieren Sie die Liste ContentChildren Abfrageliste der Unteransicht -Komponenteninstanzen.
8. rufen Sie die AfterContentInit und AfterContentChecked Lebenszyklushaken der Subcomponent -Instanz auf (AfterContentInit wird nur bei der ersten Prüfung aufgerufen).
9. Wenn sich die Eigenschaften der aktuellen Ansichtskomponenteninstanz ändern, aktualisieren Sie die DOM -Interpolation der aktuellen Ansicht.
10. Führen Sie die Änderungserkennung der Unteransicht aus (wiederholen Sie die obigen Schritte).
11. Aktualisieren Sie die Abfrageliste ViewChildren für die aktuelle Ansichtskomponenteninstanz.
12. rufen Sie die AfterViewInit und AfterViewChecked Lebenszyklushaken der Subcomponent -Instanz auf (AfterViewInit wird nur bei der ersten Prüfung aufgerufen).
13. Deaktivieren Sie die Überprüfung der aktuellen Ansicht (Teil der Umsetzung der Änderungserkennung).

Erkennungsstrategie und manueller Auslöser

ändern

ChangeDetectionStrategy.OnPush Die Richtlinie kann die Leistungsaufwand erheblich verringern, da sie nur Änderungenerkennung durchführt, wenn sich tatsächliche Daten ändern, z. B. Änderungen des Eingabungsattributs oder explizite Ereignisstarts.

ChangeDetectorRef stellt Methoden wie detectChanges(), markForCheck() und detach() bereit, um eine bessere Kontrolle der Änderungserkennung zu ermöglichen, insbesondere in großen und komplexen Anwendungen.

(Folgendes wird im Detail die Verwendungsmethode von ChangeDetectorRef und die Optimierungsstrategien für die Änderungserkennung einführen, einschließlich der spezifischen Anwendungsszenarien und Stichprobencodes der detach(), reattach(), markForCheck() und detectChanges() Methoden

(Der Rest des Artikels wird weiterhin untersuchen, wie diese Methoden verwendet werden, um die Leistung zu optimieren, und einige praktische Anwendungsszenarien und Code -Beispiele bereitstellen.)

(schließlich fasst der Artikel die häufig gestellten Fragen zur Erkennung von Winkeländerung, die Abdeckung von OnPush -Strategien, Änderungserkennungsoptimierungstechniken, die Rolle von Zonen und Methoden zur Debugging -Änderungserkennung zusammen.)

.

Das obige ist der detaillierte Inhalt vonÄndern Sie die Erkennung in Angular: alles, was Sie wissen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!