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 字符串连接[性能比较]
May 10 Javascript
Javascript 面试题随笔
Mar 31 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
node.js博客项目开发手记
Mar 16 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 Javascript
js实现移动端轮播图滑动切换
Dec 21 Javascript
解决elementui表格操作列自适应列宽
Dec 28 Javascript
vue动态绑定style样式
Apr 20 Vue.js
微信小程序版翻牌小游戏
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
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
php加密解密实用类分享
2014/01/07 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
JavaScript中URL编码函数代码
2011/01/11 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
javascript实现动态标签云
2015/10/16 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现求两个csv文件交集的方法
2017/09/06 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Python中反射和描述器总结
2018/09/23 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
《祁黄羊》教学反思
2014/04/22 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
音乐课外活动总结
2015/05/09 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android