在Angular中，当我们使用 *ngFor 指令来迭代一组数据时，有时候会遇到性能问题。比如说我们有一个列表，其中会经常添加、删除、修改数据，这时候每次数据变更都会触发视图更新，导致程序效率低下。那么，有没有一种方法可以仅更新实际变化的部分，来提高列表渲染的性能呢？
针对这个问题，Angular提供了一个名为 IterableDiffers 的工具，可以帮助我们优化iterator的性能。
IterableDiffers 简介
IterableDiffers是Angular的变更检测器之一，可以比较数据列表中的每一项，以便快速检测出哪些项已经改变。其内部实现了几个Differs类，分别比较不同类型的数据集合。
其中，最常用的是 IterableDiffers 类，这个类可以比较任何可迭代的对象（比如数组、Map、Set等）。具体来说，当当我们绑定 *ngFor 指令表达式时，Angular会自动创建一个默认的 IterableDiffers 实例，用于检测数据列表项的变化。不过，当列表数据发生变化时，Angular默认会尝试对整个列表进行重新渲染，这样就导致了渲染效率的低下。
如何使用 IterableDiffers 优化性能
我们可以通过自定义 IterableDiffers 来检测实际需要更新的部分，从而高效地渲染数据列表。下面是一个使用 IterableDiffers 的简单实例：
-- -------------------- ---- -------
------ - ---------- ------ ---------------- ----------- ------------ ----------------- ------- - ---- ----------------
------------
--------- ---------------
--
------ ----- ----------------- ---------- ------- -
-------- ------------------- -------
-------- ------------ ----- - ---
----------- ----
------------
------- ----------- -----------
------- ---------------- ----------------
------- ------------ -----------------
------- ----------------- ----------------
- -
--------------- - -------------------------------------------
-
------------ ---- -
----- ------- - ---------------------------------------
-- --------- -
--------------------------------- -- -
-----------------------------------------
-----------------
- ---------- ------------ ------ ------------------- -
--
---
----------------------------------- -- -
----- ------------- - ------------------------------------------------
-- --------------- -
---------------------------------------------------
-
---
-
-
-上面这个指令被放到 *ngFor 周边的节点上，它监控一个数据源数组 appIterable，如果数据有变化就根据变化重新渲染视图。
使用 IterableDiffers 进行渲染优化的主要步骤如下：
第一步，获取一个可用于检测数据改变的 IterableDiffer 实例。在上面的例子中，这个实例是通过调用 iterableDiffers.find([]).create(null) 方法创建的。
第二步，当列表数据发生变化时，会调用 ngDoCheck 方法。在 ngDoCheck 方法中，我们通过调用 IterableDiffer 实例的 diff 方法来获取数据变化的信息。diff 方法返回的数据类型是 IterableChanges。
第三步，根据得到的变化信息，将视图中变化的部分重新渲染。如上面的实例代码中，我们可以通过检测新增或删除的项，加入或删除子节点，并更新对应位置的数据。
总结
IterableDiffers 是Angular中优化性能的重要工具，特别适用于数据量比较大的场景。通过选择 IterableDiffers，我们可以精细地控制数据变更带来的视图更新，从而提高应用的渲染效率。同时，通过重写 IterableDiffers，我们可以轻易地将这个功能扩展到其它复杂的数据对象，以适应更加复杂的业务需求。
以上是Angular中使用 IterableDiffers 优化性能的一些介绍和实践方法。希望能对大家学习Angular有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496811048841e98943ace15