在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:&#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）。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

使用原生JavaScript實作放大鏡效果

#在nodejs中透過redis作為快取實現的封裝快取類別

在Express中使用bcryptjs密碼加密

#在Vue中透過Element使用icon圖示

##使用Vue.set()如何實現資料動態回應

在vue中如何實作動態綁定圖片以及data返回圖片路徑

以上是在Angular中利用trackBy如何提升效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！