本文主要和大家介紹了在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函數的時候,重複點擊按鈕還是會觸發重繪的(可以回頭看第一個GIF)。
相關推薦:
以上是Angular如何利用trackBy提升性能詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

Angular项目过大,怎么合理拆分它?下面本篇文章给大家介绍一下合理拆分Angular项目的方法,希望对大家有所帮助!

怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!

本篇文章带大家了解一下Angular中的独立组件,看看怎么在Angular中创建一个独立组件,怎么在独立组件中导入已有的模块,希望对大家有所帮助!

Angular Route中怎么提前获取数据?下面本篇文章给大家介绍一下从 Angular Route 中提前获取数据的方法,希望对大家有所帮助!


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

Atom編輯器mac版下載
最受歡迎的的開源編輯器

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)