Explication détaillée de la façon dont Angular utilise trackBy pour améliorer les performances

Cet article vous présente principalement la méthode d'implémentation d'utilisation de trackBy pour améliorer les performances dans Angular. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Lorsque vous parcourez une collection dans un modèle angulaire, vous écrivez :

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

Parfois, vous devez modifier cette collection, par exemple , renvoie de nouvelles données de l'interface backend. Ensuite, le problème survient, Angular ne sait pas comment suivre les éléments de cette collection, et ne sait pas lesquels doivent être ajoutés, lesquels doivent être modifiés et lesquels doivent être supprimés. En conséquence, Angular supprimera tous les éléments de la collection, puis les ajoutera à nouveau. Comme ceci :

L'inconvénient est qu'il effectuera un grand nombre d'opérations DOM, et les opérations DOM sont très gourmandes en performances.

Ensuite, la solution est d'ajouter une fonction trackBy à *ngFor pour indiquer à Angular comment suivre les éléments de la collection. La fonction trackBy nécessite deux paramètres, le premier est l'index de l'élément actuel, le second est l'élément actuel, et renvoie un identifiant unique, comme ceci :

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:&#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;
 }
}

Après cela, Angular saura quels éléments ont changé :

On voit que le DOM ne redessine que les éléments modifiés et ajoutés. De plus, cliquer à nouveau sur le bouton ne le redessinera pas. Mais lorsque la fonction trackBy n'est pas ajoutée, des clics répétés sur le bouton déclencheront quand même un redessin (vous pouvez revenir sur le premier GIF).

Recommandations associées :

PHP améliore les performances grâce à opcache

Les habitudes de programmation PHP améliorent l'efficacité de la programmation PHP et introduisent un mécanisme de mise en cache pour améliorer les performances

Améliorer l'efficacité de la programmation PHP et introduire un mécanisme de mise en cache pour améliorer les performances_PHP Tutorial

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!