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

小云云
リリース: 2023-03-19 21:08:01
オリジナル
1520 人が閲覧しました

この記事では、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 を振り返ることができます)。

関連する推奨事項:

PHP は opcache によってパフォーマンスを向上させます

PHP プログラミングの習慣 PHP プログラミングの効率を向上させるキャッシュ メカニズムを導入してパフォーマンスを向上させます

PHP プログラミングの効率を向上させるキャッシュ メカニズムを導入してパフォーマンスを向上させる_PHP チュートリアル

以上がAngular が trackBy を使用してパフォーマンスを向上させる方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!