react 中 useMemo Hook 作用

server/2024/11/19 23:29:01/

`useMemo`是一个用于优化性能的重要钩子函数。

一、缓存计算结果

1. 基本原理和语法

1.1 原理

`useMemo`用于在函数组件中缓存计算结果。

1.2 语法

`useMemo`接受两个参数:一个函数包含需要缓存的计算逻辑、一个依赖项数组指定哪些值的变化会触发重新计算。

javascript">import React, { useMemo, useState } from "react";const ExpensiveComponent = () => {const [count, setCount] = useState(0);// 一个耗时的计算函数,假设这个计算很复杂,不应该每次渲染都执行const expensiveCalculation = () => {console.log("Performing expensive calculation...");let result = 0;for (let i = 0; i < 1000000; i++) {result += i;}return result;};// 使用useMemo缓存计算结果,只有当count变化时才重新计算const memoizedResult = useMemo(() => expensiveCalculation(), [count]);return (<div><p>Count: {count}</p><p>Memoized Result: {memoizedResult}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
};export default ExpensiveComponent;

2. 实际应用场景和效果

2.1 复杂数据处理和转换

例如:用户列表组件,需要对列表进行过滤和排序,可以使用`useMemo`来缓存处理后的结果。

javascript">import React, { useMemo, useState } from "react";const UserListComponent = () => {const [users, setUsers] = useState([{ id: 1, name: "John", age: 30 },{ id: 2, name: "Alice", age: 25 },// 更多用户数据]);const [filterText, setFilterText] = useState("");// 对用户数据进行过滤的函数,假设这是一个复杂的过滤操作const filterUsers = (users, filterText) => {return users.filter((user) => user.name.includes(filterText));};// 使用useMemo缓存过滤后的用户数据,只有当users或filterText变化时才重新过滤const filteredUsers = useMemo(() => filterUsers(users, filterText),[users, filterText]);return (<div><inputtype="text"value={filterText}onChange={(e) => setFilterText(e.target.value)}/><ul>{filteredUsers.map((user) => (<li key={user.id}>{user.name}</li>))}</ul></div>);};export default UserListComponent;

二、优化组件渲染

1. 避免不必要的渲染

1.1 与 React.memo 的关联

javascript">import React, { memo, useMemo, useState } from "react";// 子组件,使用React.memo进行优化const ChildComponent = memo(({ data }) => {return <div>{data}</div>;});const ParentComponent = () => {const [count, setCount] = useState(0);// 使用useMemo缓存计算结果,只有当count变化时才重新计算const memoizedData = useMemo(() => `Count: ${count}`, [count]);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button><ChildComponent data={memoizedData} /></div>);};export default ParentComponent;

http://www.ppmy.cn/server/143322.html

相关文章

大数据应用开发——实时数据处理(二)

前言 大数据应用开发——实时数据采集 大数据应用开发——实时数据处理 Flink完成Kafka中的数据消费&#xff0c;将数据分发至Kafka的dwd层中 并在HBase中进行备份 大数据应用开发——数据可视化 hadoop&#xff0c;zookeeper&#xff0c;kafka&#xff0c;flink&#xff0…

网页作业9

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>服务中心</title><style>* {margin:…

[前端面试]HTML AND CSS

HTML html语义化标签的理解 是什么: 在布局页面的时候&#xff0c;根据内容的结构与含义&#xff0c;选择合适的带语义的html标签 如header&#xff0c;footer&#xff0c;nav&#xff0c;article&#xff0c;main&#xff0c;aside&#xff0c;h标签等 好处&#xff1a; 增…

【国产MCU系列】-GD32F470-直接存储器访问控制器(DMA)

直接存储器访问控制器(DMA) 文章目录 直接存储器访问控制器(DMA)1、DMA介绍2、DMA寄存器列表3、DMA的传输模式与传输操作3.1 DMA的传输模式3.2 DMA的传输操作3.3 传输完成与软件清除4、DMA的中断4.1 中断标志4.2 中断异常4.3 中断错误5、固件库的DMA相关API6、DMA示例每个嵌…

nacos开启鉴权与配置加密

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、Nacos漏洞复现 1.1.查看配置 1.2.查看用户列表 1.3.注册新用户 二、Nacos开启鉴权 三、变更配置与信息加密 1.变更配置 2.信息加密 四、增强安全性 五、常见问…

为了数清还有几天到周末,我用python绘制了日历

日历的秘密 昨天&#xff0c;在看小侄子写作业的时候&#xff0c;发现了一个秘密&#xff1a;他在“演算纸”&#xff08;计算数学题用的草纸&#xff09;上画了非常多的日历。对此我感到了非常的困惑&#xff0c;“这是做什么的&#xff1f;” 后来&#xff0c;经过了我不懈…

【Rust中的项目管理】

Rust中的项目管理 前言Package&#xff0c;Crate&#xff0c;Module &use &#xff0c;Path通过代码示例解释 Crate&#xff0c;Module &#xff0c;use&#xff0c;Path创建一个package&#xff1a;代码组织化skin.rs 中的代码struct & enum 相对路径和绝对路径引用同…

基于C语言easyX实现的推箱子游戏

基于80x86汇编语言的推箱子游戏 一、游戏背景介绍 推箱子是一款众所周知的益智游戏&#xff0c;此游戏只有一个目标&#xff1a;将游戏中的所有箱子推到指定位置。简单易懂的游戏规则是此款游戏成功的根本原因。 此游戏具有如下特点&#xff1a;简便的操作、复杂的关卡以及层…