当前位置: 首页 > 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;评测…...

BetterNCM Installer:3步完成网易云音乐插件框架安装

BetterNCM Installer&#xff1a;3步完成网易云音乐插件框架安装 【免费下载链接】BetterNCM-Installer 一键安装 Better 系软件 项目地址: https://gitcode.com/gh_mirrors/be/BetterNCM-Installer BetterNCM Installer 是一个专为网易云音乐PC版客户端设计的插件管理器…...

DanKoe 视频笔记:人生经验课:给18岁自己的信

在本节课中&#xff0c;我们将学习一位28岁人士回顾过去&#xff0c;总结出的核心人生经验。这些经验旨在帮助年轻人&#xff0c;特别是那些感到迷茫、渴望超越平凡生活的人&#xff0c;建立自主性、明确目标并采取有效行动。我们将把这些经验整理成一套清晰的教程&#xff0c;…...

Wan2.2-I2V-A14B效果对比:LSTM时序预测辅助下的动态剧情生成

Wan2.2-I2V-A14B效果对比&#xff1a;LSTM时序预测辅助下的动态剧情生成 1. 引言 想象一下&#xff0c;当你输入一段文字描述&#xff0c;AI不仅能生成对应的视频&#xff0c;还能像专业导演一样把控剧情节奏和情感起伏。这正是Wan2.2-I2V-A14B结合LSTM时序预测技术带来的突破…...

CCF和中国科协对NeurIPS更正投稿政策做出回应

点击下方卡片&#xff0c;关注“CVer”公众号AI/CV重磅干货&#xff0c;第一时间送达点击进入—>【顶会/顶刊】投稿交流群添加微信号&#xff1a;CVer2233&#xff0c;小助手拉你进群&#xff01;扫描下方二维码&#xff0c;加入CVer学术星球&#xff01;可以获得最新顶会/顶…...

Mermaid Live Editor:代码驱动图表的革新者,重新定义技术可视化流程

Mermaid Live Editor&#xff1a;代码驱动图表的革新者&#xff0c;重新定义技术可视化流程 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trendin…...

别再只测烟雾了!用STM32CubeMX+MQ-2传感器,做个厨房燃气泄漏+烟雾双检测器(附完整代码)

厨房安全卫士&#xff1a;基于STM32CubeMX与MQ-2的燃气烟雾双模检测系统 厨房是家庭安全事故的高发区域&#xff0c;燃气泄漏和烟雾积聚都可能引发严重后果。传统烟雾报警器功能单一&#xff0c;而市面上的复合型安防设备价格昂贵。本文将带你用STM32单片机和MQ-2气敏传感器&am…...

AMD Ryzen硬件调试终极指南:3大突破性能优化秘籍揭秘

AMD Ryzen硬件调试终极指南&#xff1a;3大突破性能优化秘籍揭秘 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://git…...

【课后习题答案】SystemVerilog for Verification 3rd Edition第五章(绿皮书第三版)

1 解答class MemTrans;// a. 8位logic类型的data_inlogic [7:0] data_in;// b. 4位logic类型的addresslogic [3:0] address;// c. 打印data_in和address的void函数function void print();$display("data_in 0x%h, address 0x%h", data_in, address);endfunction// …...

Qwen3-Embedding-4B入门必看:Embedding模型vs LLM生成模型的核心差异

Qwen3-Embedding-4B入门必看&#xff1a;Embedding模型vs LLM生成模型的核心差异 1. 引言&#xff1a;从关键词搜索到语义理解 你是否曾经遇到过这样的困扰&#xff1a;在搜索引擎中输入"苹果"&#xff0c;结果既出现了水果苹果的信息&#xff0c;又出现了苹果公司…...

Mojo加速Python科学计算:如何在72小时内将AI推理速度提升8.6倍(附完整可运行代码)

第一章&#xff1a;Mojo与Python混合编程概述Mojo 是一种为 AI 系统量身打造的现代系统编程语言&#xff0c;兼具 Python 的易用性与 C/C 的执行效率。它原生兼容 Python 生态&#xff0c;允许开发者在同一个项目中无缝调用 Python 模块、复用现有 NumPy/Torch 代码&#xff0c…...