重温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>)}}

结语

到此类组件已经全部完成学习,通常类组件在工作中不是经常使用,接下来要开启函数组件的学习。不断的强化自己,让自己可以在前端领域不断提升自己。

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

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

相关文章

斜率优化DP——AcWing 303. 运输小猫

斜率优化DP 定义 斜率优化DP&#xff08;Slope Optimization Dynamic Programming&#xff09;是一种高级动态规划技巧&#xff0c;用于优化具有特定形式的状态转移方程。它主要应用于那些状态转移涉及求极值&#xff08;如最小值或最大值&#xff09;的问题中&#xff0c;通…

CesiumJS【Basic】- #028 天空盒

文章目录 天空盒1 目标2 代码2.1 main.ts3 资源天空盒 1 目标 配置显示天空盒 2 代码 2.1 main.ts import * as Cesium from cesium;// 创建 Cesium Viewer 并配置地形数据和天空盒 const viewer = new Cesium.Viewer(

理解抽象工厂设计模式

目录 抽象工厂模式抽象工厂模式结构抽象工厂模式适合应用场景抽象工厂模式优缺点练手题目题目描述输入描述输出描述提示信息题解 抽象工厂模式 抽象工厂模式是一种创建型设计模式&#xff0c; 它能创建一系列相关的对象&#xff0c; 而无需指定其具体类。 抽象工厂模式结构 抽…

自定义一个MyBaits脱敏插件

自定义一个MyBaits脱敏插件 用于对查询结果中的敏感数据进行脱敏处理。这个插件将拦截ResultSetHandler对象的处理结果&#xff0c;对某些敏感字段进行脱敏。 插件实现步骤 创建脱敏插件类。注册插件。 1. 创建脱敏插件类 首先&#xff0c;我们创建一个自定义插件类 DataM…

《每天5分钟用Flask搭建一个管理系统》 第7章:用户认证

第7章&#xff1a;用户认证 7.1 用户认证的重要性 用户认证是确定用户身份的过程&#xff0c;它是任何需要用户登录的应用的关键部分。认证确保只有经过验证的用户才能访问受限资源。 7.2 Flask-Login扩展的使用 Flask-Login提供了用户会话管理的简单方法。它处理用户登录和…

AI在未来战争的应用

AI在未来战争中的应用将会非常广泛&#xff0c;其潜力巨大&#xff0c;可能会深刻改变战争的基本形态、作战方式和制胜机理。接下来介绍一些AI在未来战争中的可能应用&#xff0c;并基于最新科技新闻列出一些案例。 文章目录 Part1 战场感知与态势分析Part2 作战方案规划与决策…

深入理解策略梯度算法

策略梯度&#xff08;Policy Gradient&#xff09;算法是强化学习中的一种重要方法&#xff0c;通过优化策略以获得最大回报。本文将详细介绍策略梯度算法的基本原理&#xff0c;推导其数学公式&#xff0c;并提供具体的例子来指导其实现。 策略梯度算法的基本概念 在强化学习…

【Python3的内置函数和使用方法】

目录 Python 特点 Python 中文编码 Python 变量类型 Python列表 Python 元组 元组是另一个数据类型&#xff0c;类似于 List&#xff08;列表&#xff09; Python 字典 Python数据类型转换 Python 运算符 Python算术运算符 Python比较运算符 Python赋值运算符 Pyt…

(笔记)CentOS7上安装neovim

sudo yum install epel-release sudo yum install snapd sudo systemctl enable --now snapd.socket sudo ln -s /var/lib/snapd/snap /snap sudo snap install nvim --classic nvim ok&#xff0c;搞定 如果之前用yum安装了旧版本的neovim往下看&#xff08;之前没有安装…

一篇就够了,为你答疑解惑:锂电池一阶模型-离线参数辨识(附代码)

锂电池一阶模型-参数离线辨识 背景模型简介数据收集1. 最大可用容量实验2. 开路电压实验3. 混合动力脉冲特性实验离线辨识对应模型对应代码总结下期预告文章字数有点多,耐心不够的谨慎点击阅读。 下期继续讲解在线参数辨识方法。 背景 最近又在开始重新梳理锂电池建模仿真与S…

