通过trackBy提高Angular *ngFor性能-详细内容

基本上，开发人员发出GET http获取远程数据的请求，然后通过* ngFor结构指令将此数据绑定到HTML。

但是，你有没有想过这个* ngFor指令的方法？

该指令将接收可迭代项数组作为输入，然后为该数组的每个项创建一个模板。

实际上，* ngFor导出一些局部变量用于当前迭代：

index：每个模板上下文的当前循环迭代。
first：布尔值，指示项是否是迭代中的第一个项。
last：布尔值，指示项是否是迭代中的最后一项。
even：表示此项目是否具有偶数索引的值。
odd：布尔值，指示此项目是否具有奇数索引。

将对象或元素数组传递给* ngFor时，该指令将元素绘制到DOM。但是这里的问题是当更改或修改这个数组的某个元素时，这些元素会从头开始重新绘制到DOM，这是一个非常昂贵且繁重的操作

默认情况下，当您使用* ngFor而不使用trackBy时，* ngFor会跟踪通过对象标识更改的对象数组。因此，如果将对象数组的新引用传递给指令，即使数组具有相同的值，Angular也无法检测到它们已经被绘制并呈现在当前DOM中。相反，将删除旧元素，并重新绘制具有相同值的新集合。

我听到有人问，“为什么Angular团队不将trackBy机制作为默认机制？”

实际上，* ngFor已经经过Angular团队的大量改进。他们的回答基本上是，“这是对象身份的* ngFor的基本实现。如果您要修改（添加，更新，删除或重新排序）* ngFor的任何元素，请通过向trackBy函数提供您的对象ID来更新跟踪算法。“

看看下面。

默认情况下，trackBy函数接受两个参数。这些参数是索引和元素本身。如果您来自React背景，这与Keys类似。如果您来自AngularJS背景，则会跟踪。