Angular利用trackBy提升性能的方法
更新时间：2018年01月26日 15:16:22 作者：无er不乐
这篇文章主要介绍了在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提升性能的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
下面小编就为大家分享一篇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实现下拉列表的选中事件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
本篇文章主要介绍了angular4中关于表单的校验示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
基于angular中的重要指令详解($eval,$parse和$compile)
下面小编就为大家带来一篇基于angular中的重要指令详解($eval,$parse和$compile)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要为大家介绍了Angular中懒加载模块初始化技术实例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了AngularJs指令2015-12-12
最新评论