React 中hooks之 React.memo 和 useMemo用法总结

1. React.memo 基础

React.memo 是一个高阶组件(HOC),用于优化函数组件的性能,通过记忆组件渲染结果来避免不必要的重新渲染。

1.1 基本用法

const MemoizedComponent = React.memo(function MyComponent(props) {/* 渲染逻辑 */
});

只有props发生变化才会重新渲染MemoizedComponent

1.2 带有比较函数的用法

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {// 返回 true 表示不需要重新渲染// 返回 false 表示需要重新渲染return prevProps.id === nextProps.id;
});

2. React.memo 使用场景

2.1 纯展示组件

const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {// 复杂的渲染逻辑return (<div>{data.map(item => (<div key={item.id}><h3>{item.title}</h3><p>{item.description}</p></div>))}</div>);
});// 父组件
function ParentComponent() {const [count, setCount] = useState(0);const data = [/* 大量数据 */];return (<div><button onClick={() => setCount(c => c + 1)}>Count: {count}</button><ExpensiveComponent data={data} /></div>);
}

2.2 列表项组件

const ListItem = React.memo(function ListItem({ item, onItemClick }) {console.log(`Rendering item ${item.id}`);return (<li onClick={() => onItemClick(item.id)}>{item.name}</li>);
});function List({ items }) {const [selectedId, setSelectedId] = useState(null);// 使用 useCallback 来记忆回调函数const handleItemClick = useCallback((id) => {setSelectedId(id);}, []);return (<ul>{items.map(item => (<ListItemkey={item.id}item={item}onItemClick={handleItemClick}/>))}</ul>);
}

3. useMemo 基础

useMemo 是一个 Hook,用于记忆计算结果,避免在每次渲染时重复进行昂贵的计算。

3.1 基本用法

const memoizedValue = useMemo(() => {// 进行计算并返回结果return computeExpensiveValue(a, b);
}, [a, b]); // 依赖项数组,空数组时只有初始化的时候执行,没有依赖参数项state每次变化都会引起重新执行,有依赖数组室,依赖数据发生变化才会触发重新执行

4. useMemo 使用场景

4.1 昂贵的计算

