web-dev-qa-db-ja.com

ngForディレクティブは、すべての変異で配列全体を再レンダリングしますか？

アイテムの配列があるとしましょう：

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

そして、この配列をレンダリングするテンプレートがあります：

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

Angular2は、Push/spliceを介して項目を追加/削除した場合、配列全体を再レンダリングしますか、または対応する項目のマークアップのみを追加/削除しますか？更新のみを行う場合、突然変異の状態に違いはありますか？配列の交換よりもプッシュ/スプライスを優先すべきですか？言い換えれば、これら2つのアプローチはレンダリングパフォーマンスの点で同等ですか。

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

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

this.items = newArray;
arraysangularngfor
17
admax

番号 、配列自体が別の配列インスタンスに置き換えられた場合にのみ再レンダリングされます。

更新

OlivierBoisséに感謝（コメントを参照）

別の配列インスタンスが渡された場合でも、Angularは、同じアイテムインスタンスが含まれているかどうかを認識し、それでも再レンダリングしません。

こちらもご覧ください StackBlitzの例

使用されたIterableDifferが最初または途中で認識および追加または削除された場合、アイテムは他のすべてのアイテムを再レンダリングせずにその場所に挿入/削除されます。

この質問の回答でPlunkersに示されているアニメーション * ngForをアニメーション化するにはどうすればよいですかangular 2？ もこのことを示しています。実際、この種のアニメーションは原動力となりましたこれをこのように実装するには（一般的な最適化に加えて）

17
Günter Zöchbauer

Gunterの回答に加えて、UIのどの部分がレンダリングまたは再レンダリングされるかを知りたい場合は、Chrome（lib/frameworkから独立している場合でも）使用できます）。

  • デバッグパネルを開く
  • メニュー（デバッグパネル）/その他のツール/レンダリング

次のパネルが表示されます。

enter image description here

Paint Flashingオプションをオンにして、リストを楽しんでください。
領域が緑色に点滅している場合、その領域は塗装/再塗装されていますか????。

EX：ガンターの答えでPlunkrを使用する場合： http://plnkr.co/edit/oNm5d4KwUjLpmmu4IM2K?p=preview とPaint Flashingオンにすると、リストにアイテムが追加され、前のアイテムが点滅しないことがわかります。 （つまり、再描画はありません）。

20
maxime1992