ホームページ >バックエンド開発 >PHPチュートリアル >Angular が trackBy を使用してパフォーマンスを向上させる方法の詳細な説明

Angular が trackBy を使用してパフォーマンスを向上させる方法の詳細な説明

小云云オリジナル: 2018-02-03 11:06:051646ブラウズ

この記事では、Angular でのパフォーマンスを向上させるために trackBy を使用する実装方法を主に紹介します。必要な方は参考にしていただければ幸いです。

Angular テンプレートでコレクションを走査するときは、次のように記述します:

<ul>
 <li *ngFor="let item of collection">{{item.id}}</li>
</ul>

バックエンドインターフェイスから新しいデータを返すなど、このコレクションを変更する必要がある場合があります。次に問題が発生します。Angular はこのコレクション内の項目を追跡する方法がわからず、どの項目を追加する必要があり、どの項目を変更する必要があり、どの項目を削除する必要があるのかもわかりません。その結果、Angular はコレクションからすべての項目を削除し、再度追加します。このように:

これの欠点は、大量の DOM 操作を実行することになり、DOM 操作はパフォーマンスを非常に消費することです。

そして、解決策は、*ngFor に trackBy 関数を追加して、コレクションの各項目を追跡する方法を Angular に指示することです。 trackBy 関数には 2 つのパラメータが必要です。1 つ目は現在の項目のインデックスで、2 つ目は現在の項目で、次のように一意の識別子を返します:

import{ Component } from &#39;@angular/core&#39;;

@Component({
 selector: &#39;trackBy-test&#39;,
 template: `
 <ul><li *ngFor="let item of items; trackBy: trackByIndex">{{item.name}}</li></ul>
 <button (click)="getItems()">Get Items</button>
 `
})
export class TrackByCmp{
 items: any[]=[];
 constructor(){
  this.items = [{name:&#39;Tom&#39;},{name:&#39;Jerry&#39;},{name:&#39;Kitty&#39;}];
 }
 getItems(){
  this.items = [{name:&#39;Tom&#39;},{name:&#39;Jerry&#39;},{name:&#39;Mac&#39;},{name:&#39;John&#39;}];
 }
 trackByIndex(index, item){
  return index;
 }
}

これを実行すると、Angular はどの項目が変更されたかを認識します。現在:

DOM は変更および追加された項目のみを再描画することがわかります。また、ボタンを再度クリックしても再描画されません。ただし、trackBy 関数が追加されていない場合でも、ボタンを繰り返しクリックすると再描画がトリガーされます (最初の GIF を振り返ることができます)。

Angular が trackBy を使用してパフォーマンスを向上させる方法の詳細な説明

関連記事