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

【前端】【React】性能优化三件套useCallback,useMemo,React.memo

news 来源：原创 2025/9/18 0:28:52

一、总览：性能优化三件套

useCallback(fn, deps)：缓存函数，避免每次渲染都新建函数。
useMemo(fn, deps)：缓存值（计算结果），避免重复执行计算。
React.memo(Component)：缓存组件的渲染结果，避免 props 没变却重复渲染。

三者搭配使用，在中大型组件中可显著优化性能，减少重复渲染。

二、逐个详解

（一）`useCallback` —— 缓存函数引用

(1) 每次组件渲染时函数都会重新创建，导致引用变了。
(2) 使用场景：
- 给子组件传递函数 props 时避免子组件重复渲染。
- 函数作为依赖传入 useEffect / useMemo。
(3) 使用方式：

const handleClick = useCallback(() => {console.log("Clicked");
}, []);

(4) 注意事项：
- 依赖项变化时函数才会更新。
- 类似 useMemo(() => fn, deps)。

（二）`useMemo` —— 缓存计算结果

(1) 每次组件渲染时如果存在复杂计算，可能导致性能问题。
(2) 使用场景：
- 依赖变量变化时才重新计算；
- 缓存对象、数组等引用类型的值。
(3) 使用方式：

const result = useMemo(() => heavyComputation(data), [data]);

(4) 注意事项：
- 不要滥用；对性能无益时反而增加复杂性。
- 常用于防止因对象/数组引用变化导致组件重新渲染。

（三）`React.memo` —— 缓存组件渲染结果

(1) 是一个高阶组件，用于函数组件。
(2) 默认只进行浅层比较，如果 props 没变，则跳过渲染。
(3) 使用方式：

const MyComponent = React.memo((props) => {return <div>{props.text}</div>;
});

(4) 使用场景：
- 子组件 props 不变时，避免不必要的渲染。
- 搭配 useCallback/useMemo 使用更有效。
(5) 可选第二参数自定义比较逻辑：

React.memo(Component, (prevProps, nextProps) => {return prevProps.id === nextProps.id;
});

三、组合使用示例

import React, { useState, useMemo, useCallback } from 'react';const List = React.memo(({ items, onClickItem }) => {console.log("List rendered");return (<ul>{items.map(item => (<li key={item.id} onClick={() => onClickItem(item)}>{item.name}</li>))}</ul>);
});const App = () => {const [count, setCount] = useState(0);const items = useMemo(() => [{ id: 1, name: "Apple" },{ id: 2, name: "Banana" },], []);const handleClick = useCallback((item) => {console.log("Clicked:", item.name);}, []);return (<div><button onClick={() => setCount(count + 1)}>Count: {count}</button><List items={items} onClickItem={handleClick} /></div>);
};

分析说明：

List 被 React.memo 包裹，只有 items 或 onClickItem 改变才会重新渲染。
items 用 useMemo 缓存，防止数组地址变化。
handleClick 用 useCallback 缓存函数，防止函数引用变化。

四、注意事项与总结

✅ 使用这些 Hook 是性能优化手段，不是每个项目都需要用。
❌ 滥用会增加代码复杂度，尤其在小组件中意义不大。
👀 推荐在以下情况使用：
- 子组件使用了 React.memo；
- 函数或对象在依赖中频繁触发更新；
- 存在大型列表或复杂计算逻辑；
- 性能瓶颈场景下的精细优化。

【前端】【React】性能优化三件套useCallback,useMemo,React.memo

一、总览：性能优化三件套 useCallback(fn, deps)：缓存函数，避免每次渲染都新建函数。useMemo(fn, deps)：缓存值（计算结果），避免重复执行计算。React.memo(Component)：缓存组件的渲染…...

编程日记 2025/9/18 0:28:52

Vue3性能优化终极指南：编译策略、运行时调优与全链路监控

一、Vue3性能优化体系框架 1.1 性能优化全景图谱 1.2 关键性能指标定义表指标测量方式优化目标核心影响因子FCPLighthouse<1.5s资源加载速度LCPPerformance API<2.5s关键资源大小TTIWebPageTest<3.5s主线程阻塞时间Memory UsageChrome DevTools<50MB对象引用策略…...

编程日记 2025/9/18 0:28:51

FISCO BCOS技术架构解析：从多群组设计到性能优化实践

目录 FISCO BCOS整体架构设计多群组架构与数据隔离机制交易流程与执行机制安全架构与隐私保护性能优化与压测实践应用案例与生态工具 FISCO BCOS作为中国领先的金融级开源联盟链平台，自2017年由金链盟开源工作组推出以来，已在政务、金融、医疗、版权等众多领域实现…...

