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

React中useMemo和useCallback的作用:

news 来源：原创 2025/6/19 2:50:39

`一、useMemo` 基本用法:

useMemo 是 React 提供的一个 Hook，用于性能优化，它通过"记忆"（memoization）计算结果来避免在每次渲染时进行不必要的复杂计算。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

主要作用:

避免重复计算：
当组件重新渲染时，useMemo 会检查依赖项数组中的值是否发生变化,只有当依赖项变化时，才会重新执行计算函数,否则直接返回之前缓存的值
优化渲染性能：
对于计算量大的操作，使用 useMemo 可以显著提高性能,避免在每次渲染时都执行昂贵的计算
保持引用稳定：
当返回对象或数组时，useMemo 可以保持引用不变（除非依赖项变化）,这对于传递给子组件的 props 特别有用，可以避免不必要的子组件重新渲染

使用场景:

1. 复杂计算

function ExpensiveComponent({ a, b }) {const result = useMemo(() => {// 复杂的计算过程return a * b + Math.pow(a, b) - a / b;}, [a, b]); // 只有当a或b变化时才重新计算return <div>{result}</div>;
}

2. 优化子组件渲染

function ParentComponent({ items }) {const processedItems = useMemo(() => {return items.map(item => ({...item,fullName: `${item.firstName} ${item.lastName}`}));}, [items]); // 只有当items变化时才重新处理return <ChildComponent items={processedItems} />;
}

3. 避免不必要的对象/数组创建

function FormComponent({ onSubmit }) {const formConfig = useMemo(() => ({initialValues: { username: '', password: '' },validate: values => {const errors = {};if (!values.username) errors.username = 'Required';return errors;}}), []); // 空依赖数组表示只创建一次return <Form {...formConfig} onSubmit={onSubmit} />;
}

注意事项:

不要滥用：
useMemo 本身也有性能开销,只对真正昂贵的计算或需要稳定引用的值使用
依赖数组：
确保包含所有在计算函数中使用的外部值,遗漏依赖项会导致 bug
不是语义保证：
React 可能在将来选择"忘记"某些记忆化的值,不要依赖 useMemo 来实现业务逻辑的正确性
与 React.memo 的区别：
useMemo 记忆的是值,React.memo 记忆的是组件

二、`useCallback` 基本用法:

主要作用:

useCallback 是 React 提供的用于性能优化的 Hook，它的主要作用是缓存函数引用，避免不必要的函数重新创建。

使用场景:

1. 当函数作为依赖项时

// 不使用 useCallback - 每次渲染都会创建新函数，导致 useEffect 重复执行
const fetchData = () => { /*...*/ };
useEffect(() => {fetchData();
}, [fetchData]); // 依赖项每次都会变化// 使用 useCallback - 只有依赖变化时才创建新函数
const fetchData = useCallback(() => {/*...*/
}, [dependency]); // 只有当 dependency 变化时才重新创建函数

2. 当函数作为 props 传递给优化过的子组件时

// 子组件用 React.memo 优化过
const Child = React.memo(({ onClick }) => {/*...*/
});function Parent() {// 不使用 useCallback - 每次渲染都会导致 Child 重新渲染const handleClick = () => { /*...*/ };// 使用 useCallback - 避免 Child 不必要的重新渲染const handleClick = useCallback(() => {/*...*/}, []); // 空依赖表示函数永不变化return <Child onClick={handleClick} />;
}

3. 在自定义 Hook 中返回稳定函数时

function useCounter() {const [count, setCount] = useState(0);// 返回稳定的函数引用const increment = useCallback(() => setCount(c => c + 1), []);const decrement = useCallback(() => setCount(c => c - 1), []);return { count, increment, decrement };
}

具体使用时机

函数被包含在依赖数组（如 useEffect、useMemo、useCallback 的依赖数组）中时
函数作为 prop 传递给用 React.memo 优化的子组件时
函数被用作上下文值且会被多个组件使用时
函数被多次创建且创建成本较高时（虽然这种情况较少见）

不需要使用 `useCallback` 的情况

函数不参与任何依赖关系（没有作为 prop 传递，不在依赖数组中）
函数定义非常简单且创建成本极低
组件本身很少重新渲染时

三、useMemo与 `useCallback` 的关系:

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)，两者都用于性能优化，但：

useMemo 用于记忆计算结果
useCallback 专门用于记忆函数

// 这两个是等价的
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);
const memoizedCallback = useMemo(() => () => doSomething(a, b), [a, b]);

