Angular利用trackBy提升性能的方法
更新時間：2018年01月26日 15:16:22 作者：無er不樂
這篇文章主要介紹了在Angular中利用trackBy來提升性能的實現(xiàn)方法,需要的朋友可以參考下
在Angular的模板中遍歷一個集合（collection）的時候你會這樣寫：
<ul>
<li *ngFor="let item of collection">{{item.id}}</li>
</ul>
有時你會需要改變這個集合，比如從后端接口返回了新的數(shù)據。那么問題來了，Angular不知道怎么跟蹤這個集合里面的項，不知道哪些該添加哪些該修改哪些該刪除。結果就是，Angular會把該集合里的項全部移除然后重新添加。就像這樣：
這樣做的弊端是會進行大量的DOM操作，而DOM操作是非常消耗性能的。
那么解決方案是，為*ngFor添加一個trackBy函數(shù)，告訴Angular該怎么跟蹤集合的各項。trackBy函數(shù)需要兩個參數(shù)，第一個是當前項的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函數(shù)的時候，重復點擊按鈕還是會觸發(fā)重繪的（可以回頭看第一個GIF）。
以上所述是小編給大家介紹的Angular利用trackBy提升性能的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
下面小編就為大家分享一篇angularJs 表格添加刪除修改查詢方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了AngularJS中isolate scope的用法,結合實例形式分析了isolate scope的幾種具體使用方式,需要的朋友可以參考下2016-11-11
這篇文章主要給大家介紹了關于Angular4學習教程之HTML屬性綁定的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01
這篇文章主要為大家詳細介紹了angular分頁指令操作的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了Angularjs的鍵盤事件的綁定的相關資料,這里提供了兩種方法，1.ng內置指令，2.自定義指令，并進行比較，需要的朋友可以參考下2017-07-07
本篇文章主要介紹了angularjs實現(xiàn)下拉列表的選中事件示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
本篇文章主要介紹了angular4中關于表單的校驗示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
基于angular中的重要指令詳解($eval,$parse和$compile)
下面小編就為大家?guī)硪黄赼ngular中的重要指令詳解($eval,$parse和$compile)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要為大家介紹了Angular中懶加載模塊初始化技術實例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
這篇文章主要介紹了AngularJs指令2015-12-12