Angular中使用trackBy优化ngFor性能

于 2025-03-25 01:22:24 发布
阅读量32 收藏
点赞数
分类专栏： 编程问题解决手册 文章标签： angular.js javascript 前端 个人开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62153576/article/details/146490825
版权

在Angular应用中，当我们使用*ngFor指令来遍历数组时，常常会遇到性能问题，尤其是在数组元素频繁变化的情况下。今天我们来探讨一下如何通过trackBy函数来优化*ngFor的性能。

问题描述

假设我们有一个父组件ParentComponent，它包含一个数组items，数组中的每一个元素都是SomeClass类的实例。这个父组件的模板中使用了*ngFor来渲染子组件ChildComponent，每个子组件通过[item]输入属性接收到数组中的一个元素。

@Component({
   
    selector: 'parent-component',
    templateUrl
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Angular中`trackBy`函数的独特性与性能优化
2501_90323865的博客
03-24 120
trackBy函数在Angular的*ngFor指令中使用，旨在告诉Angular如何跟踪列表中的每个项。通常，它通过返回每个项的唯一标识符（例如ID）来实现。当列表项更新时，Angular会使用这个标识符来决定是否需要重新渲染整个列表项，还是仅仅更新相关数据。-- 列表项内容 --> </ ng-container > < ng-container *ngFor = " let item of list2;-- 列表项内容 --> </ ng-container >
Angular *ngFor中使用trackBy提升性能
qq_36181877的博客
02-11 1595
一、我们经常这样用： HTML <ul> <li *ngFor="let item of itemList">{{item.name}}<li> <ul> 二、trackBy的使用场景： 如果集合itemList数据发生改变，angular不知道如何跟踪集合里面的每一项，就删除了全部的项然后再重新赋值。这样就进行了大量的DOM操作，体验很不好。我们使用TrackBy来跟踪集合里面的每一项，页面就只重绘新增和修改的项，大大提升页面性能。 HT
Angular性能优化之——trackBy
KenkoTech的博客
11-25 1175
Angular Trackby
angular6 *ngFor trackBy语法学习
黄彪博客
09-27 1087
文章目录文章参考案例HTML 模板组件中定义数据 文章参考 官网 在Angular中利用trackBy来提升性能 angular中ngFor的参数 案例 HTML 模板 index: number：可迭代对象中当前条目的索引。 first: boolean：如果当前条目是可迭代对象中的第一个条目则为 true。 last: boolean：如果当前条目是可迭代对象中的最后一个条目则为 tru...
Angular 由一个bug说起之二：trackBy的一点注意事项
KenkoTech的博客
11-16 1883
接下来我改变一下数据，调用一下changeData，把张三变成未婚，王五变成已婚。数据正常更新了，这是没有加trackBy的时候，现在添加一下trackBy。组件没有重新生成，数据也没有更新，这是因为test组件的更新机制有问题。我在这里循环一个数组，显示人物的资料，姓名，年龄，婚否。接下来我用一个例子来演示一下。点击changeData。
提高 Angular 应用程序的性能
技术探索驿站
08-10 1129
Angular 是一个用于构建动态 Web 应用程序的强大框架，但如果不遵循最佳实践，性能可能会成为一个问题。以下是一些增强 Angular 应用程序性能的策略。
Angular性能优化之脏检测
FlyWine的博客
10-30 3015
Angular性能优化之脏检测 当我们在使用 Angular 框架搭建项目时，随着组件越来越多，页面也来越复杂，性能会越来越低，主要表现在 CPU 使用率 很高。所以我们要对项目做一定的优化。 Angular脏检查（Change Detection）机制 Angular 的脏检测主要是指 zone.js,这是一个开源的第三方库，github地址。 关于 zone.js 的定义，官方解释为： A ...
Angular 17中的新控制流语法与性能优化
最新发布
2501_90323865的博客
03-18 36
Angular 17 引入了一系列新功能，其中最引人注目的便是控制流语法的变化。特别是，*ngFor指令的语法从旧版本的：</</
angular中*ngfor中trackBy的用法
拓宇
02-05 6239
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-使用好NgForOf的trackBy带来性能上的提升
weixin_33836223的博客
04-28 702
首发于：zhuanlan.zhihu.com/c_106067616…官方文档，查看“变更的传导机制”即有详细的表述：即使数据没有变化，迭代器中的元素标识符也可能会发生变化。比如，如果迭代器处理的目标是通过 RPC 从服务器取来的， 而 RPC 又重新执行了一次。那么即使数据没有变化，第二次的响应体还是会生成一些具有不同标识符的对象。Angular 将会清除整个 DOM， 并重建它（就仿佛把所有老...
angular中使用trackBy
qq_36545656的博客
02-25 3627
在Angular的模板中遍历一个集合的时候你会这样写：&lt;ul&gt; &lt;li *ngFor="let item of list"&gt;{{item.name}}&lt;/li&gt; &lt;/ul&gt;有时你会需要改变这个集合，比如从后端接口返回了新的数据。那么问题来了，Angular不知道怎么跟踪这个集合里面的项，不知道哪些该添加哪些该修改哪些该删除。结果就是，Angula...
angular中为什么会使用track by 实现ng-repeat嵌套
chajinglong的专栏
04-08 4149
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
angular 里的 track by 的用法
weixin_33720452的博客
11-13 260
2019独角兽企业重金招聘Python工程师标准>>> ...
AngularJS最佳实践: 请小心使用 ng-repeat 中的 $index
weixin_34185560的博客
01-23 1122
“有客户投诉，说在删除指定的某条记录时,结果删掉的却是另外一条记录!” 看起来是个很严重的BUG。 有一次我们在工作中碰到了这个问题。 要定位这个BUG非常麻烦, 因为客户也不清楚如何重现这个问题。 后来发现这个Bug是由于在ng-repeat中使用了$index引发的。下面一起来看看这个错误是如何引发的, 以及如何避免这种bug产生,然后说说我...
在Angular中利用trackBy来提升性能
weixin_30820151的博客
01-26 337
在Angular的模板中遍历一个集合（collection）的时候你会这样写： <ul> <li *ngFor="let item of collection">{{item.id}}</li> </ul> 有时你会需要改变这个集合，比如从后端接口返回了新的数据。那么问题来了，Angular不知道怎么跟踪这个集合里面的项，不知道哪些该添加哪些该修...
[Angular 2] *ngFor ( 综合应用 )
chelen_jak的专栏
08-31 773
原文出处：https://www.cnblogs.com/Answer1215/p/5872646.html heros.ts: import {Component} from "@angular/core"; const HEROES = [ {id: 1, name:'Superman'}, {id: 2, name:'Batman'}, {id: 5, nam...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

t0_54coder

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值