React中useMemo和useCallback的作用:

一、useMemo 基本用法: useMemo 是 React 提供的一个 Hook，用于性能优化，它通过"记忆"（memoization）计算结果来避免在每次渲染时进行不必要的复杂计算。 const memoizedValue useMemo(() > computeExpensiveValue…...

编程日记 2025/5/17 8:28:03

【Shell的基本操作】

文章目录一、实验目的二、实验环境三、实验内容3.1 Shell变量与脚本基础3.2 定制终端提示符（PS1变量）3.3 文件查找与类型确认（find命令）3.4 管道命令实战（用户登录统计）3.5 交互式备份压缩脚本四、总结4.…...

编程日记 2025/6/1 16:40:35

部署docker上的redis，idea一直显示Failed to connect to any host resolved for DNS name

参考了https://blog.csdn.net/m0_74216612/article/details/144145127 这篇文章，关闭了centos的防火墙，也修改了redis.conf文件，还是一直显示Failed to connect to any host resolved for DNS name。最终发现是腾讯云服务器那一层防火墙没…...

编程日记 2025/5/17 8:27:01

Android 中显示 PDF 文件内容（AndroidPdfViewer 库）

PDFView 是一个用于在 Android 应用中显示 PDF 文档的库。它提供了丰富的功能和灵活的配置选项，使得开发者能够轻松地在应用中嵌入 PDF 阅读器。一、添加依赖在模块的 build.gradle 文件中添加以下依赖： // pdfimplementation("com.github.bar…...

编程日记 2025/6/1 8:52:51

Linux 系统切换国内镜像源教程

在中国大陆使用 Linux 系统时，由于网络环境的原因，连接官方的软件包镜像源速度较慢，甚至可能出现连接失败的情况。此时，将系统配置为使用国内的镜像源可以显著提升软件包下载和更新的速度。常见的国内镜像源阿里云镜像站: htt…...

编程日记 2025/5/31 8:04:11

4.2.3 Thymeleaf标准表达式 - 2. 选择表达式

本实战通过 Thymeleaf 的选择表达式（*{}）演示了如何在模板中操作和展示对象的属性与方法。首先，在控制器中创建了一个 User 对象，并将其添加到模型中。接着，在 test2.html 模板中，通过 th:object 声明了对象…...

编程日记 2025/5/31 6:03:19

C#学习第23天：面向对象设计模式

什么是设计模式？ 定义：设计模式是软件开发中反复出现的特定问题的解决方案。它们提供了问题的抽象描述和解决方案。目的：通过提供成熟的解决方案，设计模式可以加快开发速度并提高代码质量。常见的设计模式设计模式通常分为三大…...

编程日记 2025/6/1 8:39:08

查找： Leftmost(最左侧重复元素) package 二分查找;public class BinarySearch {public static void main(String[] args) {// TODO Auto-generated method stub}public static int binarySearchBasic(int[] a,int target) {int i0,ja.length-1; //设置指针初值in…...

编程日记 2025/6/1 9:13:28

汽车装配又又又升级，ethernetip转profinet进阶跃迁指南

1. 场景描述：汽车装配线中，使用EtherNet/IP协议的机器人与使用PROFINET协议的PLC进行数据交互。 2. 连接设备：EtherNet/IP机器人控制器（如ABB、FANUC）与PROFINET PLC（如西门子S7-1500）。 3. 连…...

编程日记 2025/5/17 8:24:52

链表的中间结点数据结构oj题（力扣876）

目录题目描述： 题目分析： 代码解决： 题目描述： 给你单链表的头结点 head ，请你找出并返回链表的中间结点。如果有两个中间结点，则返回第二个中间结点。题目分析： 寻找中间节点这道题原理…...

编程日记 2025/6/1 16:38:44

LLM学习笔记（五）概率论

1. 随机变量与概率分布：模型输出的基础在LLM中，随机变量最直观的体现就是模型预测的下一个token。每个时刻，模型都会输出一个概率分布，表示词汇表中每个token可能是"下一个词"的概率。直观理解想象模型在处理句子…...

编程日记 2025/6/1 19:06:21

归并排序：分治思想的优雅实现

归并排序（Merge Sort）以简洁而高效的分治思想，在众多排序算法中占据着重要的地位。今天，就让我们一同深入探索归并排序的奥秘。一、归并排序简介归并排序是一种基于分治策略的排序算法。它的核心思想是将一个大的问题分解成若…...

编程日记 2025/6/1 8:06:21

从小区到商场再到校园，AI智能分析网关V4高空抛物检测方案全场景护航

在城市化进程不断加速的背景下，高层建筑如雨后春笋般涌现，然而，高空抛物这一“悬在城市上空的痛”却严重威胁着人民群众的生命财产安全。传统的监控方式难以对高空抛物行为进行及时、准确地识别与预警，而AI智能分析网关V4搭载高空…...

编程日记 2025/5/17 8:23:46

WEB安全--Java安全--shiro550反序列化漏洞

一、前言什么是shiro？ shiro是一个Apache的Java安全框架它的作用是什么？ Apache Shiro 是一个强大且灵活的 Java 安全框架，用于处理身份验证、授权、密码管理以及会话管理等功能二、shiro550反序列化原理 1、用户首次登录并勾选记住密码…...

编程日记 2025/5/31 2:16:04

现代计算机图形学Games101入门笔记(十一)

致敬两位大佬面的细分、简化、正则化 Loop 不是循环，是这个算法的发明人家族名称是Loop. 新增点，白点是不更新前通过细分得到的点。通过加权平均4个点坐标，更新坐标就是最后细分点的坐标。如果细分出新的点刚好在老点上。那一部分相信周围点…...

编程日记 2025/5/17 8:23:44

OAT 初始化时出错？问题可能出在 PAM 配置上｜OceanBase 故障排查实践

本文作者：爱可生数据库工程师，任仲禹，擅长故障分析和性能优化。背景某客户在使用 OAT 初始化OceanBase 服务器的过程中，进行到 precheck 步骤时，遇到了如下报错信息： ERROR - check current session ha…...

编程日记 2025/5/17 8:22:41

现场血案：Kafka CRC 异常

一、背景现场童鞋说客户的研发环境突然在近期间歇式的收到了CRC的相关异常，异常内容如下 Record batch for partition skywalking-traces-0 at offset 292107075 is invalid, cause: Record is corrupt (stored crc = 1016021496, compute crc = 1981017560) 报错完全没有…...

编程日记 2025/5/17 8:22:40

实时技术方案对比：SSE vs WebSocket vs Long Polling

早期网站仅展示静态内容，而如今我们更期望：实时更新、即时聊天、通知推送和动态仪表盘。那么要如何实现实时的用户体验呢？三大经典技术各显神通： SSE（Server-Sent Events）：轻量级单向数据流WebSocket：双向全双工通信Long Polling（长轮询）：传统过渡方案假设目前有三…...

编程日记 2025/6/1 9:11:25

搭建游戏云服务器的配置要求包括哪些条件？

在游戏行业迅猛发展的背景下，越来越多的游戏团队、独立开发者、企业平台开始将服务器部署转向云端，尤其是在初期测试、公测阶段及全球发布期，云服务器所带来的弹性部署、全球覆盖、成本控制能力成为不可替代的优势。但问题随之而来&#xff1…...

编程日记 2025/5/17 8:21:37

Go语言八股文之Mysql锁详解

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。非常期待和您一起在这个小…...

编程日记 2025/5/17 8:21:36

1T 服务器租用价格解析

服务器作为数据存储与处理的核心设备，对于企业和个人开发者而言至关重要。当涉及到租用 1T 服务器时，价格是大家很为关注的要点。然而，1T 服务器租用一个月的费用并非固定不变，而是受到诸多因素的综合影响。影响 1T 服务器租用…...

编程日记 2025/6/4 9:01:37

面试题：详细分析Arraylist 与 LinkedList 的异同

相同点都是List接口的实现类： ArrayList和LinkedList都实现了Java集合框架中的List接口，因此它们都提供了对列表元素的操作方法。都继承了Collection接口： 由于List接口继承了Collection接口，所以ArrayList和LinkedList也都继承…...

编程日记 2025/6/1 9:06:40

6 任务路由与负载均衡

一、任务路由核心机制 1.1 静态路由配置 # celeryconfig.pytask_routes {# 精确匹配任务路径payment.process_order: {queue: priority_payment},# 通配符匹配任务类型report.*: {queue: low_priority_reports},# 正则表达式匹配re.compile(r^video\.(encode|compress)): {q…...

编程日记 2025/5/25 8:12:52

前端精度问题全解析：用“挖掘机”快速“填平精度坑”的完美解决方案

写在前面 “为什么我的计算在 React Native 中总是出现奇怪的精度问题？” —— 这可能是许多开发者在作前端程序猿的朋友们都会遇到的第一个头疼问题。本文将深入探讨前端精度问题的根源，我将以RN为例，并提供一系列实用解决方案，让你的应用告别计算误差。一、精度问题的…...

编程日记 2025/6/1 8:37:00

探索嵌入式硬件的世界：技术、应用与未来趋势

目录一、什么是嵌入式硬件？ 二、嵌入式硬件的核心组件与架构 1. 微处理器与控制器 2. 存储器设备 3. 输入/输出接口 4. 电源管理模块 5. 时钟芯片与时序控制三、嵌入式硬件的设计原则与技术难点 1. 低功耗与能耗优化 2. 小型化与高度集成 3. 高可靠性和…...

编程日记 2025/5/17 8:19:22

中级网络工程师知识点3

1.在网络线路施工中应遵循规范： ①缆线的布防应自然平直，不得产生扭绞、打圈接头等现象 ②线缆两端应贴有标签，标签自己清晰、正确，标签应选用不易损坏的材料 ③水平子系统中配线间到工作区信息插座电缆不超过90米 ④工作区子系统中信息插座到网卡不超过10米 ⑤信息插…...

编程日记 2025/6/1 9:11:47

Spring2：应用事务+连接池形成的工具类

工具类 package com.qcby.utils;import com.alibaba.druid.pool.DruidDataSource;import javax.sql.DataSource; import java.sql.Connection; import java.sql.SQLException;/*** 事务的工具类*/ //事务是通过连接开启的，所以要保证是同一个连接 public class TxU…...

编程日记 2025/5/17 8:17:15

CentOS高手之路：从进阶实战到企业级优化

一、系统深度优化与性能调优 1. 内核参数调优通过修改/etc/sysctl.conf文件调整内核参数，可显著提升服务器性能。例如： net.ipv4.tcp_fin_timeout30（快速释放TCP连接） vm.swappiness10（减少交换分区使用&#xff0…...

编程日记 2025/5/17 8:17:15

【Android构建系统】如何在Camera Hal的Android.bp中选择性引用某个模块

背景描述本篇文章是一个Android.bp中选择性引用某个模块的实例。如果是Android.mk编译时期，在编译阶段通过某个条件判断是不是引用某个模块A, 是比较好实现的。Android15使用Android.bp构建后，要想在Android.bp中通过自定义的一个变量或者条件实现选…...

编程日记 2025/5/17 8:16:09

命令拼接符

Linux多命令顺序执行符号需要记住5个【｜】【||】【 ;】【&】【&&】 ，在命令执行里面，如果服务器疏忽大意没做限制，黑客通过高命令拼接符，可以输入很多非法的操作。 ailx10 网络安全优秀回答者互联网…...

编程日记 2025/5/17 8:15:04

学习笔记（C++篇）--- Day 5

1.取地址运算符重载 1.1 const成员函数 ①将 const 修饰的成员函数称为const成员函数，const 修饰成员函数放到成员函数参数列表的后面。 ②const 实际修饰该成员函数隐含的this指针，表明在该成员函数中不能对类的任何成员进行修改。const 修饰 Date 类的…...

编程日记 2025/5/17 8:15:02

排序算法之基础排序:冒泡,选择,插入排序详解

排序算法之基础排序：冒泡、选择、插入排序详解前言一、冒泡排序（Bubble Sort）1.1 算法原理1.2 代码实现（Python）1.3 性能分析二、选择排序（Selection Sort）2.1 算法原理2.2 代码实现&#xff…...

编程日记 2025/6/1 8:55:00

mysql集群

mysql双主keepalivedhaproxy 一、集群作用实现高可用及负载均衡。二、示例 1.实验环境 101 mysql01102 mysql01103 haproxy01keepalived01104 haproxy02keepalived02105 client2.各主机改名并关闭防火墙 101 mysql01102 mysql02103 haproxy01104 haproxy02105 clientsyst…...

编程日记 2025/5/17 8:15:01

【嵌入式开发-RGB 全彩 LED】

嵌入式开发-RGB 全彩 LED ■ RGB 全彩 LED简介■ 电路设计■ ■ RGB 全彩 LED简介 RGB 全彩 LED 模块显示不同的颜色。 ■ 电路设计全彩 LED 使用 PA5、蓝色（B） TIM2_CHN3 PA1、绿色（G）TIM2_CHN2 PA2、红色（R&am…...

编程日记 2025/6/2 16:23:25

网络安全-等级保护(等保) 2-6 GB/T 36958—2018 《信息安全技术网络安全等级保护安全管理中心技术要求》-2018-12-28 发布【现行】

################################################################################ GB/T 22239-2019 《信息安全技术网络安全等级保护基础要求》明确了安全物理环境、安全通信网络、安全区域边界、安全计算环境、安全管理中心、安全管理制度、安全管理机构、安全管理人员、…...

编程日记 2025/5/17 8:12:56

几个正整数常用的位运算操作

位运算在高性能计算、资源敏感型场景（如嵌入式系统）、特定算法（加密、压缩）中具有不可替代的优势。合理使用位运算可以显著提升代码效率和资源利用率。 1. 判断一个正整数是否为8的倍数 bool is_multiple_of_eight(int n) {if (…...

编程日记 2025/5/17 8:12:55

消息队列（MQ）在项目中的使用场景详解【附开发实战思路】

在开发中，很多人一开始对消息队列（MQ）的认识仅限于“异步处理”，但随着项目复杂度提升，我们会发现 MQ 不仅能异步处理任务，还能解耦系统、削峰限流，甚至提高整体架构的稳定性和扩展性。这篇文…...

编程日记 2025/5/17 8:12:54

基于MATLAB-GUI图形界面的数字图像处理

基于MATLAB GUI的数字图像处理系统实现方案，包含常见图像处理功能。代码分为两部分：GUI界面设计和回调函数实现。 %% 第一部分：创建GUI界面 (使用GUIDE) % 1. 打开GUIDE: guide % 2. 创建新GUI，添加以下控件： % - …...

编程日记 2025/5/17 8:11:52

C语言水仙花数

水仙花数（Narcissistic Number）也被称为自幂数，是数学中的一种特殊三位数，属于自幂数的一种类型。它的定义为：一个三位数，其各位数字的立方和等于该数本身。具体定义与计算方式条件： 设一个三位…...

编程日记 2025/5/17 8:11:51

前k个高频元素

pair<int int>：用于存储两个数字。（pair<int string>用于存储一个整数和一个字符串） const pair<int int>：表示pair对象是常量，一旦初始化以后，其内部的两个成员值都不能被修改。 bool…...

编程日记 2025/5/17 8:11:50

人工智能与智能的底色都是哲学

人工智能与智能的底色都是哲学，因为哲学为它们提供了对“智能”本质的追问与思考。哲学自古以来便对人类智能、思维与意识进行深入探讨，为理解智能的结构和功能奠定了基础。同时，人工智能的发展也引发了诸多哲学问题，如伦理道德、…...

编程日记 2025/5/17 8:10:47

能碳管理系统：助力企业实现“双碳“目标

在全球气候治理和绿色低碳发展的大背景下，能碳管理系统正成为企业应对气候变化、实现"碳达峰、碳中和"战略目标的核心工具。这一系统通过数字化手段将能源管理与碳排放管控深度融合，为企业低碳转型提供全方位支持。一、系统架构与核心技术 …...

编程日记 2025/5/17 8:10:47

开源鸿蒙北向源码开发: 5.0kit化相关sdk编译

5.0kit化可以在编译系统sdk时添加,将你的kit文件加入编译使得最终生成的sdk包含kits文件修改编译脚本修改build仓里面的构建脚本文件,添加kits目录脚本命令社区的build脚本已经有kits编译功能了,只需要把你的kits目录新增的kit拷贝到社区仓interface仓了，和社区的都一起编…...

编程日记 2025/5/30 8:29:27

多通道电源管理芯片在分布式能源系统中的优化策略

摘要：随着分布式能源系统的广泛应用，对电源管理芯片的性能要求日益提升。本文深入探讨了多通道电源管理芯片在分布式能源系统中的优化策略，以国科安芯的ASP4644芯片为例，从电气特性、工作模式、热管理、可靠性设计以及系统集成为主…...

编程日记 2025/5/17 8:09:44

IEEE 列表会议第五届机器人、自动化与智能控制国际会议

会议地点：中国成都会议官网：ICRAIC 主办单位：成都理工大学协办单位：成都大学早鸟截稿：2025年7月15日截稿时间：2025年8月20日出版信息：IEEE出版&EI数据库会议时间&#xff1a…...

编程日记 2025/5/17 8:08:41

GitHub 趋势日报 (2025年05月15日)

本日报由 TrendForge 系统生成 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日整体趋势 Top 10 排名项目名称项目描述今日获星总星数语言1TapXWorld/ChinaTextbookPDF教材。⭐ 6685⭐ 15287Roff2xming521/WeClone&…...

编程日记 2025/5/17 8:08:41

Java 并发编程归纳总结（可重入锁 | JMM | synchronized 实现原理）

1、锁的可重入一个不可重入的锁，抢占该锁的方法递归调用自己，或者两个持有该锁的方法之间发生调用，都会发生死锁。以之前实现的显式独占锁为例，在递归调用时会发生死锁： public class MyLock implements Lock {/* 仅…...

编程日记 2025/5/17 8:08:40

Git 笔记

设置Git的user name和email $ git config --global user.name "bread" $ git config --global user.email "1234567890qq.com"因为Git是分布式版本控制系统，所以需要填写用户名和邮箱作为一个标识。git config --global 参数，有了这…...

编程日记 2025/6/1 9:46:36

蒟蒻编程日志

ORZ （用于记录你这个“人”是不是真的，也就是说CSDN的流量是否属合适） 2025/4/14 21:25 开坑前言 2024/10/26：CSP-J 260pts，CSP-S 45pts。 2025/3/1：%你赛 180pts rk34 寄！这就是不认真的…...

编程日记 2025/5/17 8:07:38

深入GoFrame框架：GToken的优势、实践与踩坑经验分享

一、引言近年来，Go语言凭借其简洁的语法、高并发性能和强大的标准库，在后端开发领域迅速崛起。从微服务到企业级应用，Go的生态圈正在蓬勃发展，吸引了越来越多的开发者投入其中。在这个生态中，框架的选择往往决定了项…...

编程日记 2025/5/17 8:06:31

一、useMemo 基本用法:

主要作用:

避免重复计算：

优化渲染性能：

保持引用稳定：

使用场景:

1. 复杂计算

2. 优化子组件渲染

3. 避免不必要的对象/数组创建

注意事项:

不要滥用：

依赖数组：

不是语义保证：

与 React.memo 的区别：

二、useCallback 基本用法:

主要作用:

使用场景:

1. 当函数作为依赖项时

2. 当函数作为 props 传递给优化过的子组件时

3. 在自定义 Hook 中返回稳定函数时

具体使用时机

不需要使用 useCallback 的情况

三、useMemo与 useCallback 的关系:

相关文章：

`一、useMemo` 基本用法:

与 `React.memo` 的区别：

二、`useCallback` 基本用法:

不需要使用 `useCallback` 的情况

三、useMemo与 `useCallback` 的关系: