Angular如何利用trackBy提升效能詳解

本文主要和大家介紹了在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）。