2016-04-12 9 views
1

Ich habe viele Artikel über Änderungserkennung gelesen, aber habe kein klares Bild bekommen, wie es funktioniert und rendert. Wie in react haben wir virtuellen dom und diff-Algorithmus, der nur einen Teil der UI rendert, der durch das Erstellen von dom patch geändert wurde, also ähnlich wie angular weiß, welcher Teil der UI geändert werden muss.Wie rendert angular2 die Anzeige nach der Änderungserkennung?

Wie entscheidet die Änderungserkennung, welche Änderung in der Ansicht angezeigt/ersetzt wird?

Antwort

3

Jede Komponente verfügt über ein zugeordnetes Änderungsdetektorobjekt, das Angular zur Laufzeit erstellt. Das Änderungsdetektorobjekt verfolgt alle Vorlagenbindungen. Wenn die Änderungserkennung ausgeführt wird, überprüft sie standardmäßig jede Vorlagenbindung in jedem Änderungsdetektorobjekt –, d. H. Sie vergleicht den vorherigen Wert mit dem aktuellen Wert. Wenn eine Änderung erkannt wird, wird der neue Wert an das DOM weitergegeben. Wenn es nur eine Änderung gab, wird nur ein Teil des DOM aktualisiert. Die gesamte Ansicht wird nicht neu gerendert, wenn eine Änderung gefunden wird ... nur der Teil, der geändert wurde, ist betroffen.

Meine längere Antwort: https://stackoverflow.com/a/34570122/215945

+0

Wenn ich ein Raster mit bearbeitbaren Zelle haben (Zelle ist selbst eine Komponente) und i den Wert der Zelle aktualisiert haben, so ist es nur Zell Teil oder das gesamte Gitter wieder machen? Tatsache ist, dass die Aktualisierung des Zellenwerts auch den Gitterzustand ändern wird. – Akhlesh

+1

@Akhlesh, es kommt alles darauf an, was die Bindungen in den Ansichten sind. Wenn sich nur die Bindung einer Zellkomponente geändert hat (weil sich nur ein Zellwert geändert hat), wird nur das DOM dieser Zelle mit dem neuen Wert aktualisiert. Wenn das Raster den Wert dieser Zelle in seiner Ansicht verwendet, wird das mit dem Raster verknüpfte DOM ebenfalls aktualisiert. Aber in Ihrem Fall klingt es so, als würde nur das DOM der einen Zelle aktualisiert werden. Nur weil sich der Gesamtzustand des Gitters ändert (weil sich eine Zelle geändert hat), bedeutet das nicht, dass Angular das gesamte Gitter neu rendert. Es ist nicht wie andere Frameworks in dieser Hinsicht. Es ist effizienter. –

+0

@Akhlesh, wenn Ihre Zellenkomponenten Blattkomponenten sind (dh sie haben keine eigenen untergeordneten Komponenten) und sie nur auf eine primitive Eingabeeigenschaft für ihren Wert (dh eine Zeichenfolge oder eine Zahl) angewiesen sind, sollten Sie 'verwenden OnPush "[Erkennungsstrategie ändern] (https://angular.io/docs/ts/latest/api/core/ChangeDetectorRef-class.html), um die Überprüfung Ihrer Zellen effizienter zu gestalten. –