编程日记 2025/9/15 0:03:54

Ceph异地数据同步之- S3对象异地同步复制

#作者：闫乾苓文章目录关键组件说明数据流说明部署步骤配置主区域配置次要区域S3对象文件同步测试关键组件说明在Ceph RGW的多站点复制架构中，Realm、Zonegroup 和 Zone 是关键的组织结构，用于管理多站点的配置和数据同步 Realm(领域)&a…...

编程日记 2025/9/12 9:22:34

iOS按键精灵辅助工具在游戏开发中的创新应用

一、iOS自动化测试辅助工具在移动游戏开发领域，iOS按键精灵类辅助工具不同于传统的安卓自动化方案，iOS环境下的自动化测试面临更严峻的技术挑战，但通过创新方法仍可实现精准控制。 # 基于图像识别的智能定位算法示例 def find_button(butt…...

编程日记 2025/9/18 0:27:32

3D案例丨多个3D工业相机拼接检测开启360°新视界

在高速生产线上，经常需要在极短的时间内对工件进行全方位的外观检测，如：线缆直径和直线度检测、锂电池外观缺陷检测、铁轨截面尺寸检测等。这需要传感器完整还原被测物的截面面轮廓形状，并获取精准的截面轮廓数据。但单一相机的…...

编程日记 2025/9/9 9:46:47

打分函数分类

在分子对接中，打分函数用于评估配体与受体结合的亲和力。不同类型的打分函数有各自的优势和应用场景。常见的打分函数主要分为以下几类： 1. 基于物理（力场）的打分函数 (Force/physics-field-based scoring functions) 这种打分…...

编程日记 2025/9/7 1:26:34

实践 DevOps 项目：使用 Terraform、Helm、SonarQube 和 GitLab CI/CD 在 AWS EKS 上实践全栈部署

在当今快节奏的软件开发领域，自动化至关重要。在本文中，我将向您展示如何构建一个全面的 DevOps 流水线，该流水线能够： 使用 Terraform 预置完整的 AWS 基础设施。部署一个包含私有子网和公共子网、RDS PostgreSQL 以及完整配置的…...

编程日记 2025/9/17 13:11:40

EFT干扰和共模干扰

EFT干扰本质上属于共模干扰的一种具体表现形式，但严格来说不能简单等同于共模干扰。以下从原理、特征及区别角度展开分析： 1. EFT干扰的原理定义：EFT（Electrical Fast Transient，电快速瞬变脉冲群）干扰是…...

编程日记 2025/9/9 16:38:30

android 下提示 SQLITECIPHER driver not loaded

问题描述: 在android下出现 SQLITECIPHER driver not loaded 错误解决办法: 在QT的Android目录下面放入 libplugins_sqldrivers_sqlitecipher_arm64-v8a.so...

编程日记 2025/9/2 18:33:40

[D1,2]回溯刷题

文章目录组合组合回溯的基础结构 #组合总和注意startIndex的更新是用i来更新的，不然会产生重复的组合...

编程日记 2025/9/7 19:51:39

使用 VBA 宏创建一个选择全部word图片快捷指令，进行图片格式编辑

使用 VBA 宏批量选择图片 ✅ 第一步：创建 .dotm 加载项文件 1、使用环境 office word 365，文件格式为.docx 图片格式为.PNG 2、创建 .dotm 加载项文件打开 Word，新建一个空白文档。按下 Alt F11 打开 VBA 编辑器。点击菜单栏&#xff…...

编程日记 2025/9/16 1:58:17

SQL 关键字

SQL 包含许多关键字，这些关键字用于执行各种数据库操作。以下是主要的 SQL 关键字分类： 数据查询语言 (DQL) SELECT - 从数据库中选择数据 FROM - 指定要查询的表 WHERE - 指定查询条件 GROUP BY - 对结果集进行分组 HAVING - 对分组结果进行过滤 …...

编程日记 2025/9/12 19:16:31

从PPT到PNG：Python实现的高效PPT转图工具

从PPT到PNG：Python实现的高效PPT转图工具在日常工作中，PPT（PowerPoint）文件是我们常用的演示工具。然而，有时候我们需要将PPT的内容提取为图片格式（如PNG）以便于展示或保存。手动将每一页PPT保…...

编程日记 2025/9/10 6:03:11

TCP和UDP协议

前言 TCP（传输控制协议）和UDP（用户数据报协议）是两种主要的传输层协议；它们在连接方式、可靠性、效率等方面有显著区别。关键对比差异总结可靠性： TCP通过确认应答、重传等机制确保数据可靠传输&#…...

