重温react-05(类组件生命周期和性能优化)
类组件的生命周期
import React, { Component } from 'react'export default class learnReact05 extends Component {state = {number: 1}render() {return (<div>{this.state.number}</div>)}// 一般将请求的方法,放在这个生命周期componentDidMount() {setInterval(() => {this.setState({number: this.state.number + 1})}, 1000)}// 更新阶段 =>组件卸载componentWillUnmount(){console.log('卸载');}
}
组件性能优化
06的代码
import React, { Component } from 'react'
import LearnReact07 from './learnReact07'
export default class learnReact06 extends Component {state = {arr: ['组件1', '组件2', '组件3', '组件4'],number: 0}render() {return (<div><input type="number" value={this.state.number} onChange={this.changeNumber} /><div>{this.state.number}</div>{this.state.arr.map((item, index) => {return <LearnReact07 key={index} item={item} index={index} changeMsg={this.changeMsg} />})}</div>)}changeMsg = (index) => {const arr = [...this.state.arr]arr[index] = '哈哈哈哈'this.setState({arr: arr})}changeNumber = (e) => {this.setState({number: e.target.value})}
}
07的代码
import React, { Component } from 'react'export default class learnReact07 extends Component {shouldComponentUpdate = (nextProps, nextState) => {return nextProps.item != this.props.item}render() {// console.log('子组件是否触发');return (<div><h1>{this.props.item}</h1><button onClick={() => {this.props.changeMsg(this.props.index)}}>点击我改变嗷</button></div>)}}
结语
到此类组件已经全部完成学习,通常类组件在工作中不是经常使用,接下来要开启函数组件的学习。不断的强化自己,让自己可以在前端领域不断提升自己。
相关文章:
重温react-05(类组件生命周期和性能优化)
类组件的生命周期 import React, { Component } from reactexport default class learnReact05 extends Component {state {number: 1}render() {return (<div>{this.state.number}</div>)}// 一般将请求的方法,放在这个生命周期componentDidMount() {setInterva…...
RHCE四---web服务器的高级优化方案
一、Web服务器(2) 基于https协议的静态网站 概念解释 HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer 或 Hypertext TransferProtocol Secure,超文本传输安全协议),是以…...
Pytest集成Allure生成测试报告
# 运行并输出报告在Report文件夹下 查看生成的allure报告 1. 生成allure报告:pycharm terminal中输入命令:产生报告文件夹 pytest -s --alluredir../report 2. pycharm terminal中输入命令:查看生成的allure报告 allure serve ../report …...
SpringBoot 参数校验
参数校验 引入springvalidation依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId> </dependency>参数前添加Pattern public Result registry(Pattern(regexp &qu…...
【Arduino】实验使用ESP32控制可编程继电器制作跑马灯(图文)
今天小飞鱼实验使用ESP控制继电器,为了更好的掌握继电器的使用方法这里实验做了一个跑马灯的效果。 这里用到的可编程继电器,起始原理并不复杂,同样需要ESP32控制针脚输出高电平或低电平给到继电器,继电器使用这个信号控制一个电…...
islower()方法——判断字符串是否全由小写字母组成
自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 islower()方法用于判断字符串是否由小写字母组成。islower()方法的语法格式如下: str.islower() 如果字符串中包含至少一个区…...
发布/订阅模式
实现发布/订阅模式的基本思路是通过一个中介者(发布者)来管理订阅者(监听器),并在特定事件发生时通知所有订阅者执行相应的操作。下面是实现发布/订阅模式的基本思路: 创建发布者对象:首先&…...
K8S Pod常见状态
这是自己所遇到 Pod 常见状态及可能原因,持续更新。 如有其他的错误状态,可私我更新 1. ImagePullBackOff 问题分析: 镜像拉取失败。 可能原因: 可能是网络问题导致,检查Pod所在节点是否能够正常访问网络; 镜…...
Hadoop3:Yarn常用Shell命令
一、查看任务 1、查看所有任务 yarn application -list2、根据状态查看任务 语法 yarn application -list -appStates (所有状态:ALL、NEW、NEW_SAVING、SUBMITTED、ACCEPTED、RUNNING、FINISHED、FAILED、KILLED)例如 yarn application…...
15.数据库简介+MySQl使用+SQL语句
文章目录 数据库简述一.数据库简介DB1.定义:2.DBMS数据库管理系统3.数据库分类 二.MySQL的安装1.安装步骤2.MySQL数据库图形管理工具3.mysql程序常用命令4.MySQL字符集及字符序5.Navicat快捷键操作 三.MySQL数据库基本操作 .........................................表管理一.…...
AI入门系列:工具篇之ChatGPT的优秀的国内替代品
文章目录 一,智谱清言(ChatGLM)1,智谱清言简介2,[智谱清言地址,点我开始用吧](https://chatglm.cn/) 二,Kimi智能助手1,Kimi简介2,[Kimi地址,点我开始用吧](https://kimi.moonshot.c…...
改机软件有哪些?实现一键新机、改串号、改IMEI和手机参数的需求 硬改手机软件,新机环境模拟 设备伪装,一键改机,一键复原
这次针对可以直接开端口修改参数的机型做一些工具解析 前面接触合作过很多工作室。其中很多工作室对于各自软件的跳验证有各自的需求。 一个机型各项参数一般有IMEI WiFi 蓝牙 sn psb ESN等等。 针对这些参数的修改首先要明白各自软件检测的具体是哪些参数来验证。 对于常用…...
如何快速使用JNI
文章目录 1_JNI是什么?2_使用3_扩展 1_JNI是什么? JNI 是Java Native Interface的缩写,通过JNI,允许Java代码与其他语言(通常是C或C)编写的本地应用程序或库进行交互。简而言之就是,Java可以通…...
simulink开发stm32,使用中断模块,无法产生中断,其中包括使用timer模块,以及ADC都无法产生中断,需要注意的地方
1,其中包括使用timer模块,以及ADC都无法产生中断,需要注意的地方 原来是需要在配置文件里开启一下timer的中断,其他模块自动加载ioc就可以了,这个timer需要注意力,需要自己勾选一下 如下图: 看…...
C# 如何单纯的优化循环
Parallel.For(0, 10000, i >{// 并行执行的代码块// 例如: Console.WriteLine(i);}); 这种循环比 单纯常用的for 和 foreach 要稍微快一点 但是呢如果循环里面写的是非常简单的业务逻辑 的话 for和foreach 要更胜一筹一点 Parallel 原理就好像我一个人忙不过来可以多找几个…...
【鸿蒙学习笔记】@Extend装饰器:定义扩展组件样式
官方文档:Extend装饰器:定义扩展组件样式 [Q&A] Extend装饰器 作用 Extend用于扩展原生组件样式。 [Q&A] Extend装饰器 特点 1・Extend仅支持在全局定义,不支持在组件内部定义。 2・Extend支持封装指定组件的…...
【Docker项目实战篇】Docker部署PDF多功能工具Stirling-PDF
【Docker项目实战篇】Docker部署PDF多功能工具Stirling-PDF 前言一、Stirling-PDF介绍1.1 Stirling-PDF简介1.2 Stirling-PDF功能 二、本次实践规划2.1 本地环境规划2.2 本次实践介绍 三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本 四…...
【算法训练记录——Day37】
Day37——贪心Ⅴ 1.leetcode_56合并区间 1.leetcode_56合并区间 思路:排序,如果重叠,更新right 为max(right, curVal), 不重叠就加入res,需要单独考虑最后一次,因为每次都是在下一次遍历开始时判断是否加入res,因此 当…...
OpenCV 张正友标定法(二)
文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 在之前的博客OpenCV 张氏标定法中,我们没有考虑镜头畸变等因素,因此计算出的内参与外参均是理想情况下的数值,而如果我们考虑到镜头的畸变: 我们就需要考虑使用最小二乘法最小化像素坐标的重投影误差(上述所求…...
LeetCode题练习与总结:环形链表Ⅱ--142
一、题目描述 给定一个链表的头节点 head ,返回链表开始入环的第一个节点。 如果链表无环,则返回 null。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给定链表中的环,评测…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程:(白话解释) 我们将原始待发送的消息称为 M M M,依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)(意思就是 G ( x ) G(x) G(x) 是已知的)࿰…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践
6月5日,2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席,并作《智能体在安全领域的应用实践》主题演讲,分享了在智能体在安全领域的突破性实践。他指出,百度通过将安全能力…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计,聪明的码友立马就知道了,该到数据访问模块了,要不就这俩玩个6啊,查库势在必行,至此,它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据(数据库、No…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
