angular - 在 Angular ngFor 中应该调用 trackBy 多少次

Question

这个问题在这里已经有了答案:





function gets called several times

(3 个回答)


2年前关闭。




我已经开始使用 trackBy对于一些 ngFor在我的应用程序中进行迭代以提高性能。

调试时我注意到 trackBy函数被多次调用。我是在期望trackBy函数将被调用 1 x n 次，其中 n 是数组中的项目数。

我在模板中有一个简单的无序列表

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

我在 trackBy 中返回项目的 id功能

trackByFn(index, item): void {
    return item.id;
}

在这个 StackBlitz 中 trackBy函数在初始化时被调用 2 x n。 https://stackblitz.com/edit/angular-tm6zdh
在我的应用程序中，它甚至被调用了 7 x n 次。

函数被多次调用是否正常？

当函数被多次调用时，我应该担心性能吗？

另外，什么时候是 trackBy函数实际上是由 Angular 触发的？我问，因为在我的应用程序中 trackBy滚动页面时也会触发功能，这不会更新列表中的任何项目。我无法在 Stackblitz 中重现它

Answer 1

这是 Angular 的标准变更检测运行。添加 changeDetection: ChangeDetectionStrategy.OnPush到组件的声明应该减少 trackBy 的数量函数调用。