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 //当检测到索引发现改变的时候回重新渲染
}

来自为知笔记(Wiz)