React@16.x(15)PureComponent 和 memo
目录
- 1,什么是 PureComponent
- 2,什么是 memo
- 3,举例
- 3.2,优化1
- 3.1,优化2-函数位置
- 4,注意点
- 4.1,为了提升效率,应该尽量使用 `PureComponent`
- 4.2,不要直接改变之前的状态,而是覆盖
- 4.3,为什么不进行深比较?
1,什么是 PureComponent
纯组件,为了避免不必要的渲染(运行 render
)来提升效率。
优化思路:如果一个组件的状态和属性都没有变化,那就不用重新渲染。
具体实现:当某个组件 extends PureComponent
时,则该组件的 shouldComponentUpdate
中会对新旧属性和状态进行浅比较,如果都相等则不会重新渲染(return false
)。
// 原理大致如下:
import React, { Component } from "react";export default class Task extends Component {shouldComponentUpdate(nextProps, nextState) {if (isEqual(this.props, nextProps) && isEqual(this.state, nextState)) {return false;}return true;}render() {}
}const isEqual = (obj1, obj2) => {for (const key in obj1) {if (obj1[key] !== obj2[key]) {return false}}return true
}
效果等于:
import React, { PureComponent } from "react";export default class Task extends PureComponent {render() {}
}
2,什么是 memo
React.memo
是一个HOC,相当于给函数组件套了一个 PureComponent
,让函数组件也能进行优化。
// 大致原理:
import React, { PureComponent } from "react";function memo(funcComp) {return class Memo extends PureComponent {render() {return <>{funcComp(this.props)}</>}};
}
3,举例
一个展示列表的组件,逻辑很简单,结构如下:
-- TaskContainer-- TaskList-- Task-- TaskAdd(一个输入框,可以新增列表项)
TaskContainer(console.log("container render");
)
import React, { Component } from "react";
import TaskAdd from "./TaskAdd";
import TaskList from "./TaskList";export default class TaskContainer extends Component {state = {list: Array.from(new Array(10)).map((item, index) => `任务${index}`),};render() {console.log("container render");return (<div><TaskAddchangeList={(newTask) => {this.setState({list: [...this.state.list, newTask],});}}></TaskAdd><TaskList list={this.state.list}></TaskList></div>);}
}
TaskList(console.log("list render");
)
import React, { Component } from "react";
import Task from "./Task";export default class TaskList extends Component {render() {console.log("list render");return (<div>{(this.props.list || []).map((m) => (<Task name={m} key={m}></Task>))}</div>);}
}
TaskAdd(console.log("add render");
)
import React, { Component } from "react";export default class TaskAdd extends Component {state = {taskName: "",};render() {console.log("add render");return (<div><inputvalue={this.state.taskName}onChange={(e) => {this.setState({ taskName: e.target.value });}}></input><button onClick={() => this.props.changeList(this.state.taskName)}>添加任务</button></div>);}
}
Task(console.log("task render");
)
import React, { Component } from "react";export default class Task extends Component {render() {console.log("task render");return <div>{this.props.name}</div>;}
}
使用:
import React, { Component, Component } from "react";
import TaskContainer from "./components/Pure/TaskContainer";export default class App extends Component {render() {return <TaskContainer></TaskContainer>;}
}
初次渲染时,打印结果:
container render
add render
list render
10次 task render
添加一个列表项时,打印结果:
container render
add render
list render
11次 task render
3.2,优化1
当添加一个列表项时,已经被渲染的10个 task 不应该再次渲染,因为它们自身没有发生任何变化。只应该渲染新增的那一个即可。
此时就可以用到 PureComponent
:
export default class Task extends Component {}
// 替换为
export default class Task extends PureComponent {}
这时再添加一个列表项时,在打印结果可以看到 Task 只渲染了一次(新增的)。
container render
add render
list render
task render
3.1,优化2-函数位置
注意到新增列表时,TaskAdd
组件在点击按钮后,不应该再次渲染(不应该打印 add render
),因为它的状态和属性也没有发生变化。
也做下替换:
export default class TaskAdd extends Component {}
// 替换为
export default class TaskAdd extends PureComponent {}
发现结果并没有发生变化,add render
依旧会打印。
这时因为在 TaskContainer
中,给组件 TaskAdd
传递的属性 changeList
是直接写在组件上的。这样每次执行 TaskContainer.render()
时,都算作一个新的属性,所以 TaskAdd extends PureComponent
没有生效。
做以下替换即可:
export default class TaskContainer extends Component {render() {return (<div><TaskAddchangeList={(newTask) => {this.setState({list: [...this.state.list, newTask],});}}></TaskAdd></div>);}
}// 替换为
export default class TaskContainer extends Component {changeList = (newTask) => {this.setState({list: [...this.state.list, newTask],});};render() {return (<div><TaskAdd changeList={this.changeList}></TaskAdd></div>);}
}
4,注意点
4.1,为了提升效率,应该尽量使用 PureComponent
4.2,不要直接改变之前的状态,而是覆盖
旧的状态应该是不可变的(immutable),只能通过创建新状态来覆盖之前的状态。
举例,当使用 PureComponent
时,下面的代码不会更新数据。因为进行的是浅比较,此时数组地址相同。
this.state.task.push(xxx)
this.setState({task: this.state.task
})
换成下面的方式就可以了:产生了新数组。
this.setState({task: [...this.state.task, xxx]
})
// 或
this.setState({task: this.state.task.concat(xxx)
})
如果是对象的话:产生了新对象。
this.setState({obj: {...this.state.obj,b: xxx}
})
// 或
this.setState({obj: Object.assign({}, this.state.obj, {b: xxx})
})
4.3,为什么不进行深比较?
因为本来就是为了提升效率,减少 render
执行次数。深比较会比较费时,得不偿失。
以上。
相关文章:
React@16.x(15)PureComponent 和 memo
目录 1,什么是 PureComponent2,什么是 memo3,举例3.2,优化13.1,优化2-函数位置 4,注意点4.1,为了提升效率,应该尽量使用 PureComponent4.2,不要直接改变之前的状态&#…...
[C++11/14新特性] tuple元组介绍
C11 标准新引入了一种类模板,命名为 tuple(中文可直译为元组)。tuple 最大的特点是:实例化的对象可以存储任意数量、任意类型的数据。tuple 的应用场景很广泛,例如当需要存储多个不同类型的元素时,可以使用…...
小熊家务帮day8-day9 客户管理模块2 (用户定位,地址簿,实名认证,银行卡信息上传等功能)
客户管理模块 0.用户定位功能0.1 需求0.2 接口分析0.3 接口开发Controller层开发Service层开发 1.我的地址簿功能1.1 需求1.2 数据库设计1.3 新增地址簿1.3.1 接口设计1.3.2 接口开发Controller层开发Service层开发测试功能 1.4 地址簿查询1.4.1 接口设计1.4.2 接口开发Control…...
amis 事件动作 和 行为按钮 常用用法
行为按钮 action (仅是对click事件的处理) actionType:这是 action 最核心的配置,来指定该 action 的作用类型,支持:ajax、link、url、drawer、dialog、confirm、cancel、prev、next、copy、close。 Butt…...
4K高刷显示器 - 蚂蚁电竞ANT27VU
可以毫不夸张地说,每一局游戏最终能够取得胜利,实际上都与一套极为优秀的电竞 PC 有着紧密的关联,因为其能够提供强大的性能支持与流畅的体验。同样的道理,一套优秀的电竞 PC 若想发挥出最佳的效果,那也都离不开一台能…...
图解支付系统的渠道路由设计
大家好,我是隐墨星辰,今天和大家聊聊渠道路由设计。 这篇文章主要讲清楚:渠道路由是什么,为什么需要渠道路由,渠道路由的几种形态,一个简洁而实用的基于规则的渠道路由设计。 注:有些公司称渠…...
Leecode---347:输出前k个高频元素(使用unordered_map)
题目: 给你一个整数数组 nums 和一个整数 k ,请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 思路: 三步: 1、用map来记录每个元素出现的次数 2、按map中的值大小排序,先让其有序,再逆…...
k8s ceph(静态pvc)
1.在 Kubernetes 节点上安装ceph-common 包。这个包包含了连接到 Ceph 集群所需的工具和库。可以使用以下命令在每个节点上安装: sudo apt-get install ceph-common2.在 Kubernetes 中创建一个 Secret 对象,用于存储连接到 Ceph 集群所需的密钥和配置信息…...
Qt QScript 之 C++/JavaScript相互调用
文章目录 Qt Script什么是ECMAScriptQt 中JavaScriptclass 详解Basic UsageQObject对脚本引擎可用使用信号槽connect 三种模式访问属性, 子对象使c++对象可用于用Qt Script编写的脚本C++ 类成员函数可用于脚本C++ 类属性可用于脚本对脚本中的c++对象信号的反应函数对象和本机函…...
可能会引起空指针
PreparedStatement preparedStatement null; preparedStatement conn.prepareStatement(sql); 如果直接下面这个可能会赋值给空指针 因为要在try{}和catch{}里面都用,所以要定义在try外面为null //如果只是测试,可以PreparedStatement preparedStatement conn.prepareSta…...
Linux input输入子系统
Linux input 更多内容可以查看我的github Linux输入子系统框架 Linux输入子系统由驱动层、核心层、事件处理层三部分组成。 驱动层:输入设备的具体驱动程序,负责与具体的硬件设备进行交互,并将底层的硬件输入转化为统一的事件形式ÿ…...
dataworks调度参数
概述 调度参数是DataWorks任务调度时使用的参数,调度参数会根据任务调度的业务时间及调度参数的取值格式自动替换取值,实现在任务调度时间内参数的动态取值。 调度参数通过赋值方式分为自定义参数(推荐)和系统内置变量两大类。 …...
JavaScript第五讲:事件,条件循环语句,错误处理
前言 在编程的世界里,事件、条件和循环语句、以及错误处理是构建任何复杂程序或应用的基石。无论是开发一个简单的网页交互,还是构建一个庞大的企业级系统,这些基础概念都扮演着至关重要的角色。今天星途将通过这篇文章,分别深入…...
BrainGPT1,一个帮你b站点歌放视频的多模态多轮对话模型
BrainGPT1,一个帮你b站点歌放视频的多模态多轮对话模型 返回论文目录 项目地址 模型地址 作者:华东师范大学,计算机科学与技术学院,智能教育研究院的小怪兽会微笑。 介绍 BrainGPT1是一个工具调用多轮对话模型,与G…...
带DSP音效处理D类数字功放TAS5805M中文资料
国产替代D类数字功放中文资料访问下方链接 ACM8628 241W立体声182W单通道数字功放中文寄存器表 内置DSP多种音频处理效果ACM8628M-241W立体声或182W单通道数字功放 1 特性 具有增强处理能力和低功率损耗的 TAS5805M 23W、无电感器、数字输入、立体声、闭环 D 类音频放大器 …...
java中BigDecimal的比较
BigDecimal是Java中的一个类,位于java.math包中,它提供了任意精度的有符号十进制数字的表示,以及对这些数字进行算术运算的方法 BigDecimal的主要用途包括: 1.金融计算:金融领域对数值的精度要求非常高,使…...
张大哥笔记:你卖什么,就反着来卖
普通人打工的一生,就是努力工作,买房,买车,送孩子上好的学校,为了孩子不要输在起跑线上,拼命报各种补习班等,这些都是普通人认为的主流价值观文化,也造就了一批批的赚钱机器…...
Nginx(openresty) 开启gzip压缩功能 提高web网站传输速度
1 开启nginx gzip压缩后,网页的图片,css、js等静态资源的大小会减少,节约带宽,提高传输效率,给用户快的体验,给用户更好的体验. 2 安装 #centos 8.5 yum install gzip 3 配置 #建议统一配置在http段 vim /usr/loca…...
nn.Embedding使用
nn.Embedding使用 Embedding.weight会从标准正态分布中初始化成大小为(num_embeddings, embedding_dim)的矩阵 PE矩阵的作用就是替换这个标准正态分布 input中的标号表示从矩阵对应行获取权重来表示单词 # 1.设置embedding结构 max_seq_len 1000 # 句…...
Qt6 mathgl数学函数绘图
1. 程序环境 Qt6.5.1, mingw11.2mathgl 8.0.1: https://sourceforge.net/projects/mathgl/,推荐下载mathgl-8.0.LGPL-mingw.win64.7z,Windows环境尝试自己编译mathgl会缺失一些库,补充完整也可以自己编译,路径"D:\mathgl-8.0.LGPL-mingw.win64\bin"添加至系统环境…...
Nginx配置文件中静态资源文件禁止通过目录查看
Nginx配置文件中静态资源文件禁止通过目录查看 nginx作为文件服务器访问静态资源时,默认是可以通过目录路径查看该目录下的所有文件的,这样会被检查出漏洞,容易造成静态资源泄露。 方案 location /images {autoindex off;autoindex_exact_…...
力扣Hot100-有效的括号(栈stack)
给定一个只包括 (,),{,},[,] 的字符串 s ,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应的相同类型的左括…...
Android下HWC以及drm_hwcomposer普法(上)
Android下HWC以及drm_hwcomposer普法(上) 引言 按摩得全套,错了,做事情得全套,普法分析也是如此。drm_hwcomposer如果对Android图形栈有一定研究的童鞋们应该知道它是Android提供的一个的图形后端合成处理HAL模块的实现。但是在分析这个之前…...
OpenCV学习 基础图像操作(十七):泛洪与分水岭算法
原理 泛洪填充算法和分水岭算法是图像处理中的两种重要算法,主要用于区域分割,但它们的原理和应用场景有所不同,但是他们的基础思想都是基于区域迭代实现的区域之间的划分。 泛洪算法 泛洪填充算法(Flood Fill)是一…...
Docker基础命令(三)
同步docker容器中的时间和本地时间一致 背景: 在很多时候, 训练模型的时候, 记录的log日志中标记的时间和实际的时间不一致, 往往是容器时间和本地时间不一致照成的. 方案 场景一: 正在运行的容器,可以宿主机直接执行命令给某个容器同步时间 #方法1 直接在宿主机…...
Python的第三方库OS库
读者大大们好呀!!!☀️☀️☀️ 🔥 欢迎来到我的博客 👀期待大大的关注哦❗️❗️❗️ 🚀欢迎收看我的主页文章➡️寻至善的主页 文章目录 🔥前言🚀OS/SHUTIL 的方法描述🚀OS/SHUTIL…...
两个数相加减高级实现
不使用实现两数相加 #include <stdio.h> int plus(int a, int b) {int sum0,addication0;while(b!0){sum a^b;addication (a&b)<<1;a sum;b addication;}return a; }不使用-实现两数相减 #include <stdio.h> int sub(int a, int b) {int sum0,abdc…...
小白跟做江科大32单片机之对射式红外传感器计次
原理部分 1中断示意图,中断会打断主函数的执行,终端执行完成之后再返回主函数继续执行 2.STM32中断 这些灰色的是内核中断 这些白色的是普通中断 3.NVIC统一管理中断,每个中断通道都拥有16个可编程的优先等级,可对优先级进行分组…...
安装Kubernetes v3 ----以docker的方式部署
以docker的方式部署 docker run -d \ --restartunless-stopped \ --namekuboard \ -p 80:80/tcp \ -p 10081:10081/tcp \ -e KUBOARD_ENDPOINT"http://192.168.136.55:80" \ -e KUBOARD_AGENT_SERVER_TCP_PORT"10081" \ -v /root/kuboard-data:/data \ e…...
新游启航 失落的方舟台服注册指南 一文教会你方舟台服注册
新游启航!失落的方舟台服注册指南!一文教会你方舟台服注册 失落的方舟作为本月最受期待游戏之一,在上线之际许多玩家已经有点急不可待了。这款游戏是由开发商Smile gate开发的一款MMORPG类型游戏,这款游戏的基本玩法与其他MMORPG…...
运维开发详解
运维开发(DevOps)是开发(Development)和运维(Operations)的结合,旨在通过自动化和协作提高软件开发和交付的效率、速度和可靠性。DevOps强调文化、实践和工具的融合,以实现持续集成&…...
英伟达(NVIDIA)H100性能及应用场景
英伟达H100是一款性能强大的GPU芯片,其关键性能参数和应用领域可以归纳如下: 一、性能参数 架构:H100采用了新一代的Hopper架构,拥有高达1.8万亿次/秒的张量处理能力和高达840 TFLOPS的FP8张量性能。CUDA核心数:H100…...
充电宝怎么选?充电宝目前什么牌子质量好耐用?盘点好用充电宝
充电宝怎么选?是不是很多朋友在选充电宝上非常的纠结?在买充电宝上面还是非常有讲究的!市面上的充电宝虽然多,但是不排除很多存在安全隐患的,如果稍微没有挑选好充电宝的话,买来的充电宝极大可能是存在非常…...
智能视频监控技术为游泳馆安全护航,助力安全管理新升级
随着社会的进步和科技的发展,视频监控技术在各行各业的应用越来越广泛。游泳馆作为公共场所,每天都会有大量的游泳者进出。在这样的环境中,有时难免会发生一些意外事故,如溺水、摔倒等。因此,视频监控建设的必要性尤为…...
Windows通过cmd运行快速启动应用
Windows如何通过cmd运行快速启动应用? 在Windows操作系统中,可以通过配置环境变量的方式将文件的路径配置到环境变量的path中,配置完成后可以在cmd中输入对应的应用名称即可启动应用,具体操作如下: 1. 添加应用程序路径…...
271 基于matlab的可调Q因子小波变换故障诊断
基于matlab的可调Q因子小波变换故障诊断,可用在轴承、齿轮、活塞等故障诊断中,程序中包含了原始TQWT工具箱和轴承振动信号信号的谱包络的求取。通过仿真数据、实际轴承数据说明了方法的效果。程序已调通,可直接运行。 271 可调Q因子小波变换 …...
吴恩达深度学习个人笔记
1. 上一个视频提到的房地产领域,我们不就使用了一个普遍标准神经网络架构吗 而对于图像识别处理问题,我们则要使用卷积神经网络(Convolution Neural Network),即CNN。 对于序列数据,例如音频,有一个时间组件,随着时间的推移,音频被播放出来, 所以音频是最自然的表…...
Spring的依赖注入DI
调用构造器方法注入: 需要有对应匹配的构造器 不然出现异常No matching constructor Spring构造器注入有三种不同方式 name :按照参数名称 <bean id"stu" class"com.xja.bean.Student"> <constructor-arg name"name" value"rk&…...
Java 获取和修改期日与时间的各种操作方法
LocalDateTime获取当地日期和时间 import java.time.LocalDateTime; /*LocalDateTime.now() 获取当前时间*/ public class LocalDateTimeDemo {public static void main(String[] args) {LocalDateTime time1 LocalDateTime.now();System.out.println(time1);//2024-06-01T13…...
【ubuntu20】--- 定时同步文件
在编程的艺术世界里,代码和灵感需要寻找到最佳的交融点,才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里,我们将共同追寻这种完美结合,为未来的世界留下属于我们的独特印记。 【Linux命令】--- 多核压缩命令大全&…...
网吧|基于SprinBoot+vue的网吧管理系统(源码+数据库+文档)
网吧管理系统 目录 基于SprinBootvue的网吧管理系统 一、前言 二、系统设计 三、系统功能设计 1 管理员功能模块 2 网管功能模块 3 会员功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取: 博主介绍&#…...
[C/C++] -- Libcurl开发
libcurl 是一个功能强大的 C 语言库,用于实现各种网络传输协议的客户端功能。它是 Curl 工具的核心,并提供了一个简单、灵活、高效的 API,允许开发人员在他们的应用程序中轻松地执行网络操作。 以下是 libcurl 的一些主要特点和功能…...
Streamsets-JDBC模式使用更新时间字段数据同步
StreamSets的开源地址:https://github.com/streamsets/datacollector-oss Streamsets官网地址:https://streamsets.com/ Streamsets文档地址:https://docs.streamsets.com/portal/datacollector/3.16.x/help/index.html 我又来写Streamsets了…...
Nodejs-- 网络编程
网络编程 构建tcp服务 TCP tcp全名为传输控制协议。再osi模型中属于传输层协议。 tcp是面向连接的协议,在传输之前需要形成三次握手形成会话 只有会话形成了,服务端和客户端才能想发送数据,在创建会话的过程中,服务端和客户…...
React@16.x(14)context 举例 - Form 表单
目录 1,目标2,实现2.1,index.js2.2,context.js2.2,Form.Input2.3,Form.Button 3,使用 1,目标 上篇文章说到,context 上下文一般用于第3方组件库,因为使用场景…...
十几款基于ChatGPT的免费神器,每个都是王炸!
十几款基于ChatGPT的免费神器,每个都是王炸! 1、ChatGPT ChatGPT非常强大,但注册需要魔法和国外的手机号,大部分人都没法使用。还好有一些基于API开发的体验版,我收集了一些可以直接使用的站点分享给大家,…...
devicemotion 或者 deviceorientation在window.addEventListener 事件中不生效,没有输出内容
问题:devicemotion 或者 deviceorientation 在window.addEventListener 事件中不生效,没有输出内容 原因: 1、必须在Https协议下才可使用 2、必须用户手动点击click事件中调用 ,进行权限申请 源码: <!DOCTYPE h…...
java单元测试如何断言异常
在junit单元测试中,我们可以使用 org.junit.Assert.assertThrows 包下的 assertThrows() 方法 这个方法返回了一个泛型的异常 public static <T extends Throwable> assertThrows(Class<T> expectedType, Executable executable) 假设我们有以下…...
C语言| n的阶乘相加
逻辑性较强,建议记住。 分析思路: 假如n4:m m * i; sum sum m; 1)当i1时,m1, sum1。 2)当i2时,m12, sum112。 3)当i3时,m123, sum112123。 4)当i4时&…...
cwiseMax、cwiseMin函数
一、cwiseMax含义 cwiseMax是Eigen库中的一个函数,用于求两个矩阵或向量的逐元素最大值。它的作用类似于std::max函数,但是可以同时处理多个元素,且支持矩阵和向量。 举例: 例如,对于两个向量a和b,cwiseMax…...