在 Angular 中，*ngFor 是否需要 trackBy 函数？我看到几篇文章here、here、here 和here 说使用trackBy 会提高性能并具有更好的内存管理。但我想知道如果 trackBy 是这样的改进，那为什么它不是默认行为呢？它是默认行为吗？我正在查看的所有内容都已过时？
如果它不是默认行为，我的项目在 90 个组件中大约有 90 个 *ngFor，我想知道是否有一种方法可以在我不包含以下函数 90 次的情况下使用 trackBy。我还想避免添加服务并导入 90 次。
HTML
<mat-option *ngFor="let l of list; trackBy: trackByFn" [value]="l.id">
{{l.name}}
</mat-option>
TS
trackByFn(index, item) {
return index
}
【问题讨论】：
标签： html angular performance ngfor
给它一个测试类
export class Item {
id: number;
name: string;
}
并添加一个指令来监控它的初始化和销毁
@Directive({selector: '[appMonitor]'})
export class MonitorDirective implements OnInit, OnDestroy {
ngOnInit(): void {
console.log('init');
}
ngOnDestroy(): void {
console.log('destroy');
}
}
初始化数组
itemArray: Item[] = [
{id: 1, name: 'Tom'},
{id: 2, name: 'Joe'},
{id: 3, name: 'KK'}
];
改变数组内容的两个函数
allFoo(): void {
this.itemArray = [
{id: 1, name: 'Tom_foo'},
{id: 2, name: 'Joe_foo'},
{id: 3, name: 'KK_foo'}
];
}
allBar(): void {
this.itemArray = [
{id: 1, name: 'Tom_bar'},
{id: 2, name: 'Joe_bar'},
{id: 3, name: 'KK_bar'}
];
}
准备工作已经完成，到目前为止一切顺利。 首先让我们在没有 trackBy 的情况下进行测试
<div *ngFor="let item of itemArray " appMonitor>
Id: {{item.id}} Name:{{item.name}}
</div>
很明显，每次更改数组角度时都会相应地重新创建组件。让我们尝试 trackBy 这一次：
<div *ngFor="let item of itemArray ;trackBy:identify" appMonitor>
Id: {{item.id}} Name:{{item.name}}
</div>
身份：
identify(index: number, item: Item): number {
return item.id;
}
该组件正在重新使用。因此我们可以得出结论，使用trackBy可以节省在hmtl中创建相同组件的工作。
【讨论】：
请注意，您的示例都没有使用索引（除了一篇不可靠的媒体文章），它们都使用对象的唯一标识符，除非您告诉它，否则 Angular 不可能知道。
单独的返回索引有一个用例，但它相当罕见。它基本上告诉 Angular 永远不要重新渲染此列表中的现有项目，因为给定项目的索引永远不会改变。这对于开发人员来说通常是一个非常意外的行为，因为子组件的初始化生命周期钩子不会重新执行。尽管在没有子组件的 ngFor 中，这通常是安全的，但这些类型的列表通常性能更高，除非列表很长或经常更改，否则您不会看到太多好处。
trackBy 的想法是允许您重新初始化列表中需要它的项目，而不是重新初始化不需要的项目。它不是像某些人对待它那样盲目地提高性能的灵丹妙药，它的目的和功能应该被充分理解。请记住，仅仅因为一个项目具有唯一的 ID 并不意味着它适合在 trackBy 函数中使用。 trackBy 旨在告诉 angular 何时需要重新渲染项目，即当我需要重新运行那些生命周期挂钩时。如果 ID 保持不变，但内容可能会发生变化，这取决于您构建某个组件的方式，那么该组件可能仍需要重新初始化。
【讨论】：
return item.id。由于它是唯一标识符，那么我应该看到一些内存/性能增加？如果是这样，是否有一种更简洁的方式来使用 trackBy 而无需在每个组件中创建函数？
return item.id 函数的行数相同。我只是想看看是否有一种有效的方法来添加它而不必添加这么多行复制/粘贴的代码