Angular 由一个bug说起之二:trackBy的一点注意事项

trackBy是angualr优化项目性能的一种方法, 通过返回一个具有绑定性的唯一值, 比如id,手机号,身份证号之类的,来让angular能够跟踪数组的项目,根据数据的变化来重新生成DOM, 这样就节约了性能。

但是如果是使用ngFor循环组件,添加trackBy的时候就需要注意这个组件自身的数据更新机制是否正常,因为没有使用trackBy的时候,for循环的数组数据改变了,angular会把数组里所有的项目都重新生成,那些项目的组件也都会重新初始化。

但当你使用了trackBy,数据发生了变化,angular只会把那些数据有变化的项目重新生成,这样项目的组件也不会重新初始化,如果这个组件的数据更新机制不够好,这时就会因为数据更新的问题,产生bug。

接下来我用一个例子来演示一下

这是子组件test

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';@Component({selector: 'app-test',templateUrl: './test.component.html',styleUrls: ['./test.component.css']
})
export class TestComponent implements OnChanges {@Input() data: any;name: string;age: number;married: boolean;constructor() {}ngOnChanges(changes: SimpleChanges): void {if (changes.data?.currentValue) {this.init(changes.data?.currentValue);}}init(data) {this.name = data.name;this.age = data.age;this.married = this.married !== undefined ? this.married : data.married;}
}
<div><div>姓名: {{ name }} </div><div>年龄: {{ age }}</div><div>婚否: {{ married ? '已婚' : '未婚' }}</div>
</div>

这是父组件app

import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {itemArray = [{id: 1,data: {name: '张三',age: 24,married: true}},{id: 2,data: {name: '李四',age: 25,married: true}},{id: 1,data: {name: '王五',age: 26,married: false}},];constructor() { }changeData() {this.itemArray = [{id: 1,data: {name: '张三',age: 24,married: false}},{id: 2,data: {name: '李四',age: 25,married: true}},{id: 1,data: {name: '王五',age: 26,married: true}},];}}
<div><div *ngFor="let item of itemArray;"><app-test [data]="item.data"></app-test>------------------------------</div><button (click)="changeData()">changeData</button>
</div>

我在这里循环一个数组,显示人物的资料,姓名,年龄,婚否。

接下来我改变一下数据,调用一下changeData,把张三变成未婚,王五变成已婚

数据正常更新了,这是没有加trackBy的时候,现在添加一下trackBy

trackByFn(index: number, item: any) {return item.id;}
<div><div *ngFor="let item of itemArray; trackBy: trackByFn;"><app-test [data]="item.data"></app-test>------------------------------</div><button (click)="changeData()">changeData</button>
</div>

点击changeData

组件没有重新生成,数据也没有更新,这是因为test组件的更新机制有问题

他这里是以组件本身的数据为先,这样的话,即使上面传下来新数据,他也不会更新,除非重新初始化,而加个trackBy之后,组件就不会重新生成,所以没加trackBy之前,没有bug,加了就有bug。

所以,要使用trackBy,组件本身的数据更新机制要正常才行。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/144344.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何下载 Apache + PHP + Mysql 集成安装环境并结合内网穿透工具实现公网访问内网服务

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;网络奇遇记、Cpolar杂谈 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. WampServer下载安装二. WampServer启动三. 安装cpolar内网穿透3.1 注册账号…

2023年香港优才计划申请确实火爆,但请冷静!结合个人条件再考虑!

2023年香港优才计划申请确实火爆&#xff0c;但请冷静&#xff01;结合个人条件再考虑&#xff01; 自从香港优才计划实施取消年度限额&#xff0c;为期两年的优化措施以后&#xff0c;无论是申请数量还是获批数量都猛增。今年第二季度的获批量与第一季度的2,073宗相比&#xf…

RabbitMQ 安装及配置

前言 当你准备构建一个分布式系统、微服务架构或者需要处理大量异步消息的应用程序时&#xff0c;消息队列就成为了一个不可或缺的组件。而RabbitMQ作为一个功能强大的开源消息代理软件&#xff0c;提供了可靠的消息传递机制和灵活的集成能力&#xff0c;因此备受开发人员和系…

protobuf---编码原理

1. Varint 编码 原理 Varint 是一种紧凑的表示数字的方法。它用一个或多个字节来表示一个数字&#xff0c;值越小的数字使用越少的字节数。这能减少用来表示数字的字节数。 Varint 中的每个字节&#xff08;最后一个字节除外&#xff09;都设置了最高有效位&#xff08;msb&a…

redisson支持高并发的RBucket

作用&#xff1a;RBucket桶可存储任意对象&#xff0c;可在高并发场景下进行唯一更新。 示例&#xff1a;创建20个线程并发更新桶对象&#xff0c;只有一个执行了更新操作。 先添加redisson的依赖。 <dependency><groupId>org.redisson</groupId><arti…

c# - - - Application.StartupPath(程序安装目录)和Environment.CurrentDirectory(程序工作目录)

