Angular-使用好NgForOf的trackBy带来性能上的提升

最新推荐文章于 2023-11-16 15:46:15 发布
最新推荐文章于 2023-11-16 15:46:15 发布
阅读量3.3k 收藏 3
点赞数 1
分类专栏： 前端 程序员 互联网 IT 编程 文章标签： 前端 编程 程序员 IT 互联网
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tzllxya/article/details/93508467
版权
本文探讨了在Angular中如何利用NgForOf指令的trackBy函数提高性能。通过不同的trackBy返回值，例如索引、ID或属性，我们可以控制DOM更新的范围。返回索引会导致所有元素刷新，返回ID则根据ID变化刷新，返回属性名如name则当该属性变化时刷新。使用自定义跟踪结果可以减少不必要的DOM操作，从而提升应用性能。
摘要由CSDN通过智能技术生成

Angular-使用好NgForOf的trackBy带来性能上的提升

 

官方文档，查看“变更的传导机制”即有详细的表述：

即使数据没有变化，迭代器中的元素标识符也可能会发生变化。比如，如果迭代器处理的目标是通过 RPC 从服务器取来的， 而 RPC 又重新执行了一次。那么即使数据没有变化，第二次的响应体还是会生成一些具有不同标识符的对象。Angular 将会清除整个 DOM， 并重建它（就仿佛把所有老的元素都删除，并插入所有新元素）。这是很昂贵的操作，应该尽力避免。

NgForOf - Angular 官方文档

那么如何来避免呢？

要想自定义默认的跟踪算法， NgForOf支持trackBy选项。trackBy接受一个带两个参数（index和 item）的函数。 如果给出了trackBy，Angular 就会使用该函数的返回值来跟踪变化。