编程日记 2025/9/11 13:52:59

高并发内存池（三）：PageCache（页缓存）的实现

前言： 在前两期内容中，我们深入探讨了内存管理机制中在 ThreadCache 和 CentralCache两个层级进行内存申请的具体实现。这两层缓存作为高效的内存分配策略，能够快速响应线程的内存需求，减少锁竞争，提升程序性能。本期…...

编程日记 2025/9/11 9:39:43

使用pybind11开发可供python使用的c++扩展模块

在做紫微斗数程序的时候用到了padas库，不过也只用了它下面几个功能： 1、读入csv文件，构造DataFrame; 2、通过行列标题查找数据； 3、通过行标题读取一行数据。用这几个功能却导入了pandas、numpy、dateutil、pytz等一堆库，多少有点划不来，于是想用c++开发一个实现这几…...

编程日记 2025/9/17 9:14:56

系统与网络安全------网络通信原理（5）

资料整理于网络资料、书本资料、AI，仅供个人学习参考。传输层解析传输层传输层的作用 IP层提供点到点的连接传输层提供端到端的连接端口到端口的连接（不同端口号，代表不同的应用程序） TCP协议概述 TCP（Transm…...

编程日记 2025/9/13 15:32:34

JavaScript防抖与节流

目录防抖（Debounce） 一、防抖的定义二、防抖的实现原理三、防抖的代码实现四、代码解析五、使用示例 1. 输入框实时搜索（延迟执行模式） 2. 按钮防重复点击（立即执行模式） 六、总结节流&…...

编程日记 2025/9/3 15:52:20

Java网络编程实战（多人聊天室-CS模式）

一、C/S模式核心原理 1.1 基本架构 C/S（Client/Server）模式采用客户端-服务器架构： 服务器端：持续运行，负责消息路由和广播客户端：用户交互界面，连接服务器进行通信通信协议：TCP&…...

编程日记 2025/9/15 20:33:54

Vue3.5 + Vite6.x 项目的完整 Stylelint 配置方案，支持 .vue/.html 内联样式、Less/SCSS/CSS 等多种文件类

Vue3.5 Vite6.x 项目的完整 Stylelint 配置方案，支持 .vue/.html 内联样式、Less/SCSS/CSS 等多种文件类型一、完整依赖安装 npm install --save-dev stylelint stylelint-config-standard postcss-html # 解析 Vue/HTML 文件中的样式postcss-scss …...

编程日记 2025/9/12 4:11:58

23种设计模式Java版（带脑图，带示例源码）

设计模式 1、创建型 1.1、单例模式(Singleton pattern) 确保一个类只有一个实例，并提供该实例的全局访问点。 1.2、工厂方法(Factory Method) 它定义了一个创建对象的接口，但由子类决定要实例化哪个类。工厂方法把实例化操作推迟到子类。 1.3、抽象…...

编程日记 2025/8/30 21:40:51

mapbox高阶，使用graphology、graphology-shortest-path前端插件和本地geojson数据纯前端实现路径规划

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通文章目录一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️graphology 插件1.3.1 ☘️概念1.3.2 ☘…...

编程日记 2025/9/17 5:05:25

【已解决】vscode升级后连接远程异常：“远程主机可能不符合XXX的先决条件”解决方法

vscode提示升级，每次都升了，突然某次关闭后无法连接远程，查询资料是因为从VS Code 1.86.1版本开始（2024年1月）要求glibc版本>2.28。命令“ ldd --version”可查看glibc版本为2.27： rootXXXXXXX:~$ ld…...

编程日记 2025/9/13 0:07:24

Springboot整合JAVAFX

Springboot整合JAVAFX 实体与VO设计 pom.xml文件如下： <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xs…...

编程日记 2025/9/17 10:17:04

【算法】——一键解决动态规划

前言动态规划是一种高效解决重叠子问题和最优子结构问题的算法思想。它通过分治记忆化，将复杂问题分解为子问题，并存储中间结果，避免重复计算，从而大幅提升效率。为什么重要？ 优化…...

编程日记 2025/9/17 14:20:57

Git使用与管理

一.基本操作 1.创建本地仓库在对应文件目录下进行： git init 输入完上面的代码，所在文件目录下就会多一个名为 .git 的隐藏文件，该文件是Git用来跟踪和管理仓库的。我们可以使用 tree 命令（注意要先下载tree插件&#xff09…...

编程日记 2025/9/10 20:53:30

npm、nvm、nrm

NVM (Node Version Manager) 常见指令 NVM 是一个用于管理 Node.js 版本的流行工具，允许你在同一台机器上安装和切换不同版本的 Node.js。以下是 NVM 的常见指令： 安装与卸载 nvm install <version> - 安装指定版本的 Node.js 例如：…...

