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

React 中React.memo的作用，如何利用它进行组件性能优化？

news 来源：原创 2025/7/15 14:26:34

大白话React 中React.memo的作用，如何利用它进行组件性能优化？

React.memo 是啥玩意儿

在 React 里，组件渲染是很频繁的事儿。每次父组件状态变了，子组件就可能会重新渲染，哪怕子组件的 props 压根儿没变化。这就好比你去超市，只买了瓶饮料，收银员却把整个货架都重新整理一遍，纯属浪费时间和精力。而 React.memo 就是来解决这个问题的，它能让组件“记着”之前的渲染结果，要是 props 没变化，就直接用之前的结果，不用重新渲染，这样能大大提升性能。

怎么用 React.memo

React.memo 是一个高阶组件，你把它套在你的组件外面，它就会帮你比较前后两次的 props。要是一样，就不重新渲染组件。下面咱来看看具体代码：

// 导入 React 库，因为要用到 React.memo
import React from 'react';// 定义一个简单的组件，这个组件接收一个 name 属性
const MyComponent = React.memo((props) => {// 打印日志，方便我们知道组件什么时候渲染了console.log('MyComponent 渲染了');// 返回一个简单的 JSX 元素，显示传入的 name 属性return <div>Hello, {props.name}!</div>;
});// 定义一个父组件
const ParentComponent = () => {// 定义一个状态变量 count，初始值为 0const [count, setCount] = React.useState(0);// 定义一个函数，用于增加 count 的值const handleClick = () => {setCount(count + 1);};return (<div>{/* 显示 count 的值 */}<p>Count: {count}</p>{/* 点击按钮，调用 handleClick 函数增加 count 的值 */}<button onClick={handleClick}>增加计数</button>{/* 使用 MyComponent 组件，传入 name 属性 */}<MyComponent name="World" /></div>);
};// 导出父组件，方便在其他地方使用
export default ParentComponent;

代码解释

MyComponent 组件：
- 这是一个简单的函数组件，接收一个 name 属性。
- 用 React.memo 把它包起来，这样当 MyComponent 的 props 没变化时，就不会重新渲染。
- 里面有个 console.log，每次渲染都会打印日志，方便我们观察。
ParentComponent 组件：
- 有个 count 状态变量，初始值是 0。
- 有个按钮，点击后会调用 handleClick 函数，让 count 的值加 1。
- 里面使用了 MyComponent 组件，传入 name 属性为 World。

使用场景

纯展示组件：如果一个组件只是根据传入的 props 来展示内容，没有自己的状态，也不做什么副作用操作，那就可以用 React.memo 包起来。比如上面的 MyComponent，它只根据 name 属性来显示内容。
频繁渲染的组件：要是一个组件在父组件每次渲染时都会跟着渲染，但它的 props 大部分时间都不变，那就用 React.memo 优化一下。比如列表里的每个列表项组件。

注意事项

React.memo 只比较 props 的浅层次变化。要是 props 里有对象或者数组，而且这些对象或数组的引用变了，哪怕里面的值没变，组件也会重新渲染。
要是你需要自定义比较逻辑，可以给 React.memo 传入第二个参数，它是一个函数，用来比较前后两次的 props。

// 自定义比较函数
const areEqual = (prevProps, nextProps) => {// 这里可以写自定义的比较逻辑return prevProps.name === nextProps.name;
};// 使用自定义比较函数的 MyComponent
const MyComponentWithCustomCompare = React.memo((props) => {console.log('MyComponentWithCustomCompare 渲染了');return <div>Hello, {props.name}!</div>;
}, areEqual);

这样，你就可以根据自己的需求来控制组件是否重新渲染啦。

React 中React.memo的作用，如何利用它进行组件性能优化？

大白话React 中React.memo的作用，如何利用它进行组件性能优化？ React.memo 是啥玩意儿在 React 里，组件渲染是很频繁的事儿。每次父组件状态变了，子组件就可能会重新渲染，哪怕子组件的 props 压根儿没变化。这就好比…...

