Angular:是否使用“ trackBy:索引”的良好做法?

时间:2018-12-19 14:40:17

标签: angular design-patterns iterator

在ngFor中使用“ trackBy:索引”是一种好习惯吗?

例如:

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

所有* ngFor每次都需要使用trackBy来提高性能,或者我们可以忽略它。

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

1 个答案:

答案 0 :(得分:3)

  

所有* ngFor每次都需要使用trackBy来提高性能,或者我们可以忽略它。

首先,我要说的是,花时间进行微优化可能会浪费大量时间,并且最终不会对性能产生任何实际影响。通常最好将重点放在良好的编码实践/惯例上,然后在开发周期结束时围绕性能提高,以便您可以正确识别瓶颈。

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

哪个带给我们您的问题:

  

角度:使用“ trackBy:索引”的好习惯吗?

答案是,取决于所有ngFor指令中不是必需的。视情况适当使用trackBy。如果您处理的是少量数据,那么您实际上不会注意到很多性能提升,并且您将再次进行过早的优化,这可能不会带来任何明显的性能提升。

根据后续评论进行编辑:

  

如果我们在每个* ngFor中使用该怎么办?即使收藏不是那么大?

使用trackBy将导致Angular跟踪根据唯一标识符添加或删除的项目,并仅创建或销毁已更改的内容。如果您决定这样做,则可以在每个trackBy中使用ngFor。只是没有必要,而且在小型收藏中,性能提升可能微不足道。