编程日记 2025/9/11 22:53:41

Java 文件内容转换为MD5哈希值

若要把读取到的 files 列表里的内容转换为 MD5 哈希值，你可以逐个遍历 files 列表中的元素，将每个元素的内容计算成 MD5 哈希值。以下是一个完整的 Java 示例代码，展示了如何实现这一功能： import java.io.BufferedInputStream…...

编程日记 2025/9/11 4:19:12

未来郴州：科技与自然的交响诗篇

故事背景故事发生在中国湖南郴州，描绘了未来城市中科技与自然共生共荣的奇妙图景。通过六个充满诗意的场景，展现雾能转化系统、立体生态书库、智能稻田等创新设计，编织出一曲人类智慧与自然韵律共鸣的未来交响。故事内容在东江湖的晨雾中&…...

编程日记 2025/9/8 15:34:04

UE5 运行时动态将玩家手部模型设置为相机的子物体

在编辑器里，我们虽然可以手动添加相机，但是无法将网格体设置为相机的子物体，只能将相机设置为网格体的子物体但是为了使用方便，我们希望将网格体设置为相机的子物体，这样我们直接旋转相机就可以旋转网格体&#xff0…...

编程日记 2025/9/2 14:18:04

Ubuntu系统下的包管理器APT

Ubuntu系统下的包管理器APT 在Linux操作系统生态中，软件包管理工具是连接用户与系统功能的桥梁。Ubuntu作为基于Debian的流行发行版，其强大的包管理系统APT（Advanced Packaging Tool）为开发者与系统管理员提供了便捷的软件生命周…...

编程日记 2025/9/16 9:36:39

超级码科技发布镂空AI保险胶带，重塑包装防伪新标准

在酒类、物流、奢侈品、电子产品等领域，包装安全与防伪需求日益迫切。传统封箱胶带易被转移或重复利用，导致商品被仿冒的风险居高不下。为此，超级码科技推出镂空型防揭AI数字身份保险封箱胶带——一款集结构防伪、信息追踪与增值服务于一体的…...

编程日记 2025/9/12 3:43:27

微软Exchange管理中心全球范围宕机

微软已确认Exchange管理中心（Exchange Admin Center，EAC）发生全球性服务中断，导致管理员无法访问关键管理工具。该故障被标记为关键服务事件（编号EX1051697），对依赖Exchange Online的企业造成广…...

编程日记 2025/9/11 16:06:59

前端通信库fetch-event-source实现丰富的SSE

环境：SpringBoot3.4.0 + Vue3 1. 简介 SSE（Server-Sent Events）是一种基于HTTP的服务器向客户端单向推送实时数据的轻量级协议，配合浏览器原生EventSource API，可实现高效实时通信。前端通过创建EventSource对象订阅服务端流，自动处理连接、重试与数据解析；服务端设置C…...

编程日记 2025/9/10 21:25:05

JVM 中Minor GC、Major GC、Full GC 的区别？

Minor GC、Major GC 和 Full GC 是 Java 虚拟机 (JVM) 垃圾回收 (Garbage Collection) 中的不同类型的 GC 事件，它们在范围、触发条件、停顿时间等方面有所不同。 1. Minor GC (Young GC): 范围： 只针对新生代 (Young Generation) 进行垃圾回收。触发条…...

编程日记 2025/9/2 19:06:20

2747. 统计没有收到请求的服务器数目

