在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就知道哪些項變更了：

咱們能夠看到，DOM只重繪了修改和增長的項。並且，再次點擊按鈕是不會重繪的。可是在沒有添加trackBy函數的時候，重複點擊按鈕仍是會觸發重繪的（能夠回頭看第一個GIF）。
以上是所有內容！