html - Angular 有效地使用 trackBy 和 ngFor

标签 html angular performance ngfor

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

最佳答案

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

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

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

关于html - Angular 有效地使用 trackBy 和 ngFor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49881607/

相关文章:

javascript - anchor 标签掉到页面底部

javascript - 是否可以用不同颜色的图标更改 recaptcha 图标?

javascript - Div 到达顶部时粘在顶部并且仅在向上滚动时显示

css - 如何在 Angular2 应用程序中创建粘性页脚?

javascript - 当构造函数有参数时 Angular 2 中的依赖注入(inject)

mysql - 防止查询使用索引

html - 更改实时网站上的高度属性?

angular - 与cordova成 Angular location.back路由问题

php - 如何处理从一个客户端到一个 PHP 脚本的多个并行请求

java - 我不可能理解所描述的字符串搜索方法。什么是 uFFFF?