function DataAnalytics({ data }) {const processedData = useMemo(() => {// 假设这是一个复杂的数据处理函数return data.map(item => ({...item,processed: expensiveOperation(item)}));}, [data]); // 只在 data 改变时重新计算return (<div>{processedData.map(item => (<div key={item.id}>{item.processed}</div>))}</div>);
}

4.2 避免子组件不必要的重新渲染

function ParentComponent({ items }) {// 记忆对象或数组类型的 propsconst memoizedValue = useMemo(() => ({data: items,config: {sortBy: 'name',filterBy: 'active'}}), [items]);return <ChildComponent options={memoizedValue} />;
}

4.3 复杂对象的派生状态

function UserDashboard({ user, transactions }) {// 计算用户统计信息const userStats = useMemo(() => {return {totalSpent: transactions.reduce((sum, t) => sum + t.amount, 0),averageSpent: transactions.length? transactions.reduce((sum, t) => sum + t.amount, 0) / transactions.length: 0,mostFrequentCategory: calculateMostFrequentCategory(transactions)};}, [transactions]);return (<div><UserInfo user={user} /><UserStatistics stats={userStats} /></div>);
}

5. 性能优化最佳实践

5.1 合理使用 React.memo

// ✅ 好的使用场景:纯组件,props 很少改变
const PureComponent = React.memo(function PureComponent({ data }) {return <div>{/* 渲染逻辑 */}</div>;
});// ❌ 不好的使用场景:props 经常变化
const FrequentlyChangingComponent = React.memo(function FrequentlyChangingComponent({ date }) {return <div>{date.toLocaleTimeString()}</div>;
});

5.2 合理使用 useMemo

// ✅ 好的使用场景:计算开销大
const expensiveValue = useMemo(() => {return someExpensiveOperation(props.data);
}, [props.data]);// ❌ 不好的使用场景:计算开销小
const simpleValue = useMemo(() => {return props.value + 1;
}, [props.value]); // 这种情况直接计算即可

5.3 配合 useCallback 使用

function SearchComponent({ onSearch }) {const [query, setQuery] = useState('');// 记忆回调函数const handleSearch = useCallback(() => {onSearch(query);}, [query, onSearch]);// 记忆计算结果const searchResults = useMemo(() => {return performExpensiveSearch(query);}, [query]);return (<div><inputvalue={query}onChange={e => setQuery(e.target.value)}/><button onClick={handleSearch}>搜索</button><ResultsList results={searchResults} /></div>);
}// 使用 React.memo 优化 ResultsList
const ResultsList = React.memo(function ResultsList({ results }) {return (<ul>{results.map(result => (<li key={result.id}>{result.title}</li>))}</ul>);
});

6. 注意事项

  1. 不要过度优化

    • 只在真正需要的地方使用 memo 和 useMemo
    • 性能测量验证优化效果
  2. 依赖项的正确使用

    • 确保依赖项数组包含所有需要的值
    • 避免依赖项过多导致优化失效
  3. 避免在循环中使用 useMemo

    // ❌ 错误示例
    {items.map(item => {const memoizedValue = useMemo(() => compute(item), [item]);return <div>{memoizedValue}</div>;
    })}
    
  4. 考虑内存使用

    • memo 和 useMemo 会占用额外的内存
    • 在内存受限的环境中要谨慎使用

7. 性能优化决策流程

  1. 首先评估是否真的需要优化
  2. 使用 React DevTools Profiler 识别性能问题
  3. 选择合适的优化策略:
    • 组件重新渲染优化:使用 React.memo
    • 计算结果优化:使用 useMemo
    • 回调函数优化:使用 useCallback
  4. 测试优化效果
  5. 持续监控性能

通过合理使用 React.memo 和 useMemo,我们可以显著提升 React 应用的性能。但记住,过度优化可能会适得其反,应该在实际需要时才进行优化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/69079.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何用Python将pdf文件转化为高清图片

最近在整理文档&#xff0c;需要将文档进行OCR识别&#xff0c;然后结构化。直接解析pdf文档&#xff0c;行不通&#xff0c;因为文档里面是图片。于是采取先转图片&#xff0c;然后OCR&#xff0c;然后结构化。下面是pdf文档转图片的方法。 import fitz # PyMuPDFdef pdf_to…

Qwen2-VL:在任何分辨率下增强视觉语言模型对世界的感知 (大型视觉模型 核心技术 分享)

摘要 我们推出了Qwen2-VL系列,这是对之前Qwen-VL模型的高级升级,重新定义了视觉处理中的常规预设分辨率方法。Qwen2-VL引入了Naive Dynamic Resolution机制,使模型能够动态地将不同分辨率的图像转换为不同的视觉令牌数量。这种方法允许模型生成更高效和准确的视觉表示,紧密…

工程数学速记手册(下)

工程数学速记手册&#xff08;下&#xff09; 第六部分&#xff1a;概率与统计 概率基础 概率空间与事件 概率空间是概率论中的基本概念&#xff0c;用于描述随机试验的所有可能结果及其概率。一个概率空间可以表示为三元组 ( Ω , F , P ) (\Omega, \mathcal{F}, P) (Ω,…

蓝桥杯3519 填充 | 分类讨论

题目传送门 很简单&#xff0c;遍历一次字符串&#xff0c;将‘?’作为0或1处理&#xff0c;发现00和11统计次数即可。 s str(input()) cnt 0 arr [00, 11, 0?, ?0, 1?, ?1, ??] i0 while i < len(s)-1:if s[i:(i2)] in arr:i 2cnt 1else:i 1 print(cnt)END✨

9.中断系统、EXTI外部中断

中断系统原理 中断 中断系统是管理和执行中断的逻辑结构&#xff0c;外部中断是众多能产生中断的外设之一&#xff0c;所以本节我们就借助外部中断来学习一下中断系统。在以后学习其它外设的时候&#xff0c;也是会经常和中断打交道的。 中断&#xff1a;在主程序运行过程中…

在Docker 容器中安装 Oracle 19c

在 Docker 容器中安装 Oracle 19c 是可行的&#xff0c;但它相较于其他数据库&#xff08;如 MySQL、PostgreSQL 等&#xff09;会复杂一些&#xff0c;因为 Oracle 数据库有一些特定的要求&#xff0c;如操作系统和库的依赖&#xff0c;以及许可证问题。 不过&#xff0c;Ora…

c++----------------------多态

1.多态 1.1多态的概念 多态(polymorphism)的概念&#xff1a;通俗来说&#xff0c;就是多种形态。多态分为编译时多态(静态多态)和运⾏时多 态(动态多态)&#xff0c;这⾥我们重点讲运⾏时多态&#xff0c;编译时多态(静态多态)和运⾏时多态(动态多态)。编译时 多态(静态多态)…

LabVIEW心音心电同步采集与实时播放

开发了一个基于LabVIEW开发的心音心电同步采集与实时播放系统。该系统可以同时采集心音和心电信号&#xff0c;并通过LabVIEW的高级功能实现这些信号的实时显示和播放。系统提升心脏疾病诊断的准确性和效率&#xff0c;使医生能够在观察心音图的同时进行听诊。 ​ 项目背景 心…

Android实战经验篇-玩转Selinux(详解版)

列文章转如下链接&#xff1a; Android Display Graphics系列文章-汇总 Android实战经验篇-系列文章汇总 本文主要包括部分&#xff1a; 一、Selinux概述 1.1 SELinux是什么&#xff1f; 1.2 自主访问控制&#xff08;DAC&#xff09; 1.3 强制访问控制&#xff08;MAC&…

全连接神经网络(前馈神经网络)

目录 一、初步认识全连接神经网络 1、神经元 2、网络结构 3、正向传播算法 二、反向传播算法 1、理解 2、迭代流程 三、构建神经网络模型的基本步骤 四、线性回归神经网络结构 4.1 数据处理 1、数据导入 2、数据归一化处理 3、数据集划分 4、数据形状变换 4.2 模…

MyBatis最佳实践:MyBatis 框架的缓存

缓存的概念&#xff1a; 在内存中临时存储数据&#xff0c;速度快&#xff0c;可以减少数据库的访问次数经常需要查询&#xff0c;不经常修改的数据&#xff0c;不是特别重要的数据都适合存储到缓存中 缓存的级别&#xff1a; 一级缓存(默认开启)&#xff1a;SqlSession 级别 …

(即插即用模块-特征处理部分) 十八、(TIM 2022) TIF Transformer交互融合模块

文章目录 1、Transformer Interactive Fusion2、代码实现 paper&#xff1a;DS-TransUNet: Dual Swin Transformer U-Net for Medical Image Segmentation Code&#xff1a;https://github.com/TianBaoGe/DS-TransUNet 1、Transformer Interactive Fusion 对于一些传统的特征融…

原生HTML集合

一、表格 1、固定表格 <div class"tablebox"><div class"table-container"><table id"myTable" border"0" cellspacing"0" cellpadding"0"><thead><tr></tr></thead>…

CVE-2025-0411 7-zip 漏洞复现

文章目录 免责申明漏洞描述影响版本漏洞poc漏洞复现修复建议 免责申明 本文章仅供学习与交流&#xff0c;请勿用于非法用途&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任 漏洞描述 此漏洞 &#xff08;CVSS SCORE 7.0&#xff09; 允许远程攻击者绕…

[操作系统] 深入进程地址空间

程序地址空间回顾 在C语言学习的时&#xff0c;对程序的函数、变量、代码等数据的存储有一个大致的轮廓。在语言层面上存储的地方叫做程序地址空间&#xff0c;不同类型的数据有着不同的存储地址。 下图为程序地址空间的存储分布和和特性&#xff1a; 使用以下代码来验证一下…

ChirpIoT技术的优势以及局限性

ChirpIoT是一种由上海磐启微电子开发的国产无线射频通讯技术&#xff0c;ChirpIoT技术基于磐启多年对雷达等线性扩频信号的深入研究&#xff0c;并在此基础上对线性扩频信号的变化进行了改进&#xff0c;实现了远距离传输的一种无线通信技术。相关产品型号有E29-400T22D、E290-…

【线上问题定位处理】及【性能优化】系列文章

目录 性能优化 性能优化 九大服务架构性能优化方式 如何进行GC调优 如何排查线上系统出现的Full GC MySQL - 性能优化 MySQL - 分库分表 大数据查询的处理方案 MySQL优化手段有哪些 服务CPU100%问题如何快速定位? 服务内存OOM问题如何快速定位? JVM调优6大步骤 线…

IGBT的损耗计算的学习【2025/1/24】

可以通过示波器实测IGBT电压电流波形&#xff0c;然后通过示波器的math功能将电压电流波形乘积后积分求损耗。 软开管&#xff1a;给了导通信号&#xff0c;但是电流并没有从此IGBT流过 IGBT&#xff08;绝缘栅双极晶体管&#xff09;的损耗主要分为 导通损耗 和 开关损耗 两部…

Jmeter使用Request URL请求接口

简介 在Jmeter调试接口时&#xff0c;有时不清楚后端服务接口的具体路径&#xff0c;可以使用Request URL和cookie来实现接口请求。以下内容以使用cookie鉴权的接口举例。 步骤 ① 登录网站后获取具体的Request URL和cookie信息 通过浏览器获取到Request URL和cookie&#…

联想电脑怎么设置u盘启动_联想电脑设置u盘启动方法(支持新旧机型)

有很多网友问联想电脑怎么设置u盘启动&#xff0c;联想电脑设置u盘启动的方法有两种&#xff0c;一是通过bios进行设置。二是通过快捷方式启动进入u盘启动。但需要注意有两种引导模式是&#xff0c;一种是uefi引导&#xff0c;一种是传统的leacy引导&#xff0c;所以需要注意制…