在开发前端应用时，ngFor 是一个非常常见的指令。它使我们可以便捷地循环输出一份列表。但在某些情况下，当我们对列表进行更改时，ngFor 会重新渲染整个列表，这会带来性能问题。在本文中，我们将讨论如何利用 Angular 提供的惰性加载和 trackBy 来解决这个问题。
什么是 ngFor？
ngFor 是 Angular 中用于循环输出的指令。它的语法如下：
<ng-container *ngFor="let item of items; index as i">
<li>{{ i }} - {{ item }}</li>
</ng-container>在这个示例中，我们使用了 *ngFor 和 ng-container 标签来循环输出列表中的每一个项目。items 是我们要循环的数组，item 表示当前循环到的元素，i 表示当前元素的索引。
ngFor 的问题
当我们对列表进行更改时，ngFor 会重新渲染整个列表，这会带来性能问题。比如，当我们往列表中添加一个元素时，ngFor 会重新渲染整个列表，即使我们只添加了一个元素。
这是因为 Angular 是使用虚拟 DOM 渲染的，在重新计算虚拟 DOM 树时，每个元素都被当作一个新的元素处理，所以导致整个列表被重新渲染。
解决方法
为了解决这个问题，我们可以利用 Angular 提供的惰性加载和 trackBy。
惰性加载
惰性加载是指在获取数据时只加载部分数据，而不是一次性加载所有数据。这样可以大大提高性能。
Angular 中的惰性加载是通过 RxJS 中的 Observable 来实现的。我们可以在组件中定义一个 Observable，然后通过订阅来获取数据。这个过程是异步进行的，可以大大提高应用的性能。
这是一个使用惰性加载来获取数据的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- ------------------
------------
--------- -----------
--------- -
----
--- ----------- ---- -- ------ - --------- ---- -------
-----
--
--
------ ----- ------------ -
------- ---------------------
------------- -
----------- - ----------------------- -------- -------- ----------
-
-在这个示例中，我们先定义了一个 items$ Observable，然后在组件的构造函数中初始化了这个 Observable，这里的数据数组带有四个元素。我们将这个 Observable 传递给了模板中的 ngFor，调用了 async 管道处理器。
async 管道处理器把 Observable 转化为一个 Angular 的异步管道，这个管道会自动完成订阅和取消订阅。这样就可以实现惰性加载，而不是一次性加载所有数据。
trackBy
另一个解决 ngFor 渲染性能问题的方法是使用 trackBy。 通过使用 trackBy，我们可以告诉 Angular 该如何识别列表中的每个元素。这样 Angular 就可以在更新列表时只更新那些实际发生变化的元素，而不是重新渲染整个列表。
这是一个使用 trackBy 的示例：
<ul>
<li *ngFor="let item of items; trackBy: trackByFn">{{ item }}</li>
</ul>在这个示例中，我们定义了一个 trackByFn 函数，这个函数把列表中的元素映射成它们本身的值。这个函数将被传递给 ngFor 的 trackBy 参数，告诉 Angular 如何识别列表中的每个元素。
trackByFn(index: number, item: string) {
return item;
}在这个示例中，我们定义了一个 trackByFn 函数，它以两个参数：索引和元素的值。我们返回的是元素的值，这样 Angular 就可以根据元素的值来识别列表中的每个元素了。
示例代码
这是一个完整的示例代码，演示如何利用 Angular 提供的惰性加载和 trackBy 来解决列表渲染性能问题。
app.component.html：
<h1>Items</h1>
<button (click)="addItem()">Add Item</button>
<ul>
<li *ngFor="let item of items; trackBy: trackByFn">{{ item }}</li>
</ul>app.component.ts：
-- -------------------- ---- -------
------ - ---------- ----------------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------ -
------ -------- - ---
------------------- ------ ------------------ --
--------- -
---------------------------------------- - -----
---------------------------
-
---------------- ------- ----- ------- -
------ -----
-
-在这个示例中，我们定义了一个 items 数组，这个数组初始为空。当用户点击“Add Item”按钮时，我们会向这个数组中添加一个新的元素，并手动调用 cdRef.detectChanges() 方法，通知 Angular 更新视图。
在模板中，我们使用了 ngFor 来循环输出 items 数组中的每个元素，同时使用 trackBy 参数告诉 Angular 如何识别每个元素。
总结
在本文中，我们讨论了如何使用 Angular 提供的惰性加载和 trackBy 来解决 ngFor 循环重复渲染的问题。通过使用这些功能，我们可以大大提高我们前端应用的性能，提供更加流畅的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486ded148841e98945786da