Angular利用trackBy提升性能的方法
更新時間：2018年01月26日 15:16:22 作者：無er不樂
這篇文章主要介紹了在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函數的時候，重復點擊按鈕還是會觸發(fā)重繪的（可以回頭看第一個GIF）。
以上所述是小編給大家介紹的Angular利用trackBy提升性能的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
本篇文章主要介紹了Angular CLI 安裝和使用教程，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
AngularJS中的$parse服務與$eval服務用法實例
這篇文章主要介紹了AngularJS中的$parse服務與$eval服務用法,結合實例形式分析了AngularJS中$parse服務與$eval服務的功能、使用方法與相關注意事項,需要的朋友可以參考下2023-05-05
爬蟲在檢索seo信息的時候會讀不了js給其賦的值，導致搜索引擎收錄不了或者收錄了無效的信息,下面本文給大家介紹Angular設置title信息解決SEO方面存在問題,需要的朋友可以參考下2016-08-08
依賴注入式AngularJS的重要特性之一，依賴注入簡化了Angular解析模塊/組件之間依賴的過程。下面這篇文章主要給大家介紹了關于Angular 4依賴注入基礎的相關資料，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
這篇文章主要介紹了AngularJS 仿微信圖片手勢縮放的實例的相關資料,希望大家通過本文實現這樣的功能，需要的朋友可以參考下2017-09-09
AngularJS2中一種button切換效果的實現方法（二）
這篇文章主要介紹了AngularJS2中一種button切換效果的實現方法（二）,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
本篇文章主要介紹了淺談Angular4實現熱加載開發(fā)旅程，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue組件是學習Vue框架最比較難的部分,下面這篇文章主要給大家介紹了關于如何通過簡單的代碼描述Angular父組件、子組件傳值的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
本文對angularjs的filter過濾器進行系統介紹，附上實例解析，便于理解。具有很好的參考價值，需要的朋友可以看下2016-12-12
本文主要介紹AngularJs Modules的相關知識，這里整理了詳細的資料及簡單示例代碼，有興趣的朋友可以參考下2016-09-09