Angular利用trackBy提升性能的方法

在Angular的模板中遍歷一個集合（collection）的時候你會這樣寫：

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：申請域名、網絡空間、營銷軟件、網站建設、甘州網站維護、網站推廣。

<ul>
 <li *ngFor="let item of collection">{{item.id}}</li>
</ul>

有時你會需要改變這個集合，比如從后端接口返回了新的數據。那么問題來了，Angular不知道怎么跟蹤這個集合里面的項，不知道哪些該添加哪些該修改哪些該刪除。結果就是，Angular會把該集合里的項全部移除然后重新添加。就像這樣：

這樣做的弊端是會進行大量的DOM操作，而DOM操作是非常消耗性能的。

那么解決方案是，為*ngFor添加一個trackBy函數，告訴Angular該怎么跟蹤集合的各項。trackBy函數需要兩個參數，第一個是當前項的index，第二個是當前項，并返回一個唯一的標識，就像這樣：

import{ Component } from '@angular/core';

@Component({
 selector: 'trackBy-test',
 template: `
 <ul><li *ngFor="let item of items; trackBy: trackByIndex">{{item.name}}</li></ul>
 <button (click)="getItems()">Get Items</button>
 `
})
export class TrackByCmp{
 items: any[]=[];
 constructor(){
  this.items = [{name:'Tom'},{name:'Jerry'},{name:'Kitty'}];
 }
 getItems(){
  this.items = [{name:'Tom'},{name:'Jerry'},{name:'Mac'},{name:'John'}];
 }
 trackByIndex(index, item){
  return index;
 }
}

這樣做之后，Angular就知道哪些項變動了：

Angular利用trackBy提升性能的方法