Angular利用trackBy提升性能的方法


Posted in Javascript onJanuary 26, 2018

在Angular的模板中遍历一个集合(collection)的时候你会这样写:

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

有时你会需要改变这个集合,比如从后端接口返回了新的数据。那么问题来了,Angular不知道怎么跟踪这个集合里面的项,不知道哪些该添加哪些该修改哪些该删除。结果就是,Angular会把该集合里的项全部移除然后重新添加。就像这样:

Angular利用trackBy提升性能的方法

这样做的弊端是会进行大量的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就知道哪些项变动了:

Angular利用trackBy提升性能的方法

我们可以看到,DOM只重绘了修改和增加的项。而且,再次点击按钮是不会重绘的。但是在没有添加trackBy函数的时候,重复点击按钮还是会触发重绘的(可以回头看第一个GIF)。

以上所述是小编给大家介绍的Angular利用trackBy提升性能的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
轻松搞定js表单验证
Oct 13 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 Javascript
微信小程序版翻牌小游戏
Jan 26 #Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 #Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 #Javascript
微信小程序实现animation动画
Jan 26 #Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 #Javascript
微信小程序如何获取openid及用户信息
Jan 26 #Javascript
微信小程序如何获取用户手机号
Jan 26 #Javascript
You might like
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
php返回json数据函数实例
2014/10/09 PHP
php常用数组函数实例小结
2016/12/29 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
详解python内置模块urllib
2020/09/09 Python
python tkinter实现连连看游戏
2020/11/16 Python
购买原创艺术品:Zatista
2019/11/09 全球购物
员工自我鉴定范文
2013/10/06 职场文书
师范应届毕业生自荐信
2013/11/18 职场文书
高三家长寄语
2014/04/03 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
连带责任保证书
2014/04/29 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
企业口号大全
2014/06/12 职场文书
授权委托书协议书
2014/10/16 职场文书
2014年预算员工作总结
2014/12/05 职场文书
五年级上册复习计划
2015/01/19 职场文书
培训通知
2015/04/17 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python