文章目录题意思路代码题意题目链接思路代码 class Solution { public:vector<int> countServers(int n, vector<vector<int>>& logs, int x, vector<int>& queries) {sort(logs.begin(), logs.end(), [](vector<int> &a, v…...

编程日记 2025/9/7 1:26:35

设计模式：抽象工厂 - 掌控多产品族的创建之道

一、什么是抽象工厂模式？ 抽象工厂模式是一种创建型设计模式，提供一个接口，用于创建一系列相关或相互依赖的对象，而无需指定它们的具体类。核心思想 1.定义多个产品的抽象接口，统一管理具体产品和工厂的创建逻辑。…...

编程日记 2025/9/9 16:40:23

图神经网络+多模态：视频动作分割的轻量高效新解法

一、引言在智能监控、自动驾驶、人机交互等领域，准确理解视频中的动作序列至关重要。然而，传统方法依赖复杂的视觉模型，计算成本高且难以捕捉长时依赖。近期，一项名为 Semantic2Graph 的研究通过图神经网络（GNN&am…...

编程日记 2025/9/15 14:30:56

技术与情感交织的一生（五）

目录初入“江湖” 分工陌生 CraneOffice 内功宝典枪手回到大二通关小聚唱一首歌初入“江湖” 分工软件工作室是坐落在和平区宜昌道的一间民房，和我想象中的公司形象多少有些偏差。天津的道路有点凌乱，初次的时候不太好找&#xf…...

编程日记 2025/9/11 19:56:53

简单-快速-高效——模块化解析Pulid（实现不同风格下的人脸一致）

资源论文：https://arxiv.org/abs/2404.16022 github：https://github.com/ToTheBeginning/PuLID?tabreadme-ov-file comfyui插件：https://github.com/sipie800/ComfyUI-PuLID-Flux-Enhanced 讲解参考 https://zhuanlan.zhihu.com/p/69684…...

编程日记 2025/9/9 23:00:14

XYZ to xyY 求解

免责声明：本文所提供的信息和内容仅供参考。作者对本文内容的准确性、完整性、及时性或适用性不作任何明示或暗示的保证。在任何情况下，作者不对因使用本文内容而导致的任何直接或间接损失承担责任，包括但不限于数据丢失、业务中断或其他经济…...

编程日记 2025/9/12 6:42:59

科技自然的协奏曲-深圳

故事背景故事发生在中国广东深圳的现代城市环境，这里呈现出未来科技与自然生态共生的独特图景。没有具体的角色，却通过多样的场景描绘，展现出未来生活的活力与创新，反映出社会创新与人类情感的紧密结合。故事内容在未来的深…...

编程日记 2025/9/9 1:06:15

idea 创建 maven-scala项目

文章目录 idea 创建 maven-scala项目1、创建普通maven项目并且配置pom.xml文件2、修改项目结构1）创建scala目录并标记成【源目录】2）导入scala环境3）测试环境 idea 创建 maven-scala项目 1、创建普通maven项目并且配置pom.xml文件 maven依赖…...

编程日记 2025/9/15 19:44:45

C++项目：高并发内存池_下

目录 8. thread cache回收内存 9. central cache回收内存 10. page cache回收内存 11. 大于256KB的内存申请和释放 11.1 申请 11.2 释放 12. 使用定长内存池脱离使用new 13. 释放对象时优化成不传对象大小 14. 多线程环境下对比malloc测试 15. 调试和复杂问题的调试技…...

编程日记 2025/9/13 21:48:28

【UE5】RTS游戏的框选功能+行军线效果实现

目录效果步骤一、项目准备二、框选NPC并移动到指定地点三、框选效果四、行军线效果效果步骤一、项目准备 1. 新建一个俯视角游戏工程 2. 新建一个pawn、玩家控制器和游戏模式，这里分别命名为“MyPawn”、“MyController”和“MyGameMode” 3. 打开“MyGam…...

编程日记 2025/9/14 18:49:37

多图超详细：Docker安装知识库AI客服RAGFlow的详细步骤、使用教程及注意事项：

RAGFlow 介绍 RAGFlow 是一款基于深度文档理解的开源检索增强生成（RAG）引擎，通过结合信息检索与生成式 AI 技术，解决复杂场景下的数据处理和可信问答问题。其核心设计目标是提供透明化、可控化的文档处理流程，并通过多…...

编程日记 2025/9/10 3:07:21

docker compose安装智能体平台N8N

使用 docker volume create n8n_data 创建了一个名为 n8n_data 的数据卷。你通过 docker run 启动容器，映射了端口 5678，并挂载了 n8n_data 数据卷。以下是对应的 docker-compose.yml 配置文件： version: "3.7"services:n8n:ima…...

编程日记 2025/9/8 20:32:25

FRP调用本地摄像头完成远程拍照

from flask import Flask, Response import cv2app Flask(__name__)# 基础文字回复 app.route(/) def hello_world():return <h1>你好啊世界</h1><img src"/camera" width"640" /># 摄像头拍照并返回图像 app.route(/camera) def captu…...

编程日记 2025/9/7 1:26:37

【Linux】39.一个基础的HTTP Web服务器

文章目录 1. 实现一个基础的HTTP Web服务器1.1 功能实现：1.2 Log.hpp-日志记录器1.3 HttpServer.hpp-网页服务器1.4 Socket.hpp-网络通信器1.5 HttpServer.cc-服务器启动器 1. 实现一个基础的HTTP Web服务器 1.1 功能实现： 总体功能： 提供We…...

编程日记 2025/9/12 19:45:58

一、总览：性能优化三件套

二、逐个详解

（一）useCallback —— 缓存函数引用

（二）useMemo —— 缓存计算结果

（三）React.memo —— 缓存组件渲染结果