可惜官网提供的例子无法运行，自己来个例子似乎会更好理解：

    最低0.47元/天 解锁文章
    程序员一木
    关注
    • 1
      点赞
    • 踩
    • 3
      收藏
      觉得还不错? 一键收藏
    • 1
      评论
    专栏目录
    angular中使用trackBy
    qq_36545656的博客
    02-25 3558
    在Angular的模板中遍历一个集合的时候你会这样写：<ul> <li *ngFor="let item of list">{{item.name}}</li> </ul>有时你会需要改变这个集合，比如从后端接口返回了新的数据。那么问题来了，Angular不知道怎么跟踪这个集合里面的项，不知道哪些该添加哪些该修改哪些该删除。结果就是，Angula...
    Angular性能优化之——trackBy
    KenkoTech的博客
    11-25 934
    Angular Trackby
    转：在使用angularjs过程，ng-repeat中track by的作用
    liudanyang_21的博客
    08-14 147
    转载：链接 <div ng-repeat="links in slides"> <div ng-repeat="link in links track by $index">{{link.name}}</div> </div> Error: [ngRepeat:dupes]这个出错提示具体到题主的情况，意思是指数组中有2个以上的相同数字。ngRepeat不允许collection中存在两个相同Id的对象 For example: item in.
    在Angular中利用trackBy来提升性能
    weixin_30820151的博客
    01-26 300
    在Angular的模板中遍历一个集合（collection）的时候你会这样写： <ul> <li *ngFor="let item of collection">{{item.id}}</li> </ul> 有时你会需要改变这个集合，比如从后端接口返回了新的数据。那么问题来了，Angular不知道怎么跟踪这个集合里面的项，不知道哪些该添加哪些该修...
    Angular +Ionic中数组对象遍历之trackBy唯一标识
    weixin_44794123的博客
    10-09 396
    一，trackBy作用： 1，标记被更改的节点 2，页面刷新时重绘该更改的节点 二.代码 <li *ngFor="let item of arrList; trackBy: trackById"">{{ item }}</li> trackById(index, item) { return item.id; // 与项目对应的唯一id } ...
    angular-react：在Angular中使用React组件
    01-31
    使用Angular-React可以使用Angular [2+]应用程序中的所有React元素，尤其是Office UI Fabric。 Office UI Fabric的包装器库简化了Angular对这些组件的使用。 但是，任何React代码都可以使用自定义Angular-React渲染...
    angular-svg-icon：内联SVG的角度组件，允许使用CSS轻松设置样式
    02-01
    对于Angular 10，请使用angular-svg-icon@10.0.0 对于Angular 9，请使用angular-svg-icon@9.2.0 对于Angular 8，请使用angular-svg-icon@8.0.0 对于Angular 7，请使用angular-svg-icon@7.2.1 对于Angular 6，请...
    Angular利用trackBy提升性能的方法
    08-28
    本文将详细介绍在Angular中利用trackBy来提升性能的实现方法。 一、问题的来源 在Angular的模板中遍历一个集合时，我们经常会使用*ngFor指令，如下所示： *ngFor="let item of collection">{{item.id}} 但是，当...
    angular-grid-layout:响应式网格，带有可拖动和可调整大小的项目，用于Angular应用程序
    03-06
    角网格布局 ...要在项目中使用@ katoid / angular-grid-layout，请通过安装它： npm install @katoid/angular-grid-layout --save 用法 将KtdGridModule导入到要使用网格的模块中： import { KtdGridMod
    Angular 由一个bug说起之二：trackBy的一点注意事项
    最新发布
    KenkoTech的博客
    11-16 1757
    接下来我改变一下数据，调用一下changeData，把张三变成未婚，王五变成已婚。数据正常更新了，这是没有加trackBy的时候，现在添加一下trackBy。组件没有重新生成，数据也没有更新，这是因为test组件的更新机制有问题。我在这里循环一个数组，显示人物的资料，姓名，年龄，婚否。接下来我用一个例子来演示一下。点击changeData。
    Angular ngIf ngSwitch ngForOf
    yanyi24的博客
    01-20 1253
    ngIf、ngSwitch、ngForOf 这一节，我们将介绍angular内置指令：ngIf、ngSwitch、ngForOf。这也是日常开发中经常会遇到的常见指令。原文阅读 ngIf ngIf是内置的结构型指令，控制宿主元素的添加或删除，取决于绑定的值是否为真。（跟vue的v-if是类似的，不是控制display属性） 单独使用ngIf import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app
    Angular *ngFor中使用trackBy提升性能
    qq_36181877的博客
    02-11 1438
    一、我们经常这样用： HTML <ul> <li *ngFor="let item of itemList">{{item.name}}<li> <ul> 二、trackBy的使用场景： 如果集合itemList数据发生改变，angular不知道如何跟踪集合里面的每一项，就删除了全部的项然后再重新赋值。这样就进行了大量的DOM操作，体验很不好。我们使用TrackBy来跟踪集合里面的每一项，页面就只重绘新增和修改的项，大大提升页面性能。 HT
    ngTrackBy的用途
    weixin_33939843的博客
    06-30 108
    angular 中ngFor 命令非常常见，使用的时候往往忽略了trackBy！其实这个很重要！可以避免重复渲染，对大量数据显示时性能优化尤为重要！ 常见的trackByIndex trackByIndex(index,item){ return index; } 复制代码缺点，当数据index变更时，比如排序，会发生重绘！ trackById(index,item){ retur...
    angular6 *ngFor trackBy语法学习
    黄彪博客
    09-27 975
    文章目录文章参考案例HTML 模板组件中定义数据 文章参考 官网 在Angular中利用trackBy来提升性能 angular中ngFor的参数 案例 HTML 模板 index: number：可迭代对象中当前条目的索引。 first: boolean：如果当前条目是可迭代对象中的第一个条目则为 true。 last: boolean：如果当前条目是可迭代对象中的最后一个条目则为 tru...
    angular中*ngfor中trackBy的用法
    拓宇
    02-05 6190
    On each ngDoCheck triggered for the ngForOf directive Angular checks what objects have changed. It uses differs for this process and each differ uses trackBy function to compare the current obje
    angular中为什么会使用track by 实现ng-repeat嵌套
    chajinglong的专栏
    04-08 4101
    div ng-repeat="links in slides"> div ng-repeat="link in links track by $index">{{link.name}}div> div> slides是一个二维数组，我以上的代码会报错Error: [ngRepeat:dupes]$http.get('index.php?option=com_mtree&task=ajax.
    在使用angularjs过程，ng-repeat中track by的作用
    热门推荐
    小Y
    07-21 7万+
    ng-repeat中 div ng-repeat="links in slides"> div ng-repeat="link in links track by $index">{{link.name}}div> div> Error: [ngRepeat:dupes]这个出错提示具体到题主的情况，意思是指数组中有2个以上的相同数字。ngRepeat不允许collectio
    评论 1
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值