当前位置: 首页 > news >正文

重温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服务器&#xff08;2&#xff09; 基于https协议的静态网站 概念解释 HTTPS&#xff08;全称&#xff1a;Hyper Text Transfer Protocol over Secure Socket Layer 或 Hypertext TransferProtocol Secure&#xff0c;超文本传输安全协议&#xff09;&#xff0c;是以…...

Pytest集成Allure生成测试报告

# 运行并输出报告在Report文件夹下 查看生成的allure报告 1. 生成allure报告&#xff1a;pycharm terminal中输入命令&#xff1a;产生报告文件夹 pytest -s --alluredir../report 2. pycharm terminal中输入命令&#xff1a;查看生成的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控制继电器&#xff0c;为了更好的掌握继电器的使用方法这里实验做了一个跑马灯的效果。 这里用到的可编程继电器&#xff0c;起始原理并不复杂&#xff0c;同样需要ESP32控制针脚输出高电平或低电平给到继电器&#xff0c;继电器使用这个信号控制一个电…...

islower()方法——判断字符串是否全由小写字母组成

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 islower()方法用于判断字符串是否由小写字母组成。islower()方法的语法格式如下&#xff1a; str.islower() 如果字符串中包含至少一个区…...

发布/订阅模式

实现发布/订阅模式的基本思路是通过一个中介者&#xff08;发布者&#xff09;来管理订阅者&#xff08;监听器&#xff09;&#xff0c;并在特定事件发生时通知所有订阅者执行相应的操作。下面是实现发布/订阅模式的基本思路&#xff1a; 创建发布者对象&#xff1a;首先&…...

K8S Pod常见状态

这是自己所遇到 Pod 常见状态及可能原因&#xff0c;持续更新。 如有其他的错误状态&#xff0c;可私我更新 1. ImagePullBackOff 问题分析&#xff1a; 镜像拉取失败。 可能原因&#xff1a; 可能是网络问题导致&#xff0c;检查Pod所在节点是否能够正常访问网络; 镜…...

Hadoop3:Yarn常用Shell命令

一、查看任务 1、查看所有任务 yarn application -list2、根据状态查看任务 语法 yarn application -list -appStates &#xff08;所有状态&#xff1a;ALL、NEW、NEW_SAVING、SUBMITTED、ACCEPTED、RUNNING、FINISHED、FAILED、KILLED&#xff09;例如 yarn application…...

15.数据库简介+MySQl使用+SQL语句

文章目录 数据库简述一.数据库简介DB1.定义:2.DBMS数据库管理系统3.数据库分类 二.MySQL的安装1.安装步骤2.MySQL数据库图形管理工具3.mysql程序常用命令4.MySQL字符集及字符序5.Navicat快捷键操作 三.MySQL数据库基本操作 .........................................表管理一.…...

AI入门系列:工具篇之ChatGPT的优秀的国内替代品

文章目录 一&#xff0c;智谱清言(ChatGLM)1&#xff0c;智谱清言简介2&#xff0c;[智谱清言地址&#xff0c;点我开始用吧](https://chatglm.cn/) 二&#xff0c;Kimi智能助手1&#xff0c;Kimi简介2&#xff0c;[Kimi地址&#xff0c;点我开始用吧](https://kimi.moonshot.c…...

改机软件有哪些?实现一键新机、改串号、改IMEI和手机参数的需求 硬改手机软件,新机环境模拟 设备伪装,一键改机,一键复原

这次针对可以直接开端口修改参数的机型做一些工具解析 前面接触合作过很多工作室。其中很多工作室对于各自软件的跳验证有各自的需求。 一个机型各项参数一般有IMEI WiFi 蓝牙 sn psb ESN等等。 针对这些参数的修改首先要明白各自软件检测的具体是哪些参数来验证。 对于常用…...

如何快速使用JNI

文章目录 1_JNI是什么&#xff1f;2_使用3_扩展 1_JNI是什么&#xff1f; JNI 是Java Native Interface的缩写&#xff0c;通过JNI&#xff0c;允许Java代码与其他语言&#xff08;通常是C或C&#xff09;编写的本地应用程序或库进行交互。简而言之就是&#xff0c;Java可以通…...

simulink开发stm32,使用中断模块,无法产生中断,其中包括使用timer模块,以及ADC都无法产生中断,需要注意的地方

1&#xff0c;其中包括使用timer模块&#xff0c;以及ADC都无法产生中断&#xff0c;需要注意的地方 原来是需要在配置文件里开启一下timer的中断&#xff0c;其他模块自动加载ioc就可以了&#xff0c;这个timer需要注意力&#xff0c;需要自己勾选一下 如下图&#xff1a; 看…...

C# 如何单纯的优化循环

