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

使用 useMemo 和 React.memo 优化 React 组件渲染

在 React 中,性能优化是一个重要的主题,特别是在复杂的组件树中。本文将演示如何在同一个父组件中使用 useMemoReact.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

  • 管理两个状态:countdata
  • 点击“Increment Count”按钮时,只有 MemoChild 会更新,而 ExpensiveChild 的引用保持不变。
  • 点击“Update Data”按钮时,ExpensiveChild 会重新渲染,因为 data 发生了变化。

3. 运行结果

点击“Increment Count”按钮

  • count 状态更新,MemoChild 会重新渲染,控制台输出:
    MemoChild rendered
    
  • ExpensiveChild 不会重新渲染,控制台不会输出。

点击“Update Data”按钮

  • data 状态更新,ExpensiveChild 会重新渲染,控制台输出:
    Calculating ExpensiveChild
    ExpensiveChild rendered
    

4. useMemoReact.memo 对比:

useMemo

  • Hook钩子函数,用于缓存计算结果。只有当依赖项变化时,才会重新计算。
  • 使用useMemo 缓存 ExpensiveChild 实例,避免不必要的重新渲染。

React.memo

  • 高阶组件,缓存组件的渲染结果。只有当传入的 props 发生变化时,组件才会重新渲染。
  • 适用于根据 props 变化控制渲染的场景。

5. 渲染逻辑总结

基本数据类型(如 numberstringboolean

  • 当组件的 props 是基本数据类型时,如果其值未发生变化,React.memo 不会重新渲染组件。

引用数据类型(如 objectarray

  • 当组件的 props 是引用数据类型时,React.memo 会进行浅比较。
  • 如果引用相同,组件不会重新渲染;如果引用不同,组件会重新渲染。

6. 关键点

  • 基本数据类型的比较:只要值相同,组件不会重新渲染。
  • 引用数据类型的比较:如果引用相同,组件不会重新渲染;如果引用不同(无论内容是否相同),组件会重新渲染。

相关文章:

使用 useMemo 和 React.memo 优化 React 组件渲染

在 React 中&#xff0c;性能优化是一个重要的主题&#xff0c;特别是在复杂的组件树中。本文将演示如何在同一个父组件中使用 useMemo 和 React.memo 来优化子组件的渲染。 1. 组件结构 创建一个父组件&#xff0c;包含两个子组件&#xff1a; MemoChild&#xff1a;使用 R…...

ISAAC SIM踩坑记录--添加第三方3D场景

ISAAC SIM仿真首先就是要有合适的3D场景&#xff0c;官方提供了一些场景&#xff0c;如果不能满足要求&#xff0c;那就只能自己建。 对于我这种不会3D建模的菜鸟&#xff0c;只能到网上下载了&#xff0c;sketchfab就是一个不错的平台&#xff0c;有不少免费资源可以下载。 …...

Git 详解

Git 详解 Git 是一个分布式版本控制系统&#xff0c;用于高效地管理项目代码的版本历史。它是目前最流行的版本控制工具之一&#xff0c;广泛应用于软件开发领域。Git 的分布式架构允许开发者在本地进行代码的版本管理&#xff0c;并与远程仓库同步&#xff0c;实现团队协作。…...

Linux操作系统3-文件与IO操作1(从C语言IO操作到系统调用)

上篇文章&#xff1a;Linux操作系统2-进程控制3(进程替换&#xff0c;exec相关函数和系统调用)_execv系统调用-CSDN博客 本篇代码Gitee仓库&#xff1a;myLerningCode 橘子真甜/linux学习 - 码云 - 开源中国 (gitee.com) 本篇重点&#xff1a;C语言基础IO与系统调用 目录 一.…...

【Python网络爬虫笔记】8- (BeautifulSoup)抓取电影天堂2024年最新电影,并保存所有电影名称和链接

目录 一. BeautifulSoup的作用二. 核心方法介绍2.1 构造函数2.2 find()方法2.3 find_all()方法2.4 select()方法 三. 网络爬虫中使用BeautifulSoup四、案例爬取结果 一. BeautifulSoup的作用 解析HTML/XML文档&#xff1a;它可以将复杂的HTML或XML文本转换为易于操作的树形结构…...

Rancher V2.7.0安装教程

1、执行Docker命令 docker run -d --privileged --restartunless-stopped -p 80:80 -p 443:443 -v /home/rancher:/var/lib/rancher --name rancher registry.cn-hangzhou.aliyuncs.com/rancher/rancher:v2.7.0 注&#xff1a;如果容器启动失败&#xff0c;参考我另外一篇文章…...

STM32MX 配置CANFD收发通讯

一、环境 MCU&#xff1a;STM32G0B1CEU6 CAN收发器&#xff1a;JIA1042 二、MX配置 配置SYS 配置canfd并开启中断&#xff0c;我开了两个FDCAN&#xff0c;配置是一样的&#xff0c;这里贴一下波特率的计算公式&#xff1a; 也就是&#xff1a;CAN时钟频率/预分频器/&…...

(12)时间序列预测之MICN(CNN)

文章目录 前言1. challenge 一、网络结构1. MHDecomp2. Trend-cyclical Prediction Block3. Seasonal Prediction BlockMIC LayerMerge 实验结果1.长时预测 总结参考 文章信息 模型&#xff1a; MICN (Multi-scale Isometric Convolution Network)关键词&#xff1a; 长时预测…...

嵌入式蓝桥杯学习3 外部中断实现按键

Cubemx配置 前面的配置依旧一样。 原文链接&#xff1a;https://blog.csdn.net/m0_74246768/article/details/144227188 1.打开cubemx&#xff0c;将PB0到PB1配置为GPIO_EXTI模式。 2.在System-Core中点击GPIO&#xff0c;选择PB0到PB2&#xff0c; GPIO_Mode&#xff08;触…...

自由学习记录(29)

FileStream FileStream 是 .NET 中用于文件操作的重要类&#xff0c;位于 System.IO 命名空间中。它提供了对文件的同步和异步读写操作。以下是它的方法签名和重载的详细介绍&#xff1a; 构造函数签名和重载 FileStream 提供多个构造函数&#xff0c;允许在创建实例时指定文…...

使用YOLO系列txt目标检测标签的滑窗切割:批量处理图像和标签的实用工具

使用YOLO系列txt目标检测标签的滑窗切割&#xff1a;批量处理图像和标签的实用工具 使用YOLO的TXT目标检测标签的滑窗切割&#xff1a;批量处理图像和标签的实用工具背景1. 代码概述2. 滑窗切割算法原理滑窗切割步骤&#xff1a;示例&#xff1a; 3. **代码实现**1. **加载标签…...

架构10-可观测性

零、文章目录 架构10-可观测性 1、可观测性 &#xff08;1&#xff09;可观测性的背景 **历史沿革&#xff1a;**可观测性最初由匈牙利数学家鲁道夫卡尔曼提出&#xff0c;用于线性动态控制系统。后来&#xff0c;该概念被引入到计算机科学中。**现代意义&#xff1a;**在分…...

git管理Unity项目的正确方式

git管理Unity项目的正确打开方式 前言&#xff1a;对于刚开始git进行unity项目管理的时候&#xff0c;我采取的方式是全部文件上传&#xff0c;文件数量太多以及上传太大&#xff0c;我尝试过一下几个方法&#xff1a; 利用git的LFS大文件进行传方式&#xff0c;可行但比较麻…...

openssl使用哈希算法生成随机密钥

文章目录 一、openssl中随机数函数**OpenSSL 随机数函数概览**1. **核心随机数函数** **常用函数详解**1. RAND_bytes2. RAND_priv_bytes3. RAND_seed 和 RAND_add4. RAND_status **随机数生成器的熵池****常见用例****注意事项** 二、使用哈希算法生成随机的密钥 一、openssl中…...

将word里自带公式编辑器编辑的公式转换成用mathtype编辑的格式

文章目录 将word里自带公式编辑器编辑的公式转换成用mathtype编辑的格式MathType安装问题MathType30天试用延期MathPage.wll文件找不到问题 将word里自带公式编辑器编辑的公式转换成用mathtype编辑的格式 word自带公式编辑器编辑的公式格式&#xff1a; MathType编辑的格式&a…...

校园失物招领系统基于 SpringBoot:点亮校园归还遗失物之光

2系统开发环境 2.1vue技术 Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第…...

dhcpd服务器的配置与管理(超详细!!!)

前提条件&#xff1a; &#xff08;1&#xff09;虚拟机能够联网&#xff08;如果nat模式不能联网的看另一期&#xff09; CentOS7 NAT模式不能联网-CSDN博客 &#xff08;2&#xff09;系统是Centos8&#xff0c;因为下载的dhcp-server软件包版本和Centos7不匹配,如果你能成…...

Qml之基本控件

一.Qml常用控件 1.Text(显示普通文本和富文本) 1.1显示普通文本&#xff1a; Window { visible: true width: 320 height: 240 title: qsTr("Hello World") Text { text: "Hello World!" font.family: "Helvetica" font.pointSize: 24 color:…...

【Java从入门到放弃 之 Stream API】

Java Stream API Stream API行为参数化传递代码Lambda表达式Lambda 表达式的语法方法引用 Lambda 表达式的实际应用集合操作并发编程 Lambda 表达式的注意事项总结 Stream API Java8提供了一个全新的API - Stream。引入这个Stream的主要目的&#xff0c;一个是可以支持更好的并…...

Ruby On Rails 笔记1——Rails 入门

突然想跟着官方文档把Ruby On Rails过一遍&#xff0c;把一些有用的记下来就可以一直看了&#xff0c;do它! https://guides.rubyonrails.org/v7.2/ 注&#xff1a;官网是英文文档&#xff0c;我自己翻译了一下&#xff0c;不确保完全准确&#xff0c;只供自己学习开发使用。 …...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...