Tut ngFor Richtlinie neu Rendern gesamte array auf jede mutation?

Sagen wir, wir haben ein array von Elementen:

items = [
    { title: 'item 1'},
    { title: 'item 2'},
    /* ... */
];

Und es ist eine Vorlage, macht dieses array:

<ul>
    <li *ngFor="let item of items">{{item.title}}</li>
</ul>

Wll angular2 rerender die ganze Palette wenn ich die Elemente hinzufügen/entfernen über push/splice oder wird es nur hinzufügen/entfernen der markup-Code für die entsprechenden Elemente? Wenn es nicht nur updates, dann gibt es einen Unterschied zwischen mutation stategies -- sollte ich lieber push/splice-over-array ersetzen? In anderen Worten, sind diese beiden Ansätze äquivalent im Begriff der rendering-Leistung:

/* 1: mutation */
this.items.push({ title: 'New Item' });

/* 2: replacement */
var newArray = this.items.slice();
newArray.push({ title: 'New Item' });

this.items = newArray;
InformationsquelleAutor admax | 2017-02-15
  1. 14

    Kein re-rendert nur, wenn das array selbst wird ersetzt durch ein anderes array-Instanz.

    update

    Dank Olivier Boissé (siehe Kommentare)

    Auch wenn ein anderes array-Instanz übergeben wird, Eckig erkennt, wenn es enthält die gleichen Element-Instanzen und nicht rerender auch dann.

    Siehe auch diese StackBlitz Beispiel

    Wenn die verwendeten IterableDiffer erkennt und das hinzufügen oder entfernen am Anfang oder in der Mitte, dann wird ein Element eingefügt/entfernt von jenem Ort, ohne re-rendering alle anderen Elemente.

    Den Animationen gezeigt, in Plunkers in den Antworten zu dieser Frage Wie kann ich mich animieren *ngFor im Winkel 2? auch zeigen. In der Tat ist diese Art der animation war ein treibender Faktor, um dies umgesetzt auf diese Weise (neben der Allgemeinen Optimierung)

    • Eckige nicht neu gerendert, die Elemente, die vorhanden waren, in der vorherigen array-Instanz.
    • das ist, was meine Antwort zu sagen versucht. Wenn der array-Instanz wird ersetzt durch eine andere mit dem gleichen Inhalt, ich bin mir ziemlich sicher, dass es komplett neu machen, ansonsten, wie du gesagt hast, machen wird es nur ergänzte Positionen und halten Sie die DOM-Elemente für diejenigen, die in das array zuvor.
    • Ereignis mit einer neuen Instanz ist es nicht komplett neu Rendern, getestet habe ich es durch exloring der DOM, ich habe eine neue - array und die Elemente werden nicht erneut gerendert wurden, weil Sie sich bereits dort, der in der vorhergehenden
    • Sie haben nicht zufällig eine stackblitz.com Beispiel zu reproduzieren?
    • https://stackblitz.com/edit/angular-dncqm2 kontrollieren Sie die ersten beiden <p> Sie werden sehen, dass Sie nicht re-Rendern
    • vielen Dank. Scheint IterableDiffer wurde verbessert sogar noch mehr seit ich das Letzte mal versucht. Ich Hinzugefügt einige CSS-animation das Beispiel, das Sie zur Verfügung gestellt, um es noch deutlicher.
    • Ich denke, Eckig vergleicht mit der === - operator, weil wenn ich ersetzen die vorhandenen Dateien, indem neue Objekte (mit den gleichen Eigenschaften/Werte), werden die Elemente neu gerendert
    • Für die Elemente, die definitiv-Objekt-id verwendet wird. Angular change detection nie kümmert sich um Objekt-Inhalt (außer, wenn es direkt an eine Eigenschaft). *ngFor hängt nicht von change-detection-allein, weil es nutzt die IterableDiffer zu finden, Veränderungen in ein Objekt (array), aber es wird auch nur geprüft, Objekt-Identität der Elemente in den array, nicht deren Eigenschaften oder Werte.

    InformationsquelleAutor Günter Zöchbauer
  2. 18

    Zusätzlich zu Gunter ' s Antwort, wenn Sie wissen möchten, welcher Teil der UI gerendert/neu gerendert, Sie können mit Chrom (sogar unabhängig von jeder lib/framework) :

    • Öffnen Sie das debug-panel
    • Menü (debug panel) /Weitere Werkzeuge /Rendern

    Sollten Sie sehen dann den folgenden Bildschirm :

    Tut ngFor Richtlinie neu Rendern gesamte array auf jede mutation?

    Umschalten der Paint Flashing option auf, und haben Sie etwas Spaß mit Ihrer Liste.

    Wenn ein Bereich grün blinkt, es wurde gemalt /neu lackiert ?.

    EX : Wenn Sie die Plunkr in Gunter ' s Antwort: http://plnkr.co/edit/oNm5d4KwUjLpmmu4IM2K?p=preview, und setzen Sie die Paint Flashing auf, fügen Sie einen Punkt auf der Liste und du wirst sehen, dass die vorherigen Gegenstände nicht flash. (das bedeutet, es gibt kein repaint).

    InformationsquelleAutor maxime1992
Schreibe einen Kommentar