编程日记 2025/7/15 14:26:34

Python实现图片文字识别-OCR

PaddleOCR是由百度飞桨（PaddlePaddle）团队开发的OCR工具库，它包含超轻量级的中文OCR模型，支持多种语言和复杂情况下的文字识别。 pip install paddlepaddle paddleocr使用：已知我的图片是 img.png from paddleocr imp…...

编程日记 2025/7/15 9:14:26

MCP Server 实现一个天气查询

Step1. 环境配置安装 uv curl -LsSf https://astral.sh/uv/install.sh | shQuestion: 什么是 uv 呢和 conda 比有什么区别？ Answer: 一个用 Rust 编写的超快速 (100x) Python 包管理器和环境管理工具，由 Astral 开发。定位为 pip 和 venv 的替代品…...

编程日记 2025/7/15 14:12:08

第38周：文献阅读

目录摘要 Abstract 文献阅读问题引入研究背景研究意义研究目的相关工作自回归循环网络基于 GAN 的序列生成方法时间序列表示学习创新点提出模型基本原理代码实现实验研究实验1——基准和评估实验2——不同类型的时间序列数据实验3——…...

编程日记 2025/7/15 13:35:24

CD19.【C++ Dev】类和对象(10) 日期类对象的成员函数(日期+天数)

目录日期天数需要考虑的几个问题 1.天数加在日上,有可能会溢出,需要进位 2.对月进位,也有可能导致月会溢出,需要进位 3.对年进位,需要考虑是否为闰年代码设计取得指定月的天数GetMonthDay函数方法1:if判断或switch/case 方法2:查表版本1 版本2 operator 初始…...

编程日记 2025/7/15 14:07:33

Linux安装MySQL数据库并使用C语言进行数据库开发

目录一、前言二、安装VMware运行Ubuntu 1.安装VMware 2.使用VMware打开Ubuntu 三、配置VMware使用网卡 1.添加NAT网卡四、Linux下安装MySQL数据库五、安装MySQL开发库六、演示代码 sql_connect.c sql_connect.h main.c中数据库相关代码结尾一、前言由于最…...

编程日记 2025/7/15 14:24:07

GStreamer —— 3.1、Qt+GStreamer制作多功能播放器，支持本地mp4文件、rtsp流、usb摄像头等（可跨平台，附源码）

🔔 GStreamer 相关音视频技术、疑难杂症文章合集（掌握后可自封大侠 ⓿_⓿）（记得收藏，持续更新中…）运行效果...

编程日记 2025/7/15 14:22:27

如何在根据名称或id找到json里的节点以及对应的所有的父节点？

