Angular で trackBy を使用してパフォーマンスを向上させる方法-jsチュートリアル-php.cn

Angular で trackBy を使用してパフォーマンスを向上させる方法

亚连

リリース： 2018-06-09 11:43:44

オリジナル

1592 人が閲覧しました

この記事では、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 はどの項目が変更されたかを認識します: