在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来提升性能的更多相关文章

  1. SQL中利用DMV进行数据库性能分析

    相信朋友对SQL Server性能调优相关的知识或多或少都有一些了解.虽然说现在NOSQL相关的技术非常的火热,但是RMDB(关系型数据库)与NOSQL是并存的,并且适用在各种的项目中.在一般的企业级 ...

  2. SQL Server中使用Check约束提升性能

        在SQL Server中,SQL语句的执行是依赖查询优化器生成的执行计划,而执行计划的好坏直接关乎执行性能.     在查询优化器生成执行计划过程中,需要参考元数据来尽可能生成高效的执行计划, ...

  3. 在angular中利用分页插件进行分页

    必需:angular分页js和css  当然还有angular.js   还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...

  4. paip.提升性能--多核cpu中的java/.net/php/c++编程

    paip.提升性能--多核cpu中的java/.net/php/c++编程 作者Attilax  艾龙,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http ...

  5. paip.提升性能--多核编程中的java .net php c++最佳实践 v2.0 cah

    paip.提升性能--多核编程中的java .net php c++最佳实践  v2.0 cah 作者Attilax  艾龙,  EMAIL:1466519819@qq.com  来源:attilax ...

  6. [.net 面向对象程序设计进阶] (17) 多线程(Multithreading)(二) 利用多线程提高程序性能(中)

    [.net 面向对象程序设计进阶] (17) 多线程(Multithreading)(二) 利用多线程提高程序性能(中) 本节要点: 上节介绍了多线程的基本使用方法和基本应用示例,本节深入介绍.NET ...

  7. 精通 WPF UI Virtualization (提升 OEA 框架中 TreeGrid 控件的性能)

    原文:精通 WPF UI Virtualization (提升 OEA 框架中 TreeGrid 控件的性能) 本篇博客主要说明如何使用 UI Virtualization(以下简称为 UIV) 来提 ...

  8. .Net Core中无处不在的Async/Await是如何提升性能的?

    一.简介 Async/Await在.Net Core中真的是无处不在,到处都是异步操作,那为什么要用?有什么作用?别人说能提升性能?网上一堆文章看的绕晕了也没说清楚, 所以这里从理论,实践,原理一个个 ...

  9. 利用IdentityServer3在ASP.NET 5和Angular中实现OAuth2 Implicit Flow

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:之前介绍过的IdentityServer3虽然是基于Katana开发的,不过同样可以托 ...

随机推荐

  1. PID算法笔记2

    总所周知,PID算法是个很经典的东西.而做自平衡小车,飞行器PID是一个必须翻过的坎.因此本节我们来好好讲解一下PID,根据我在学习中的体会,力求通俗易懂.并举出PID的形象例子来帮助理解PID.一. ...

  2. Windbg+VirtualBox双机调试环境配置(XP/Win7/Win10)

    一.下载WDK10 https://developer.microsoft.com/zh-cn/windows/hardware/windows-driver-kit 安装Windows驱动程序工具包 ...

  3. sqlserver存储过程及mybatis调用——待续

    创建带输入参数存储过程 use yanantestgoif exists (select * from sys.objects where name='yanan')drop procedure ya ...

  4. getRequestDispatcher()和response.sendRedirect()

    request.getRequestDispatcher()是请求转发,前后页面共享一个request   response.sendRedirect()是重新定向,前后页面不是一个request.

  5. org.json.JSONObject的optXXX方法

    JSONObject有很多optXXX方法,比如optBoolean,optString,optInt.... 他们的意思是:如果这个JSONObject对象,如果有返回这个属性的值,如果没有返回一个 ...

  6. iOS 组件化 —— 路由设计思路分析

    原文 前言 随着用户的需求越来越多,对App的用户体验也变的要求越来越高.为了更好的应对各种需求,开发人员从软件工程的角度,将App架构由原来简单的MVC变成MVVM,VIPER等复杂架构.更换适合业 ...

  7. 李忠益TP5商城项目笔记(待完成)

    商品种类的无限极分类 $data=db('goods_type')->field(['*','concat(path,",",id)'=>'paths'])->o ...

  8. jQuery事件 (jQuery实现图片轮播)

    jQuery事件按执行时间,主要分为两种,第一种是在网页加载完执行,第二种绑定在元素中,由访问者某些行为触发. $(document).ready(function(){ //事件 }); $(&qu ...

  9. linux命令之read

    对于写bash脚本的朋友,read命令是不可或缺的,需要实践一下就可以了解read命令的大致用途: 编写一个脚本: #!/bin/bash # hao32 test read echo -e &quo ...

  10. 权限问题导致zabbix无法监控mysql

    说说一个困扰自已两天的问题. 首先是用常规的方法安装上了mysql数据库.做了主从. 在监控从库的时候,发现所有的监控数据库的监控项都获取不到key值 . zabbix server端也不报错.获取到 ...