Angular:使用 "trackBy: index"是好的做法吗？

Question

在 ngFor 中使用“trackBy: index”是不是一个好习惯？

例如:

<li *ngFor="let error of fileErrors.value; trackBy : index;"> {{error}} </li>

在所有 *ngFor 中每次都需要使用 trackBy 来提高性能，否则我们可以忽略它。

如果我们忽略，那么默认情况下将使用什么迭代器实现？

Answer 1

Using every time trackBy is necessary in all *ngFor for performance improvement or we can ignore it.

首先，我想说的是，花时间进行微优化可能会浪费大量时间，并且最终不会产生真正的性能结果。通常最好将重点放在良好的编码实践/约定上，然后在开发周期结束时，当您可以正确识别瓶颈时，再转向性能。

但是，在 Angular 中处理大型集合时，最好使用 trackBy。如果你不这样做，那么 Angular 需要删除所有与数据关联的 DOM 元素并重新创建它们。这意味着大量的 DOM 操作，尤其是在大型集合的情况下，而且正如我们所知，DOM 操作是昂贵的。

这让我们想到了您的问题:

Angular: Is using “trackBy: index” good practice?

答案是，视情况而定，并不是所有的 ngFor 指令都需要它。根据具体情况适当使用 trackBy。如果您处理的是小型数据集合，那么您真的不会注意到太多性能提升，而且您将再次进行过早的优化，这可能不会产生任何显着的性能提升。

根据后续评论进行编辑:

What happen if we use in every *ngFor? Even if the collection is not so big?

使用 trackBy 将导致 Angular 跟踪根据唯一标识符添加或删除了哪些项目，并仅创建或销毁已更改的项目。如果您决定这样做，则可以在每个 ngFor 中使用 trackBy。只是没有必要，而且性能提升在小型集合中可能可以忽略不计。