我应该何时以及如何在 Angular 的 ngFor 指令中使用 trackBy 以获得最佳性能？

Question

我正在寻求有关使用 trackBy 函数与 Angular 的 ngFor 指令来增强性能的说明。虽然我了解 ngFor 的基础知识及其通过数组迭代来生成模板，但我不确定应该使用 trackBy 的具体场景和方法。

这是我尝试过的：

我已经阅读了trackBy上的Angular文档，但我仍然不清楚它的实际应用。 我已经在我的 Angular 项目中尝试过 ngFor 循环，但我不确定 trackBy 的必要性和正确实现。

我期待清楚地解释何时以及为何在 ngFor 循环中使用 trackBy 是有益的。 我想了解与使用或不使用 trackBy 相关的任何潜在的性能改进或陷阱。 说明在 ngFor 循环中有效使用 trackBy 的示例或演示将非常有益。 任何有关此事的指导或见解将不胜感激。谢谢！

Answer 1

ngFor 循环数组并生成重复模板。

当用于制作模板的数据对象发生更改时，

ngFor

有两个选项。

1. 重新渲染整个重复元素
2. 仅重新渲染发生更改的元素。

所以让我们看一个例子

array1 = [{test:1},{test:1}{test:1},{test:1}]; // this array is used for ngFor
    
    
//next an api call updates array1 //emulates an API call 
of([{test:1},{test:1}{test:1},{test:1}]).subscribe(() => {
    this.array1 = [{test:1},{test:1}{test:1},{test:1}];
});

因此，当您从

ngFor

的角度来看时，它一开始就收到了一个输入数组，正如您所知，JavaScript 数组存储为引用阅读更多对内存中数组位置的一些引用。

当进行API调用时，一个新的数组被分配给

array1

，但是从

ngFor

的角度来看，将会传入一个新的引用，所以自然

ngFor

必须重新渲染整个数组，因为它不知道什么数组内部发生了变化。

当您使用

ngFor

指定

trackBy

时，您指定了用于跟踪数组元素标识的键，这里是 id 更改，我们知道元素发生了变化，并且 Angular 的

differs

函数发生了变化捕捉变化并重新渲染。

要了解更详细的信息，请尝试探索

source code

Answer 2

trackBy 函数与 ngFor 一起使用，通过向 Angular 的更改检测机制提供有关如何跟踪列表中元素更改的提示来提高渲染列表的性能。

如果您要渲染包含大量项目的列表，请使用 trackBy 提高渲染性能。

如果列表中的数据可以动态更改，trackBy 可以帮助 Angular 高效地更新 DOM，而无需重新渲染所有项目。

在你的 component.ts 中

  items: any[] = [{id: 1, name: 'Item 1'}, {id: 2, name: 'Item 2'}, {id: 3, name: 'Item 3'}];

  trackById(index: number, item: any) {
    return item.id;
  }

在你的component.html中

<li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>