Parallel.For(0, 10000, i >{// 并行执行的代码块// 例如: Console.WriteLine(i);}); 这种循环比 单纯常用的for 和 foreach 要稍微快一点 但是呢如果循环里面写的是非常简单的业务逻辑 的话 for和foreach 要更胜一筹一点 Parallel 原理就好像我一个人忙不过来可以多找几个…...

【鸿蒙学习笔记】@Extend装饰器:定义扩展组件样式

官方文档&#xff1a;Extend装饰器&#xff1a;定义扩展组件样式 [Q&A] Extend装饰器 作用 Extend用于扩展原生组件样式。 [Q&A] Extend装饰器 特点 &#xff11;・Extend仅支持在全局定义&#xff0c;不支持在组件内部定义。 &#xff12;・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合并区间 思路&#xff1a;排序&#xff0c;如果重叠&#xff0c;更新right 为max(right, curVal), 不重叠就加入res,需要单独考虑最后一次&#xff0c;因为每次都是在下一次遍历开始时判断是否加入res&#xff0c;因此 当…...

OpenCV 张正友标定法(二)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 在之前的博客OpenCV 张氏标定法中,我们没有考虑镜头畸变等因素,因此计算出的内参与外参均是理想情况下的数值,而如果我们考虑到镜头的畸变: 我们就需要考虑使用最小二乘法最小化像素坐标的重投影误差(上述所求…...

LeetCode题练习与总结:环形链表Ⅱ--142

一、题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测…...

OWL ADVENTURE Node.js环境配置与模型服务封装

OWL ADVENTURE Node.js环境配置与模型服务封装 1. 引言 如果你是一名Node.js开发者&#xff0c;最近对AI模型服务感兴趣&#xff0c;想把像OWL ADVENTURE这样的模型集成到自己的应用里&#xff0c;那你来对地方了。你可能已经看过一些模型介绍&#xff0c;知道它功能挺强&…...

博德之门3 Mod管理器:解决Mod加载顺序被重置的终极指南 [特殊字符]

博德之门3 Mod管理器&#xff1a;解决Mod加载顺序被重置的终极指南 &#x1f3ae; 【免费下载链接】BG3ModManager A mod manager for Baldurs Gate 3. 项目地址: https://gitcode.com/gh_mirrors/bg/BG3ModManager 如果你在使用BG3ModManager&#xff08;博德之门3模组…...

ECharts 5.4.3实战:3步打造科技感爆棚的流光折线图(附完整代码)

ECharts 5.4.3实战&#xff1a;3步打造科技感爆棚的流光折线图&#xff08;附完整代码&#xff09; 在数据可视化领域&#xff0c;ECharts凭借其强大的功能和灵活的配置选项&#xff0c;已经成为前端开发者的首选工具之一。特别是其丰富的动画效果&#xff0c;能够为静态数据注…...

重装系统后的环境快速恢复:包含BERT模型部署的自动化脚本

重装系统后的环境快速恢复&#xff1a;包含BERT模型部署的自动化脚本 重装系统&#xff0c;对开发者来说&#xff0c;就像一场“数字大扫除”。清爽是清爽了&#xff0c;但看着空空如也的终端和待部署的一长串服务列表&#xff0c;那种从头再来的疲惫感瞬间涌上心头。尤其是当…...

4个革新性步骤:NHSE动物森友会存档编辑器完全指南

4个革新性步骤&#xff1a;NHSE动物森友会存档编辑器完全指南 【免费下载链接】NHSE Animal Crossing: New Horizons save editor 项目地址: https://gitcode.com/gh_mirrors/nh/NHSE NHSE&#xff08;动物森友会存档编辑器&#xff09;作为一款开源免费工具&#xff0c…...

电视盒子变身高性能服务器:Armbian系统终极刷机指南

电视盒子变身高性能服务器&#xff1a;Armbian系统终极刷机指南 【免费下载链接】amlogic-s9xxx-armbian Supports running Armbian on Amlogic, Allwinner, and Rockchip devices. Support a311d, s922x, s905x3, s905x2, s912, s905d, s905x, s905w, s905, s905l, rk3588, rk…...

父子进程变量地址相同值却不同?图解Linux写时拷贝与页表机制

父子进程变量地址相同值却不同&#xff1f;图解Linux写时拷贝与页表机制 你是否曾在Linux环境下遇到过这样的现象&#xff1a;通过fork()创建的子进程与父进程打印同一个全局变量的地址时&#xff0c;两者的地址值完全相同&#xff0c;但实际读取的变量值却不同&#xff1f;这个…...

Intel XE核显PyTorch环境搭建避坑指南

1. 为什么选择Intel XE核显跑PyTorch&#xff1f; 最近很多小伙伴都在问&#xff0c;用Intel XE核显跑PyTorch到底靠不靠谱&#xff1f;作为一个在AI领域摸爬滚打多年的老司机&#xff0c;我可以很负责任地告诉你&#xff1a;完全可行&#xff01;特别是对于预算有限的学生党&a…...

Graphormer在药物发现中的应用:催化剂吸附预测落地实践

Graphormer在药物发现中的应用&#xff1a;催化剂吸附预测落地实践 1. 项目背景与价值 在药物研发和材料科学领域&#xff0c;分子属性预测一直是一项耗时且昂贵的任务。传统实验方法需要大量试错&#xff0c;而计算化学方法又面临精度与效率的平衡问题。Graphormer作为一款基…...

圆形光斑激光熔覆 Comsol 仿真:科研利器已就位

圆形光斑激光熔覆comsol仿真模型&#xff0c;模型已通过实验验证了正确性&#xff0c;确保模型一定正确可用于科研。 高斯热源&#xff0c;马兰戈尼效应&#xff0c;粘性耗散力等&#xff0c;激光熔覆过程必要项均考虑在模型中。 可根据自己需要调整工艺参数&#xff0c;做完对…...