Wie funktioniert das ng-Repeat-Rendering unter der Haube?

Question

Ich bin ein Angularjs Rookie. Vor kurzem lese ich Führer in Angularjs Website und bekomme etwas Verwirrung.

In AngularJS API Dokument über ngRepeat, heißt es:

Wenn Sie mit Objekten arbeiten, die eine Kennung Eigenschaft haben, sollten Sie durch den Identifikator verfolgen anstelle des gesamten Objekts. Wenn Sie Ihre Daten später erneut laden, muss ngRepeat die DOM-Elemente für bereits gerenderte Elemente nicht erneut erstellen, selbst wenn die JavaScript-Objekte in der Sammlung durch neue ersetzt wurden. Bei großen Sammlungen verbessert dies die Renderleistung erheblich. Wenn Sie keinen eindeutigen Bezeichner haben, kann die Verfolgung nach $ index auch eine Leistungssteigerung bieten.

Ich verstehe nicht, diesen Inhalt:

Sollten Sie Ihre Daten nachladen später ngRepeat nicht die DOM-Elemente für Elemente wieder aufbauen müssen sie bereits geleistet hat, auch wenn die JavaScript-Objekte in der Sammlung wurde durch neue ersetzt.

Was bedeutet dieser Satz? Kannst du mir ein Beispiel geben? Vielen Dank!

Answer 1

ngRepeat Verhaltensänderungen mit und ohne track by.

Wenn die Sammlung Änderungen:

Ohne track by:

Angular den DOM wieder aufzubauen (zerstören und erstellen wieder jedes Element DOM).

Mit track by:

Angular das DOM-Element jedes Elements abzurufen und die Werte aktualisieren.

Als doc sagte:

Für große Sammlungen, dies verbessert die Leistung deutlich zu machen.

Dieses Verhalten ist in this article wirklich gut erklärt.

Answer 2

Sagen Sie haben ng-repeat zwei Elemente wie diese bauen:

<div></div> 
<div></div> 

Sie auf das Objekt drei weitere Elemente Dann fügen Sie diese zu bekommen:

<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 

Der Punkt ist, die ersten beiden divs werden nicht aus dem DOM entfernt und dann neu erstellt und neu eingefügt, aber nur die drei neuen werden hinzugefügt.

Das Gleiche gilt, wenn die ersten beiden Elemente Ihrer Objekte geändert wurden, aber das Element, nach dem sie verfolgt werden, gleich bleibt (daher empfehlen sie $ index) - die beiden DOM-Elemente (divs) wären immer noch intakt, nur ihre Inhalte ersetzt.

Natürlich gab es keinen Inhalt in dem Mini-Beispiel, das ich Ihnen gab, aber Sie bekommen den Punkt. Denken Sie an eine track by Variable als "Klebstoff", der DOM an Ort und Stelle hält.