在 Angular 中，我们经常使用 ngFor 指令来循环渲染数据。但是，当数据量变大时，ngFor 指令会影响应用程序的性能，导致页面加载缓慢、卡顿等问题。为了解决这个问题，我们可以使用 trackBy 优化 ngFor 指令的性能。
什么是 trackBy？
trackBy 是 Angular 提供的一个指令，用于告诉 Angular 如何跟踪和更新列表中的每个元素。默认情况下，Angular 根据每个元素的引用来跟踪它们，这意味着如果两个元素具有相同的属性，但是它们的引用不同，Angular 会认为它们是不同的元素，从而重新渲染整个列表。而使用 trackBy 可以通过自定义比较函数来告诉 Angular 如何比较元素，从而避免不必要的重新渲染。
如何使用 trackBy？
使用 trackBy 很简单，只需要在 ngFor 中添加 trackBy 指令，然后传入一个比较函数即可。比较函数接收两个参数，第一个参数是当前元素的索引，第二个参数是当前元素的值。比较函数需要返回一个唯一的标识符，通常是当前元素的 id 或者其他唯一标识符。例如：
<ul>
<li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
</ul>trackByFn(index: number, item: any) {
return item.id;
}在上面的示例中，我们使用了 trackByFn 函数来返回每个元素的 id，从而告诉 Angular 如何跟踪和更新列表中的元素。
为什么要使用 trackBy？
使用 trackBy 可以大大提高 ngFor 指令的性能，尤其是当数据量很大时。当我们不使用 trackBy 时，Angular 会根据每个元素的引用来跟踪它们，这意味着如果我们更新了列表中的某个元素，Angular 会重新渲染整个列表，即使其他元素没有改变。而使用 trackBy 可以告诉 Angular 如何比较元素，从而只重新渲染发生变化的元素，从而提高性能。
trackBy 的注意事项
使用 trackBy 时需要注意以下几点：
比较函数需要返回一个唯一的标识符，通常是当前元素的
id或者其他唯一标识符。比较函数不能修改列表中的元素，否则可能会导致不可预料的结果。
如果列表中的元素发生了增加、删除、排序等操作，需要手动触发变更检测，否则可能会导致列表不一致的问题。可以使用
ChangeDetectorRef的markForCheck方法来手动触发变更检测。
示例代码
下面是一个简单的示例代码，演示了如何使用 trackBy 来优化 ngFor 指令的性能。在这个示例中，我们使用了一个 timer 来模拟每隔一秒钟更新一次列表。当我们不使用 trackBy 时，每次更新都会重新渲染整个列表，而使用 trackBy 后只会重新渲染发生变化的元素。
<ul>
<li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
</ul>-- -------------------- ---- -------
------ - ---------- ----------------- - ---- ----------------
------------
--------- -----------
--------- -
----
--- ----------- ---- -- ------ -------- ------------- --------- -------
-----
-
--
------ ----- ------------ -
----- - -
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- -
--
------------------- ---- ------------------ --
---------- -
-------------- -- -
---------- - -
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- -
--
------------------------
-- ------
-
---------------- ------- ----- ---- -
------ --------
-
-总结
使用 trackBy 可以大大提高 ngFor 指令的性能，尤其是当数据量很大时。使用 trackBy 需要注意比较函数的实现，以及在列表发生变化时手动触发变更检测。希望本文能够对大家了解和使用 trackBy 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e441411886fbafa405d0d1