angualr2+ 性能优化-trackBy

1、使用trackBy提高性能
为什么使用trackBy进行性能优化,在平时的开发中,我们对数组的处理基本都是通过接口获取新的数组进行替换或push,但是在这个过程中,Angular不知道你是要做什么操作,新增、修改或删除。导致的结构就是Angular会把数组中全部的数据清除之后再重新添加新赋值的数据,这个时候浏览器会进行大量的DOM操作,众所周知,在操作DOM的时候是非常消耗性能的,所以才提出trackBy函数。
例子:正常的数据赋值
只有数组最后一条发生了变化,但是在修改的时候,整个DOM树全部需要删除,并重新创建他们,在数据量特变庞大的时候,这种DOM操作是非常昂贵的
解决方案:使用trackBy函数
我们可以通过提供的trackBy功能辅助Angular跟踪添加或者删除数据。trackBy会将索引和当前的item作为参数,并需要返回此项的唯一标识符



-------------------------------------此部分放在html中----------------------------------------------
<div *ngFor="let item of collection;let i= index;trackBy: trackByFn">{{item.id}}{{item.name}}</div>
<button (click)="getItems()">刷新</button>

-------------------------------------此部分放在ts中-------------------------------------------------
public
indexName = 0;
public collection = [{id: 1, name: '张三'}, {id: 2, name: '张三'}, {id: 3, name: '张三'}];

getItems() {
this.collection = [{id: 1, name: '张三'}, {id: 2, name: '张三'}, {id: 4, name: '张三' + this.indexName++}];
}

trackByFn(index: any, item: any) {
// 当您更改集合时,Angular可以根据唯一标识符跟踪已添加或删除的项目,并仅创建或销毁已更改的项目
// return item.id || item.name; //当检测到对象中的id或者name发生变化的时候,相对应的数据才会修改,未发生变化的数据不会重新渲染
return index; // or item.id //当检测到索引发现改变的时候回重新渲染
}




posted @ 2021-04-21 15:25  攀上顶峰  阅读(265)  评论(0编辑  收藏  举报