この記事では、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 '@angular/core'; @Component({ selector: 'trackBy-test', 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:'Tom'},{name:'Jerry'},{name:'Kitty'}]; } getItems(){ this.items = [{name:'Tom'},{name:'Jerry'},{name:'Mac'},{name:'John'}]; } trackByIndex(index, item){ return index; } }
これを実行すると、Angular はどの項目が変更されたかを認識します。現在:
DOM は変更および追加された項目のみを再描画することがわかります。また、ボタンを再度クリックしても再描画されません。ただし、trackBy 関数が追加されていない場合でも、ボタンを繰り返しクリックすると再描画がトリガーされます (最初の GIF を振り返ることができます)。
関連する推奨事項:
PHP は opcache によってパフォーマンスを向上させます
PHP プログラミングの習慣 PHP プログラミングの効率を向上させるキャッシュ メカニズムを導入してパフォーマンスを向上させます
PHP プログラミングの効率を向上させるキャッシュ メカニズムを導入してパフォーマンスを向上させる_PHP チュートリアル
以上がAngular が trackBy を使用してパフォーマンスを向上させる方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。