Application.StartupPath 应用程序的安装目录&#xff0c;不会改变。 在C:\Users\Administrator\source\repos\ConsoleApp6\bin\Debug目录中&#xff0c;运行ConsoleApp6.exe。 安装目录为&#xff1a;C:\Users\Administrator\source\repos\ConsoleApp6\bin\Debug 在C:\Users…

开发板和电脑相互ping,电脑可以ping开发板,但是开发板ping不通电脑

开发板和电脑相互ping&#xff0c;电脑可以ping开发板&#xff0c;但是开发板ping不通电脑 可能有以下几种原因&#xff1a; 电脑的防火墙设置拦截了开发板的ping请求&#xff0c;需要关闭或者配置防火墙&#xff0c;允许开发板的IP地址访问。开发板和电脑的IP地址不在同一网段…

​软考-高级-系统架构设计师教程(清华第2版)【第5章 软件工程基础知识(190~233)-思维导图】​

软考-高级-系统架构设计师教程&#xff08;清华第2版&#xff09;【第5章 软件工程基础知识&#xff08;190~233&#xff09;-思维导图】 课本里章节里所有蓝色字体的思维导图

ubuntu xrdp远程登录一直弹出Authentication required. System policy prevents WiFi scans

windows远程登录以后想要连接一下wifi&#xff0c;一定弹出Authentication required&#xff0c;关都关不掉&#xff0c;wifi也连不上。 使用以下方法后完美解决 sudo vi /etc/polkit-1/localauthority/50-local-d/network.pkla 加入如下内容&#xff1a; [Allow Wifi Scan…

050-第三代软件开发-软件部署脚本(二)

第三代软件开发-软件部署脚本(二) 文章目录 第三代软件开发-软件部署脚本(二)项目介绍软件部署脚本(二) 关键字&#xff1a; Qt、 Qml、 bash、 shell、 脚本 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff08;Qt Meta-Object Languag…

以程序员的身份使用curl获取速卖通详情

作为一名程序员&#xff0c;我们经常需要和各种API接口打交道。在电商领域&#xff0c;速卖通是一个非常受欢迎的平台。本文将介绍如何使用curl工具通过速卖通的API接口获取商品详情。 一、准备工作 在开始之前&#xff0c;请确保您已完成以下准备工作&#xff1a; 注册速卖…

Django视图层解析

Django视图&#xff08;View&#xff09;是Django Web框架中负责处理HTTP请求和返回HTTP响应的组件。视图是一段Python代码&#xff0c;接收HTTP请求作为输入&#xff0c;处理请求并返回HTTP响应作为输出。Django视图的主要目的是实现Web应用程序的业务逻辑&#xff0c;将模型和…

外汇天眼:「外汇回撤」这术语是指什么?

"外汇回撤"是外汇交易中一个常见的专业术语。对于许多投资者&#xff0c;尤其是初学者来说&#xff0c;可能并不十分理解这个术语的实质。下面我们将详细介绍外汇回撤的含义。 外汇回撤通常被称为"外汇百分比回撤"。在外汇市场出现强烈趋势波动时&#xf…

hive数据质量规范

当谈到大数据处理和分析时&#xff0c;数据质量成为至关重要的因素。Hive作为一种常用的大数据查询和分析工具&#xff0c;也需要遵循一定的数据质量规范以确保数据的准确性、一致性和可靠性。本文将介绍Hive数据质量规范的相关内容&#xff0c;并提供代码示例来说明如何在Hive…

Java 14 中, 对 NullPointerException 打印异常信息的改进增强

Java 14 中&#xff0c; 对 NullPointerException 打印异常信息的改进增强&#xff0c;开启方法 -XX:ShowCodeDetailsInExceptionMessages

Ubuntu中安装R语言环境并在jupyter kernel里面增加R kernel

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

文件上传 [SUCTF 2019]CheckIn1

打开题目 我们用cmd curl --head url 查看网站使用的是什么服务器 此题用的是openresty&#xff0c;OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web 平台 我们上传php&#xff0c;phtml的一句话木马都显示不合法 那我们试试传a.jpg的一句话木马 显示我们一句话木马内容里面…

java面试常问

文章目录 java 基础1、JDK 和 JRE的区别2、 和equals的区别3、String、StringBuffer、StringBuilder4、String str “a”、 new String(“a”)一样吗&#xff1f;5、ArrayList 和 LinkedList的区别&#xff1f;6、HashMap的原理与实现6.1、容量与扩容6.2、扩容机制 7、HashMa…

MatrixOne完成与欧拉、麒麟信安的兼容互认

近日&#xff0c;超融合异构云原生数据库MatrixOne企业版软件V1.0完成了与欧拉开源操作系统&#xff08;openEuler简称“欧拉”&#xff09;、麒麟信安操作系统系列产品和虚拟化平台的相互兼容认证&#xff0c;通过了欧拉兼容性测评&#xff0c;获得了《openEuler技术测评证书》…

flutter背景图片设置

本地图片设置 1、在配置文件pubspec.yaml中&#xff0c;设置以下代码 assets:- assets/- assets/test/2、如果目录中没有assets文件夹&#xff0c;则创建一个文件夹&#xff0c;并且取名为assets&#xff0c;在此文件夹中存放图片资源即可&#xff0c;如果想分文件夹管理&…