函数如下： 数据如下： [{ "name": "数据看板", "id": "data", "pageName": "tableeauData", "list": [] }, { "name": "审计模块", "id": &quo…...

编程日记 2025/7/15 14:24:06

IP第一次笔记

一、TCP协议第0步：如果浏览器和host文件存在域名对应的P地址记录关系则直接封装HTTP数据报文，如果没有记录则触发DNS解析获取目标域名对应的P地址第一步：终端主机想服务器发起TCP三次握手 1.TCP的三次握手 2.传输网页数据 HTTP --应用层…...

编程日记 2025/7/15 13:19:28

手机硬件检测详解：从版本信息到相机功能的全面指南

手机硬件检测概述接下来，我们将为您提供一份详尽的手机硬件检测指南，涵盖三十项关键内容，助您轻松掌握手机硬件的检测技巧。对于开发者而言，在测试手机硬件性能时，可以结合使用克魔开发助手（Keymob&#…...

编程日记 2025/7/15 13:48:34

大数据学习（86）-Zookeeper去中心化调度

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言📝支持一…...

编程日记 2025/7/15 12:38:09

05-SpringBoot3入门-整合SpringMVC（配置静态资源、拦截器）

1、说明在01-SpringBoot3入门-第一个项目-CSDN博客中，其实就已经整合了SpringMVC。下面讲解怎么配置静态资源和拦截器 2、配置静态资源命名：static（文件夹） 位置：src/main/resources 编写一个html文件访问 http:/…...

编程日记 2025/7/15 1:14:31

自然语言处理（5）—— 中文分词

中文分词的基本原理及实现 1. 什么是词2. 基本原理3. 发展趋势：多数场景无需显式分词信息处理的目标是使用计算机能够理解和产生自然语言。而自然语言理解和产生的前提是对语言能够做出全面的解析。汉语词汇是语言中能够独立运用的最小的语言单位，是语…...

编程日记 2025/7/14 17:29:15

MP4音视频格式

1.MP4 MP4是一种用于封装音视频/字幕/图片/章节信息等数据的多媒体容器格式，是MPEG-4系列的成员之一 2.文件结构 MP4由一层层的嵌套Box（atom）组成 [ size (4 bytes) ][ type (4 bytes)][ payload (嵌套box或者数据) ] 3.常见Box 类型名称…...

编程日记 2025/7/14 21:55:09

NO.59十六届蓝桥杯备战|基础算法-前缀和|一维前缀和|最大子段和|二维前缀和|激光炸弹(C++)

前缀和与差分的核⼼思想是预处理，可以在暴⼒枚举的过程中，快速给出查询的结果，从⽽优化时间复杂度。是经典的⽤空间替换时间的做法前缀和解法1：暴力模拟，q有几次，就套几次for循环解法2：前…...

编程日记 2025/7/7 22:22:56

Node.js 模块加载机制--详解

目录 Node.js 模块加载机制详解 1. 什么是模块？ 2. 模块加载顺序 3. 核心模块加载 4. 自定义模块加载 5. 目录作为模块（index.js） 6. require.resolve() 查找模块路径 7. module 对象解析 8. require.cache 机制（避免重复…...

编程日记 2025/7/15 12:58:38

Live555+Windows+MSys2 编译Androidso库和运行使用（三，实战篇）

文章目录先上效果图VLC中打开日志权限cmakelist 和gradle建议直接去git查看源代码ui下一篇视频预览和采集先上效果图 VLC中打开日志 com.mq.qrtspclient E mystream stream, from the file /storage/emulated/0/Android/data/com.mq.qrtspclient/files/…...

编程日记 2025/7/15 13:16:03

验证码通过“Canvas 绘制”与“Base64 图片”渲染两种不同的实现方式显示

文章目录 🎉验证码通过“Canvas 绘制”与“Base64 图片”渲染两种不同的实现方式显示一、Canvas 绘制：接口回调“字符串”通过绘制的方式显示到前端✨1、前端代码（Canvas 绘制）：包含验证码区域、绘制验证码方法&#x…...

编程日记 2025/7/14 1:46:43

FALL靶场通关攻略

1，下载好靶机后打开，通过kali扫描靶机ip和端口，得到靶机ip为192.168.50.144 2，扫描目录 3，访问靶机 4，访问扫描到的test.php,得到缺少GET请求参数的提示 5，使用FUZZ来扫出参数为file 6&#xff…...

编程日记 2025/7/11 7:25:07

(学习总结31)Linux 进程地址空间与进程控制

Linux 进程地址空间与进程控制进程地址空间Linux 进程地址空间分布虚拟地址空间和页表创建子进程与写时拷贝权限访问缺页中断 Linux 虚拟内存管理mm_struct 内存描述符区域划分vm_area_struct 独立虚拟内存区域虚拟地址空间的作用进程控制进程创建fork 函数介绍写时拷贝作用…...

编程日记 2025/7/15 14:14:45

基于Springboot的网上订餐系统【源码】+【PPT】+【开题报告】+【论文】

网上订餐系统是一个基于Java语言和Spring Boot框架开发的Web应用，旨在为用户和管理员提供一个便捷的订餐平台。该系统通过简化餐饮订购和管理流程，为用户提供快速、高效的在线订餐体验，同时也为管理员提供完善的后台管理功能，帮助…...

编程日记 2025/7/15 13:33:31

Axure设计之中继器表格——拖动行排序教程（中继器）

一、原理介绍在Axure中实现表格行的拖动排序，主要依赖于中继器的排序事件。然而要实现拖动效果，就必须结合动态面板，因为动态面板可以设置拖动事件，之所以使用动态面板或许是因为它可以更灵活地处理位置变化。用户拖动行时&…...

编程日记 2025/7/15 13:06:08

GAUSSDB 分布式存储机制深度解析

GAUSSDB 分布式存储机制深度解析一、核心机制概览 GAUSSDB 的分布式存储通过数据分片、多副本管理和全局事务控制实现高可用与水平扩展。以下为关键机制详解： 二、数据分片（Sharding） 1. 分片策略 GAUSSDB 支持多种分片规则&#xff…...

编程日记 2025/7/15 13:51:22

目录一、ELMo 2018 训练目标二、GPT-1 2018 训练目标三、BERT 2018 训练目标四、Ernie —— baidu 2019 五、Ernie —— Tsinghua 2019 六、GPT-2 2019 七、UNILM 2019 八、Transformer - XL & XLNet 2019 1.模型结构 Ⅰ、循环机制 Recurrence Mechanism Ⅱ、相对位置…...

编程日记 2025/7/15 12:38:09

汽车加气站操作工证书报考条件是什么？

关于汽车加气站操作工的资格证书： 一、核心证书要求 CNG充装人员上岗证这是加气站加气工的核心资质证书，需通过专业培训并考核。该证书由相关部门颁发，证明持证人具备从事CNG（压缩天然气）充装操作的专业技能&#xf…...

编程日记 2025/7/12 8:21:17

材质及制作笔记

基本流程： 建中模——zb雕刻高模——maya拓扑低模——拆uv——sp烘焙贴图——sp绘制材质——渲染 1 材质贴图： diffuse/albedo/basecolor：漫反射 reflection/specular：反射 metalness：金属度 glossiness&#xf…...

编程日记 2025/7/14 23:45:09

Opencv 图像读取与保存问题

本文仅对 Opencv图像读取与保存进行阐述，重在探讨图像读取与保存过程中应注意的细节问题。 1 图像读取首先看一下，imread函数的声明： // C: Mat based Mat imread(const string& filename, int flags1 );// C: IplImage based IplImage*…...

编程日记 2025/7/15 14:13:47

Flutter 2025生态全景：从跨端到嵌入式开发的新机遇

一、技术演进：从"一次编写多端运行"到"全场景覆盖" 1.1 渲染引擎革命：Impeller 2.0的性能突破 // 启用Impeller的配置示例（android/app/build.gradle） def enableImpeller true android {defaultConfig {…...

编程日记 2025/7/10 1:22:42

Idea中诡异的文件编码问题：设置fileCodeing为UTF8但不生效

在fileCoding配置了编码utf-8，右下角的文件里编码格式却是ISO-8859-1，git后到远程仓库里却是ISO-8859-1的乱码，怎么修改都不生效，重启也不行，恶心的不行。最后发现修复方案是： 1. 先随便做个变更&#x…...

编程日记 2025/7/15 14:22:27

Linux中逻辑卷的使用、扩容与磁盘配额

目录一.逻辑卷概述 1.普通分区的优缺点 2.逻辑卷的优点 3.逻辑卷概述二.逻辑卷的创建 1.逻辑卷相关命令 2.创建步骤三.逻辑卷的扩容 1.扩容步骤四.磁盘配额 1.概念及注意点 2.使用条件 3.相关命令一.逻辑卷概述 1.普通分区的优缺点普通分区优点&#xff1a…...

编程日记 2025/7/15 13:03:20

Java版Manus实现来了，Spring AI Alibaba发布开源OpenManus实现

此次官方发布的 Spring AI Alibaba OpenManus 实现，包含完整的多智能体任务规划、思考与执行流程，可以让开发者体验 Java 版本的多智能体效果。它能够根据用户的问题进行分析，操作浏览器，执行代码等来完成复杂任务等。项目源码及…...

编程日记 2025/7/15 13:59:27

关于IP免实名的那些事

IP技术已成为个人与企业保护隐私、提升网络效率的重要工具。其核心原理是通过中介服务器转发用户请求，隐藏真实IP地址，从而实现匿名访问、突破地域限制等目标。而“免实名”代理IP的出现，进一步简化了使用流程，用户无需提交身份信…...

编程日记 2025/7/15 13:07:14

从零构建大语言模型全栈开发指南：第二部分：模型架构设计与实现-2.2.3实战案例：在笔记本电脑上运行轻量级LLM

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲实战案例：在笔记本电脑上运行轻量级LLM2.2.3 模型架构设计与实现1. 环境与工具准备1.1 硬件要求1.2 软件栈选择2. 轻量级模型架构设计2.1 模型参数配置2.2 关键技术优化3. 实战流程3.1 数据准备流程3.2…...

编程日记 2025/7/15 13:35:24

Labview信号分析系统（含报告）

1.摘要本文详细介绍了基于LabVIEW的轴承故障信号分析系统的设计与实现。该系统以凯斯西储大学轴承驱动端的振动信号为研究对象，涵盖了正常信号以及内圈、滚珠、外圈三种故障信号的分析。系统可以对信号进行滤波、时域分析、频域分析和时频域分析等。系统的功能如下…...

编程日记 2025/7/15 13:17:46

基于FastAPI与Kimi AI的智能聊天应用开发实践

一、项目概述本文介绍一个基于现代Web技术栈的智能对话系统，前端采用响应式设计实现聊天界面，后端通过FastAPI框架构建高性能API服务，集成Moonshot AI大语言模型实现智能对话功能。系统具备完整的消息交互流程，支持参数定制化配…...

编程日记 2025/7/15 14:00:22

Android 蓝牙/Wi-Fi通信协议之：经典蓝牙（BT 2.1/3.0+）介绍

在 Android 开发中，经典蓝牙（BT 2.1/3.0）支持多种协议，其中 RFCOMM/SPP（串口通信）、A2DP（音频流传输）和 HFP（免提通话）是最常用的。以下是它们在 Android 中的…...

编程日记 2025/7/15 13:50:26

介绍FRAMES：一个统一的检索增强生成评估框架

引言大型语言模型（LLMs）在认知任务上取得了显著进步，检索增强生成（RAG）技术成为提升模型性能的重要方法。然而，现有的评估方法往往孤立地测试模型的检索能力、事实性和推理能力，无法全面反映模…...

编程日记 2025/7/15 13:08:34

云钥科技多通道工业相机解决方案设计

项目应用场景分析与需求挑战 1. 应用场景 ‌目标领域‌：工业自动化检测（如精密零件尺寸测量、表面缺陷检测）、3D立体视觉（如物体建模、位姿识别）、动态运动追踪（如高速生产线监控）等。 ‌核心…...

编程日记 2025/7/9 13:19:01

微信小程序逆向开发

一.wxapkg文件如何查看微信小程序包文件： 回退一级点击进入这个目录这个就是我们小程序对应的文件 .wxapkg概述 .wxapkg是微信小程序的包文件格式，且其具有独特的结构和加密方式。它不仅包含了小程序的源代码，还包括了图像和其他资源文…...

编程日记 2025/7/11 15:04:32

Debian ubuntu源

配置文件路径 /etc/apt/sources.list 阿里 deb http://mirrors.aliyun.com/ubuntu/ $(lsb_release -cs) main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ $(lsb_release -cs) main restricted universe multiverse deb http://mirrors.aliyun.…...

编程日记 2025/7/5 18:25:37