使用stat()函数的例子

代码&#xff1a; #include <sys/types.h> #include <sys/stat.h> #include <unistd.h> #include <stdio.h>int main(void) {struct stat st;if(-1stat("test.txt",&st)){printf("获得文件状态失败\n");return -1;}printf(&q…

【Rust】——所有的模式语法

&#x1f4bb;博主现有专栏&#xff1a; C51单片机&#xff08;STC89C516&#xff09;&#xff0c;c语言&#xff0c;c&#xff0c;离散数学&#xff0c;算法设计与分析&#xff0c;数据结构&#xff0c;Python&#xff0c;Java基础&#xff0c;MySQL&#xff0c;linux&#xf…

Unidbg调用-补环境V2

1.B站 内部依赖自定义的SignedQuery对象,需要找到apk中的类并补充环境。 package com.nb.demo;import com.github.unidbg.AndroidEmulator

llama3模型部署时遇到的问题及解决方案

在llama3模型部署时&#xff0c;会遇到一系列问题&#xff0c;这里就作者所遇到的问题与解决方法分享一下。 注意&#xff1a;这里是从llama3 github主页上给的方法一步步做的&#xff0c;不适用于其他部署大模型的方法。 文章目录 ERROR 403&#xff1a;Forbidden安装依赖时出…

洛谷 P1548 [NOIP1997 普及组] 棋盘问题

题目 洛谷 P1548 [NOIP1997 普及组] 棋盘问题 [NOIP1997 普及组] 棋盘问题 题目背景 NOIP1997 普及组第一题 题目描述 设有一个 N M N \times M NM 方格的棋盘 ( 1 ≤ N ≤ 100 , 1 ≤ M ≤ 100 ) (1≤N≤100,1≤M≤100) (1≤N≤100,1≤M≤100) 求出该棋盘中包含有多少个正…

牛客C++刷题记录

C 运算符优先级 运算符优先级顺口溜&#xff1a;淡云一笔&#xff0c;鞍落三服。 淡&#xff1a;单目运算符&#xff1b; 云&#xff1a;算数运算符&#xff1b; 一&#xff1a;移位运算符&#xff1b; 笔&#xff1a;比较运算符&#xff1b; 鞍&#xff1a;按位运算符&a…

MySQL高级-MVCC-undo log 版本链

文章目录 1、undo log2、undo log 版本链2.1、然后&#xff0c;有四个并发事务同时在访问这张表。2.1.1、修改id为30记录&#xff0c;age改为32.1.2、修改id为30记录&#xff0c;name改为A32.1.3、修改id为30记录&#xff0c;age改为10 2.2、总结 1、undo log 回滚日志&#xf…

文件系统(操作系统实验)

实验内容 &#xff08;1&#xff09;在内存中开辟一个虚拟磁盘空间作为文件存储器&#xff0c; 在其上实现一个简单单用户文件系统。 在退出这个文件系统时&#xff0c;应将改虚拟文件系统保存到磁盘上&#xff0c; 以便下次可以将其恢复到内存的虚拟空间中。 &#xff08;2&…

算法训练(leetcode)第二十一天 | 93. 复原 IP 地址、78. 子集、90. 子集 II

刷题记录 93. 复原 IP 地址78. 子集90. 子集 II 93. 复原 IP 地址 leetcode题目地址 题目有一个很重要的要求&#xff1a;你 不能 重新排序或删除 s 中的任何数字。你可以按 任何 顺序返回答案。 也就是说ip地址中需要包含整个字符串中的字符且顺序不可变。 ip地址的每一个数…

数字孪生煤矿智能化综合管控平台

煤矿可视化通过图扑 HT 实现实时数据集成和三维建模仿真&#xff0c;呈现井下环境、设备状态和生产状况等多维度数据&#xff0c;帮助管理人员进行直观监控和精准分析。该技术提升了运营效率和安全水平&#xff0c;为煤矿作业提供了智能化的管理解决方案&#xff0c;有助于减少…