html - Angular 有效地使用 trackBy 和 ngFor

Question

在 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
}

Answer 1

请注意，您的示例都没有使用索引(除了一篇不可靠的媒体文章)，它们都使用了对象的唯一标识符，除非您告诉它，否则 Angular 不可能知道。

单独返回索引有一个用例，但这是一个相当不常见的用例。它基本上告诉 angular 不要重新渲染这个列表中的现有项目，因为给定项目的索引永远不会改变。这通常是开发人员非常意外的行为，因为子组件的初始化生命周期 Hook 不会重新执行。虽然在没有子组件的 ngFor 中这样做通常是安全的，但这些类型的列表通常性能更高，除非列表很长或经常更改，否则您不会看到太多好处。

trackBy 的想法是允许您重新初始化列表中需要它的项目，而不是重新初始化不需要的项目。它并不是像某些人对待的那样盲目提高性能的 Elixir ，应该充分理解它的目的和功能。请记住，仅仅因为一个项目具有唯一 ID 并不意味着它适合在 trackBy 函数中使用。 trackBy 旨在告诉 Angular 何时需要重新渲染项目，即何时需要重新运行那些生命周期 Hook 。如果 ID 保持不变但内容可能会发生变化，具体取决于您构建特定组件的方式，则该组件可能需要重新初始化。