1. 首页
  2. IT资讯

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

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

即使数据没有变化,迭代器中的元素标识符也可能会发生变化。比如,如果迭代器处理的目标是通过 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;

Angular-使用好NgForOf的trackBy带来性能上的提升
刷新全部li

(2)return item.id;

Angular-使用好NgForOf的trackBy带来性能上的提升
只会刷新id相同的li

(3)return item.name;

Angular-使用好NgForOf的trackBy带来性能上的提升
只会刷新name变化的li

(4)return 'xxx'; 纯粹搞事情。。。

Angular-使用好NgForOf的trackBy带来性能上的提升
情况跟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/quest

最终附上在线代码:stackblitz.com/edit/ang

原文始发于:Angular-使用好NgForOf的trackBy带来性能上的提升

主题测试文章,只做测试使用。发布者:酒颂,转转请注明出处:http://www.cxybcw.com/26114.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code