使用 useMemo 和 React.memo 优化 React 组件渲染
在 React 中，性能优化是一个重要的主题，特别是在复杂的组件树中。本文将演示如何在同一个父组件中使用 useMemo 和 React.memo 来优化子组件的渲染。
1. 组件结构
创建一个父组件，包含两个子组件：
- MemoChild：使用
React.memo进行优化。 - ExpensiveChild：使用
useMemo缓存。
示例：
import React, { useState, useMemo } from 'react';// 子组件，使用 React.memo
const MemoChild = React.memo(({ data }) => {console.log('MemoChild rendered');return <div>{data}</div>;
});// 子组件，使用 useMemo 缓存
const ExpensiveChild = ({ data }) => {console.log('ExpensiveChild rendered');return <div>{data}</div>;
};// 父组件
function Parent() {const [count, setCount] = useState(0);const [data, setData] = useState('Initial Data');// 使用 useMemo 来缓存 ExpensiveChildconst memoizedExpensiveChild = useMemo(() => {console.log('Calculating ExpensiveChild');return <ExpensiveChild data={data} />;}, [data]);return (<div><h1>Parent Component</h1><MemoChild data={`Count: ${count}`} />{memoizedExpensiveChild}<button onClick={() => setCount(count + 1)}>Increment Count</button><button onClick={() => setData('New Data')}>Update Data</button></div>);
}export default Parent;
2. 组件功能解析
MemoChild
- 使用
React.memo包裹，只有当其data属性变化时才会重新渲染。
ExpensiveChild
- 普通的子组件，父组件使用
useMemo来缓存其实例。 - 只有当
data属性变化时，useMemo会重新计算并返回新的组件实例。
Parent
- 管理两个状态：
count和data。 - 点击“Increment Count”按钮时，只有
MemoChild会更新，而ExpensiveChild的引用保持不变。 - 点击“Update Data”按钮时，
ExpensiveChild会重新渲染，因为data发生了变化。
3. 运行结果
点击“Increment Count”按钮
count状态更新，MemoChild会重新渲染，控制台输出：MemoChild renderedExpensiveChild不会重新渲染，控制台不会输出。
点击“Update Data”按钮
data状态更新，ExpensiveChild会重新渲染，控制台输出：Calculating ExpensiveChild ExpensiveChild rendered
4. useMemo 和 React.memo 对比：
useMemo
- Hook钩子函数，用于缓存计算结果。只有当依赖项变化时，才会重新计算。
使用useMemo缓存ExpensiveChild实例，避免不必要的重新渲染。
React.memo
- 高阶组件，缓存组件的渲染结果。只有当传入的 props 发生变化时，组件才会重新渲染。
- 适用于根据 props 变化控制渲染的场景。
5. 渲染逻辑总结
基本数据类型（如 number、string、boolean）
- 当组件的 props 是基本数据类型时，如果其值未发生变化，
React.memo不会重新渲染组件。
引用数据类型（如 object、array）
- 当组件的 props 是引用数据类型时，
React.memo会进行浅比较。 - 如果引用相同，组件不会重新渲染；如果引用不同，组件会重新渲染。
6. 关键点
- 基本数据类型的比较：只要值相同，组件不会重新渲染。
- 引用数据类型的比较：如果引用相同，组件不会重新渲染；如果引用不同（无论内容是否相同），组件会重新渲染。
相关文章：
使用 useMemo 和 React.memo 优化 React 组件渲染
在 React 中，性能优化是一个重要的主题，特别是在复杂的组件树中。本文将演示如何在同一个父组件中使用 useMemo 和 React.memo 来优化子组件的渲染。 1. 组件结构 创建一个父组件，包含两个子组件： MemoChild：使用 R…...
像素流送api ue多人访问需要什么显卡服务器
关于像素流送UE推流，在之前的文章里其实小芹和大家聊过很多，不过今天偶然搜索发现还是有很多小伙伴，在搜索像素流送相关的问题，搜索引擎给的提示有这些。当然这些都是比较短的词汇，可能每个人真正遇到的问题和想获取的…...
Bert+CRF的NER实战
CRF（条件随机场-Conditional Random Field） 原始本文：我在北京吃炸酱面 标注示例： 我O在O北B-PLA京I-PLA吃O炸B-FOOD酱I-FOOD面I-FOOD CRF： 目的：提出一些不可能出现的预测组合（例如I-PLA不能…...
python学习笔记8-函数2
参数传递 传不可变对象 & 传可变对象 def func(b):print(id(a), a) #140737041872600 234print(id(b), b) #140737041872600 234a 234 func(a)def func(b):print(id(a), a) #1413554098560 [343]print(id(b), b) #1413554098560 [343]a [343] func(a)def func(b):b.appe…...
【linux学习指南】详解Linux进程信号保存
文章目录 📝保存信号🌠 信号其他相关常⻅概念🌉在内核中的表⽰ 🌠 sigset_t🌠信号集操作函数🌉sigprocmask🌉sigpending 🚩总结 📝保存信号 🌠 信号其他相关常…...
Postman设置接口关联，实现参数化
🍅 点击文末小卡片 ，免费获取软件测试全套资料，资料在手，涨薪更快 postman设置接口关联 在实际的接口测试中，后一个接口经常需要用到前一个接口返回的结果， 从而让后一个接口能正常执行，这…...
ORACLE之DBA常用数据库查询
数据库信息 数据库概要select a.name "DB Name", e.global_name "Global Name", c.host_name "Host Name", c.instance_name "Instance Name" , DECODE(c.logins,RESTRICTED,YES,NO) "Restricted Mo…...
C++之C++11新特性（三）--- 智能指针
目录 一、智能指针 1.1 为什么需要智能指针 1.2 内存泄漏 1.2.1 内存泄漏的基本概念 1.2.2 内存泄漏的分类 1.2.3 如何避免内存泄漏 1.3 智能指针的使用及其原理 1.3.1 RAII 1.3.2 智能指针的基本原理 1.3.3 auto_ptr 1.3.4 unique_ptr 1.3.5 shared_ptr 1.3.6 sha…...
12 设计模式之工厂方法模式
一、什么是工厂方法模式？ 1.定义 在软件开发中，设计模式 是解决常见软件设计问题的最佳实践。而 工厂方法模式（Factory Method Pattern） 作为创建型设计模式之一，常常被用来解决对象创建问题。它通过将对象的创建交给…...
Python 自动化办公的 10 大脚本
大家好，我是你们的 Python 讲师！今天我们将讨论 10 个实用的 Python 自动化办公脚本。这些脚本可以帮助你简化日常工作，提高效率。无论是处理 Excel 文件、发送邮件，还是自动化网页操作，Python 都能派上用场。 1. 批量…...
十一、快速入门go语言之接口和反射
文章目录 接口:one: 接口基础:two: 接口类型断言和空接口:star2: 空接口实现存储不同数据类型的切片/数组:star2: 复制切片到空接口切片:star2: 类型断言 反射 📅 2024年5月9日 📦 使用版本为1.21.5 接口 十、Java类的封装和继承、多态 - 七点半的菜市…...
Python中字符串和正则表达式
Python中字符串和正则表达式 在Python编程中，字符串是最常用的数据类型之一。字符串用于表示文本数据，而正则表达式则是一种强大的工具，用于处理和匹配字符串中的模式。本文将介绍Python中的字符串操作、字符串格式化以及如何使用正则表达式…...
力扣刷题TOP101：8.BM10 两个链表的第一个公共结点
目录： 目的 思路 复杂度 记忆秘诀 python代码 目的 两个无环的单向链表，它们的第一个公共结点{{6,7}。 思路 这个任务是找到两个链表的第一个公共结点。可以看作两个心机boy偷偷补课翻车事件。平时嘴上说自己在家玩游戏，实际上背地里都偷…...
⽂件操作详解
⽬录 一 文件操作的引入 1 为什么使⽤⽂件？ 2 什么是⽂件？ 3 文件分类（1 从⽂件功能的⻆度来分类：程序⽂件/数据⽂件 2根据数据的组织形式：为⽂本⽂件/⼆进制⽂件） 二 ⽂件的打开和关闭 1 …...
UR开始打中国牌，重磅发布国产化协作机器人UR7e 和 UR12e
近日，优傲（UR）机器人公司立足中国市场需求，重磅推出UR7e和UR12e 两款本地化协作机器人。它们延续优傲（UR）一以贯之的高品质与性能特质，着重优化负载自重比，且在价格层面具竞争力&…...
PostgreSQL实现透视表查询
PostgreSQL 8.3版本发布时，引入了一个名为tablefunc的新扩展。这个扩展提供了一组非常有趣的函数。其中之一是交叉表函数，用于创建数据透视表。这就是我们将在本文中讨论的内容。 需求说明 解释此函数如何工作的最简单方法是使用带有数据透视表的示例…...
C#里怎么样使用Array.BinarySearch函数？
C#里怎么样使用Array.BinarySearch函数？ 因为二分算法如此重要，所以要多加练习。 但是它的返回值，也有三种状态，导致很多人使用它的时候， 也感觉到迷惑的。 在这里的例子演示了三种返回值的使用： /** C# Program to Search an element with Array Indices*/ using …...
量化交易系统开发-实时行情自动化交易-8.5.VNPY平台
19年创业做过一年的量化交易但没有成功，作为交易系统的开发人员积累了一些经验，最近想重新研究交易系统，一边整理一边写出来一些思考供大家参考，也希望跟做量化的朋友有更多的交流和合作。 接下来会对于VNPY平台介绍。 VN.PY 是…...
分治算法中的主定理及其应用
引言 学习递归算法的时候，找到了用来计算算法复杂度的主定理。问大语言模型，发现回答的主定理描述有所不同。本文比较了两个不同版本中表述的差异。并给出一些例子用来计算分治递归类算法的复杂度。 主定理的不同版本 版本1 在《算法导论》第三版第四…...
前端的面试题
1.常用的块与行属性内标签有哪些？有什么特征？ 块标签：div、h1~h6、ul、li、table、p、br、form。 特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行 行标签：span、a、img、text…...
vue实现excel导出导入
文章目录 安装xlsx依赖和file-saver依赖Excel导出使用element-ui的el-table展示数据定义导出按钮将数据导出 excel导入定义文件导入显示框定义导入按钮解析选择的文件进行导入 安装xlsx依赖和file-saver依赖 npm install xlsx -S npm install file-saver -SExcel导出 使用ele…...
婚纱摄影管理系统｜Java｜SSM｜VUE｜ 前后端分离
【重要1⃣️】前后端源码万字文档部署文档 【重要2⃣️】正版源码有问题包售后 【重要3⃣️】虚拟可复制品不支持退换货 【重要3⃣️】虚拟可复制品不支持退换货 【重要3⃣️】虚拟可复制品不支持退换货 【包含内容】 【一】项目提供非常完整的源码注释 【二】相关技术栈文档 【…...
对拍详细使用方法
对拍的作用 对于我们在学校OJ，cf，牛客…各种只提供少量测试数据的题目，常常交上代码常常超时，能写出正确的暴力代码而题目要求的时间复杂度更低。然而这时你写出了能通过样例且时间复杂度更低的代码，但交上去就是错误…...
Flume 与 Kafka 整合实战
目录 一、Kafka 作为 Source【数据进入到kafka中，抽取出来】 （一）环境准备与配置文件创建 （二）创建主题 （三）测试步骤 二、Kafka 作为 Sink数据从别的地方抽取到kafka里面】 （…...
Web开发技术栈选择指南
互联网时代的蓬勃发展，让越来越多人投身软件开发领域。面对前端和后端的选择，很多初学者往往陷入迷茫。让我们一起深入了解这两个领域的特点，帮助你做出最适合自己的选择。 在互联网发展的早期，前端开发主要负责页面布局和简单的…...
社群赋能电商：小程序 AI 智能名片与 S2B2C 商城系统的整合与突破
摘要：本文聚焦于社群在电商领域日益凸显的关键地位，深入探讨在社群粉丝经济迅猛发展背景下，小程序 AI 智能名片与 S2B2C 商城系统如何与社群深度融合，助力电商突破传统运营局限，挖掘新增长点。通过分析社群对电商的价值…...
C++11 http服务端和客户端库cpp-httplib
C11 http服务端和客户端库cpp-httplib 环境： http: yhirose/cpp-httplib v0.18.1 json: nlohmann/json v3.11.31. 简介 cpp-httplib 是一个轻量级且易于使用的 C11 HTTP 库，由 yhirose 开发和维护，开源协议为MIT。它支持 HTTP/HTTPS 协议&…...
spring-boot自定义ApplicationListener及源码分析
ApplicationListener是spring boot应用启动时的事件监听器。监听的事件有（包括但不限于）： （1）接下来，我们先通过一个例子实现自定义ApplicationListener： 监听器需要实现ApplicationListener<…...
打造双层环形图：基础与高级渐变效果的应用
在数据可视化领域，环形图因其独特的展示方式而广受欢迎。今天，我们将通过ECharts库来创建一个具有双层渐变效果的高级环形图。本文将详细介绍如何实现这种视觉效果。 1. 环形图基础 首先，我们需要了解环形图的基本构成。环形图由内外两个圆…...
BUGKU printf
整体思路 实现循环-->获取libc版本和system函数地址->将strcpy的got表项修改为system并获得shell 第一步：实现循环 从汇编语句可以看出，在每次循环结束时若0x201700处的值是否大于1则会继续循环。 encode1会将编码后的结果保存至0x2015c0处&am…...
spring boot2.7集成OpenFeign 3.1.7
1.Feign Feign是一个声明式web服务客户端。它使编写web服务客户端更容易。要使用Feign，请创建一个接口并对其进行注释。它具有可插入注释支持，包括Feign注释和JAX-RS注释。Feign还支持可插拔编码器和解码器。Spring Cloud增加了对Spring MVC注释的支持&…...
SSM相关面试题01
目录 1.何为Spring Bean容器?Spring Bean容器与Spring IOC 容器有什么不同吗? 2.Spring IOC 如何理解? 3.Spring DI 如何理解? 4.Spring 中基于注解如何配置对象作用域?以及如何配置延迟加载机制? 5.Spring 工厂底层构建Bean对象借助什么机制?当对象不使用了要释放…...
Python websocket
router.websocket(/chat/{flow_id}) 接口代码，并了解其工作流程、涉及的组件以及如何基于此实现你的新 WebSocket 接口。以下内容将分为几个部分进行讲解： 接口整体概述代码逐行解析关键组件和依赖关系如何基于此实现新功能示例：创建一个新的…...
正则表达式
正则表达式： 正则表达式区别于通配符，正则表达式是用来匹配文本的内容，命令的输出结果也属于文本内容。也可以使用正则表达式。 通配符用来匹配文件名和目录名。 grep用来过滤文本内容，以匹配要查询的结果。 linux的文本三剑客…...
机器学习——生成对抗网络（GANs）：原理、进展与应用前景分析
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一. 生成对抗网络的基本原理二. 使用步骤2.1 对抗性训练2.2 损失函数 三. GAN的变种和进展四. 生成对抗网络的应用五. 持续挑战与未来发展方向六. 小结 前言 生…...
HTTPS 加密
HTTPS 加密技术 1. HTTPS 概述 HTTPS（HyperText Transfer Protocol Secure）是 HTTP 协议的安全版本，利用 SSL/TLS 协议对通信进行加密，确保数据的机密性、完整性和身份认证。HTTPS 在保护敏感数据的传输（如登录凭证、…...
Golang 构建学习
Golang 构建学习 如何搭建Golang开发环境 1. 下载GOlang包 https://golang.google.cn/dl/ 在地址上下载Golang 2. 配置包环境 修改全局环境变量，GOPROXY，GOPATH，GOROOT GOPROXYhttps://goproxy.cn,direct GOROOT"" // go二进…...
鱼眼镜头立体校正的函数stereoRectify()的使用)
OpenCV相机标定与3D重建(7)鱼眼镜头立体校正的函数stereoRectify()的使用
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 cv::fisheye::stereoRectify 是 OpenCV 中用于鱼眼镜头立体校正的函数。该函数计算两个相机之间的校正变换，使得从两个相机拍摄的图像…...
JVM_垃圾收集器详解
1、 前言 JVM就是Java虚拟机，说白了就是为了屏蔽底层操作系统的不一致而设计出来的一个虚拟机，让用户更加专注上层，而不用在乎下层的一个产品。这就是JVM的跨平台，一次编译，到处运行。 而JVM中的核心功能其实就是自动…...
数据结构4——栈和队列
目录 1.栈 1.1.栈的概念及结构 1.2栈的实现 2.队列 2.1队列的概念及结构 2.2队列的实现 1.栈 1.1.栈的概念及结构 栈：一种特殊的线性表，其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一段称为栈顶，另一端称为…...
【AIGC】大模型面试高频考点-数据清洗篇
【AIGC】大模型面试高频考点-数据清洗篇 （一）常用文本清洗方法1.去除无用的符号2.去除表情符号3.文本只保留汉字4.中文繁体、简体转换5.删除 HTML 标签和特殊字符6.标记化7.小写8.停用词删除9.词干提取和词形还原10.处理缺失数据11.删除重复文本12.处理嘈…...
Java基于SSM框架的跑腿平台小程序【附源码、文档】
博主介绍：✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇dz…...
数据库连接池
在Java的多线程中，有线程池负责线程管理，类似线程池，在数据库中也有数据库连接池，负责数据库连接的管理。数据库连接池是一个容器。负责分配、管理数据库连接（Connection）。它允许应用程序重复使用一个现有…...
本地部署 WireGuard 无需公网 IP 实现异地组网
WireGuard 是一个高性能、极简且易于配置的开源虚拟组网协议。使用路由侠内网穿透使其相互通讯。 第一步，服务端（假设为公司电脑）和客户端（假设为公司外的电脑）安装部署 WireGuard 1，点此下载（…...
Educator头歌:离散数学 - 图论
第1关：图的概念 任务描述 本关任务：学习图的基本概念，完成相关练习。 相关知识 为了完成本关任务，你需要掌握：图的概念。 图的概念 1.一个图G是一个有序三元组G<V,R,ϕ>，其中V是非空顶点集合&am…...
axios的认识与基本使用
axios简介 Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 主要特点 从浏览器创建 XML…...
_kaic)
springboot358智慧社区居家养老健康管理系统(论文+源码)_kaic
毕 业 设 计（论 文） 智慧社区居家养老健康管理系统设计与实现 摘 要 传统办法管理信息首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此&…...
java-a+b 开启java语法学习
代码 （ab) import java.util.Scanner; //导入 java.util包中的Scanner 类，允许读取键盘输入数据public class Main { // 创建一个公共类 Mainpublic static void main(String[] args) {//程序入口点，main方法Scanner scanner new Scanner(…...
SpringAi整合免费大模型（NVIDIA）
接上回，发布了springAI整合本地大模型之后，我们来看看怎么去利用别人已经训练好的大模型。 如果对整合本地大模型感兴趣的，请阅读： SpringAI集成本地AI大模型ollama（调用篇）非常简单！…...
Flutter中的Future和Stream
在 Flutter 中，Future 和 Stream 都是用于处理异步操作的类，它们都基于 Dart 的异步编程模型，但是它们的使用场景和工作方式有所不同。以下是它们的区别以及各自适用的场景。 目录 一、Future1、基本使用2、异常处理1. catchError2. onError…...