欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular利用trackBy提升性能的方法

 更新時(shí)間：2018年01月26日 15:16:22   作者：無(wú)er不樂(lè)  
這篇文章主要介紹了在Angular中利用trackBy來(lái)提升性能的實(shí)現(xiàn)方法,需要的朋友可以參考下

在Angular的模板中遍歷一個(gè)集合（collection）的時(shí)候你會(huì)這樣寫：

<ul>
 <li *ngFor="let item of collection">{{item.id}}</li>
</ul>

有時(shí)你會(huì)需要改變這個(gè)集合，比如從后端接口返回了新的數(shù)據(jù)。那么問(wèn)題來(lái)了，Angular不知道怎么跟蹤這個(gè)集合里面的項(xiàng)，不知道哪些該添加哪些該修改哪些該刪除。結(jié)果就是，Angular會(huì)把該集合里的項(xiàng)全部移除然后重新添加。就像這樣：


這樣做的弊端是會(huì)進(jìn)行大量的DOM操作，而DOM操作是非常消耗性能的。

那么解決方案是，為*ngFor添加一個(gè)trackBy函數(shù)，告訴Angular該怎么跟蹤集合的各項(xiàng)。trackBy函數(shù)需要兩個(gè)參數(shù)，第一個(gè)是當(dāng)前項(xiàng)的index，第二個(gè)是當(dāng)前項(xiàng)，并返回一個(gè)唯一的標(biāo)識(shí)，就像這樣：

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就知道哪些項(xiàng)變動(dòng)了：


我們可以看到，DOM只重繪了修改和增加的項(xiàng)。而且，再次點(diǎn)擊按鈕是不會(huì)重繪的。但是在沒(méi)有添加trackBy函數(shù)的時(shí)候，重復(fù)點(diǎn)擊按鈕還是會(huì)觸發(fā)重繪的（可以回頭看第一個(gè)GIF）。

以上所述是小編給大家介紹的Angular利用trackBy提升性能的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

  • Angular CLI 安裝和使用教程

    Angular CLI 安裝和使用教程

    本篇文章主要介紹了Angular CLI 安裝和使用教程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • AngularJS中的$parse服務(wù)與$eval服務(wù)用法實(shí)例

    AngularJS中的$parse服務(wù)與$eval服務(wù)用法實(shí)例

    這篇文章主要介紹了AngularJS中的$parse服務(wù)與$eval服務(wù)用法,結(jié)合實(shí)例形式分析了AngularJS中$parse服務(wù)與$eval服務(wù)的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2023-05-05
  • Angular設(shè)置title信息解決SEO方面存在問(wèn)題

    Angular設(shè)置title信息解決SEO方面存在問(wèn)題

    爬蟲(chóng)在檢索seo信息的時(shí)候會(huì)讀不了js給其賦的值，導(dǎo)致搜索引擎收錄不了或者收錄了無(wú)效的信息,下面本文給大家介紹Angular設(shè)置title信息解決SEO方面存在問(wèn)題,需要的朋友可以參考下
    2016-08-08
  • Angular 4依賴注入學(xué)習(xí)教程之簡(jiǎn)介（一）

    Angular 4依賴注入學(xué)習(xí)教程之簡(jiǎn)介（一）

    依賴注入式AngularJS的重要特性之一，依賴注入簡(jiǎn)化了Angular解析模塊/組件之間依賴的過(guò)程。下面這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入基礎(chǔ)的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
    2017-06-06
  • AngularJS 仿微信圖片手勢(shì)縮放的實(shí)例

    AngularJS 仿微信圖片手勢(shì)縮放的實(shí)例

    這篇文章主要介紹了AngularJS 仿微信圖片手勢(shì)縮放的實(shí)例的相關(guān)資料,希望大家通過(guò)本文實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下
    2017-09-09
  • AngularJS2中一種button切換效果的實(shí)現(xiàn)方法（二）

    AngularJS2中一種button切換效果的實(shí)現(xiàn)方法（二）

    這篇文章主要介紹了AngularJS2中一種button切換效果的實(shí)現(xiàn)方法（二）,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2017-03-03
  • 淺談Angular4實(shí)現(xiàn)熱加載開(kāi)發(fā)旅程

    淺談Angular4實(shí)現(xiàn)熱加載開(kāi)發(fā)旅程

    本篇文章主要介紹了淺談Angular4實(shí)現(xiàn)熱加載開(kāi)發(fā)旅程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • 如何通過(guò)簡(jiǎn)單的代碼描述Angular父組件、子組件傳值

    如何通過(guò)簡(jiǎn)單的代碼描述Angular父組件、子組件傳值

    Vue組件是學(xué)習(xí)Vue框架最比較難的部分,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)簡(jiǎn)單的代碼描述Angular父組件、子組件傳值的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-04-04
  • 實(shí)例解析angularjs的filter過(guò)濾器

    實(shí)例解析angularjs的filter過(guò)濾器

    本文對(duì)angularjs的filter過(guò)濾器進(jìn)行系統(tǒng)介紹，附上實(shí)例解析，便于理解。具有很好的參考價(jià)值，需要的朋友可以看下
    2016-12-12
  • AngularJs Modules詳解及示例代碼

    AngularJs Modules詳解及示例代碼

    本文主要介紹AngularJs Modules的相關(guān)知識(shí)，這里整理了詳細(xì)的資料及簡(jiǎn)單示例代碼，有興趣的朋友可以參考下
    2016-09-09

最新評(píng)論