首頁 > 文章 > 後端開發 > Angular如何利用trackBy提升性能詳解

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

小云云原創: 2018-02-03 11:06:051522瀏覽

本文主要和大家介紹了在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 &#39;@angular/core&#39;;

@Component({
 selector: &#39;trackBy-test&#39;,
 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:&#39;Tom&#39;},{name:&#39;Jerry&#39;},{name:&#39;Kitty&#39;}];
 }
 getItems(){
  this.items = [{name:&#39;Tom&#39;},{name:&#39;Jerry&#39;},{name:&#39;Mac&#39;},{name:&#39;John&#39;}];
 }
 trackByIndex(index, item){
  return index;
 }
}

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

我們可以看到，DOM只重繪了修改和增加的項目。而且，再次點擊按鈕是不會重繪的。但在沒有加入trackBy函數的時候，重複點擊按鈕還是會觸發重繪的（可以回頭看第一個GIF）。

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

相關文章