Angular-使用好NgForOf的trackBy带来性能上的提升

首发于： zhuanlan.zhihu.com/c_106067616…

官方文档，查看“变更的传导机制”即有详细的表述：

即使数据没有变化，迭代器中的元素标识符也可能会发生变化。比如，如果迭代器处理的目标是通过 RPC 从服务器取来的， 而 RPC 又重新执行了一次。那么即使数据没有变化，第二次的响应体还是会生成一些具有不同标识符的对象。Angular 将会清除整个 DOM， 并重建它（就仿佛把所有老的元素都删除，并插入所有新元素）。这是很昂贵的操作，应该尽力避免。

NgForOf - Angular 官方文档

那么如何来避免呢？

要想自定义默认的跟踪算法， NgForOf支持trackBy选项。trackBy接受一个带两个参数（index和 item）的函数。 如果给出了trackBy，Angular 就会使用该函数的返回值来跟踪变化。

可惜官网提供的例子无法运行，自己来个例子似乎会更好理解：

1. 假设有这样的一个html

<a (click)="add()">添加</a>
<ul>
  <li 
    *ngFor="let i of arr; index as ii; trackBy: trackFunc">
    {{i.id}} / {{ i.name }}
   </li>
</ul>复制代码

2. 然后来点ts

arr = [
  { id: 1, name: 'a' },
  { id: 2, name: 'b' },
  { id: 3, name: 'c' },
  { id: 4, name: 'e' }
];

trackFunc = (index, item) => {
  // 改变这里查看页面dom刷新状况
  return index;
  // return 'xxx';
  // return item.id;
  // return item.name;
 };

 add() {
   const last = this.arr[this.arr.length - 1];
   this.arr.unshift({
     id: last.id, // 新加的元素id与开始定义的最后一个元素id相同，请注意！
     name: Math.random().toString() // 新加的元素name是随机字符
   });
 }复制代码

3. 运行

以不停的往数组开始插入元素，查看页面刷新的情况。

（1）return index;

刷新全部li

（2）return item.id;

只会刷新id相同的li

（3）return item.name;

只会刷新name变化的li

（4）return 'xxx'; 纯粹搞事情。。。

情况跟return index一样，刷新全部的li

通过以上的实践可知：

（1）return index: 数组索引变化触发刷新。

（2）return item.id: 最后个元素Id与新增的元素id相同，但也在刷新；但id为1，2，3的元素，从未刷新；似乎这里只能从源码中一探究竟。

（3）return item.name: name属性变化触发了刷新。

（4）return 'xxx': 返回与index和item都不相关的固定值，也会触发全部刷新。

抛开第二点得出一个猜测结果：使用trackBy的好处是自定义返回跟踪结果，以比对上次的跟踪结果，如果不一样，那么就刷新变化的页面实例（减少不必要的dom刷新而带来性能的提升）。

附上一个关于ngFor如何实现的回答： stackoverflow.com/questions/4…

最终附上在线代码： stackblitz.com/edit/angula…

转载于:https://juejin.im/post/5cc56dd26fb9a0322861726f