如何使用useMemo来优化性能

news/发布时间2024/5/24 5:39:46

官方定义

useMemo是一个React Hook,它在每次重新渲染的时候能够缓存计算结果

这里包含了两个信息

useMemo作用:缓存计算结果
useMemo生效的时机:重新渲染的时候

那么哪些情况会重新渲染呢?

1、组件的state发生变化
2、传入组件的props发生变化
3、父组件重新渲染

看一下下面这段代码

import React, {useState, useMemo} from 'react';const mock_data = Array(5000000).fill(null).map((_,i)=>({score:i,name: i + '号选手'
}))const UseMemoDemo = () => {const [count, setCount] = useState(0)const sum = () => {console.log('看看触发了没')return eval(mock_data.map(item=>item.score).join('+'))}return (<div><p>count:{count}</p><button onClick={()=>{setCount(count+1)}}>点击加一</button>总分:{sum()}</div>)
}
export default UseMemoDemo;

可以看到当你点击按钮的时候,sum也在持续触发中,此时由于sum中的计算量过大,造成了明显的卡顿现象
用useMemo改造后,如下:

import React, {useState, useMemo} from 'react';const mock_data = Array(5000000).fill(null).map((_,i)=>({score:i,name: i + '号选手'
}))const UseMemoDemo = () => {const [count, setCount] = useState(0)const sum = useMemo(() => {console.log('看看触发了没')return eval(mock_data.map(item=>item.score).join('+'))},[])return (<div><p>count:{count}</p><button onClick={()=>{setCount(count+1)}}>点击加一</button>总分:{sum}</div>)
}
export default UseMemoDemo;

此时,count的变化就影响不到sum了,另外有一点要注意,此时的sum是单纯的一个数值,不是函数,useMemo的返回值是一个计算结果!!
这里看一下useMemo的结构:

const cachedValue = useMemo(calculateValue, dependencies)

一个没有任何参数的 calculation 函数,像这样 () =>,并且返回任何你想要的计算结果。
一个由包含在你的组件中并在 calculation 中使用的所有值组成的 依赖列表。

useMemo缓存的值(cachedValue)就是其第一个参数,即calculateValue函数的返回值
第二个参数是依赖项,类似于useEffect的用法,可以看一下下面的代码

import React, {useState, useMemo} from 'react';const mock_data = Array(50000).fill(null).map((_,i)=>({score:i,name: i + '号选手'
}))const UseMemoDemo = () => {const [count, setCount] = useState(0)const [trigger, setTrigger] = useState(true)const sum = useMemo(() => {if(trigger){return eval(mock_data.map(item=>item.score).join('+'))}else{return "算不出来"}},[trigger])return (<div><p>count:{count}</p><p><button onClick={()=>{setCount(count+1)}}>点击加一</button></p>总分:{sum}<p><button onClick={()=>{setTrigger(!trigger)}}>只有点击我的时候,sum才受影响</button></p></div>)
}
export default UseMemoDemo;

可以看到效果,sum只受到trigger这个状态的影响,其余的状态都不会更新它

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

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

相关文章

Qt_快速安装指南

下载Qt在线安装程序&#xff08;不仔细介绍&#xff09;注册Qt账号&#xff08;不仔细介绍&#xff09;使用快速运行的命令&#xff0c;按照指定的下载地址下载 在Qt指定目录打开cmd命令窗口.\eqt-unified-windows-x86-4.0.1-1-online. exe --mirror https://mirrors.ustc.edu.…

数据结构——lesson3单链表介绍及实现

目录 1.什么是链表&#xff1f; 2.链表的分类 &#xff08;1&#xff09;无头单向非循环链表&#xff1a; &#xff08;2&#xff09;带头双向循环链表&#xff1a; 3.单链表的实现 &#xff08;1&#xff09;单链表的定义 &#xff08;2&#xff09;动态创建节点 &#…

C++中键盘响应结合OpenCV库进行图像灰度图、HSV图转换和亮度调整

QuickDemo.cpp #include<quick_opencv.h> //键盘响应 void QuickDemo::key_demo(Mat &image) {Mat dstMat::zeros(image.size(),image.type());while (true) {char c waitKey(100);if (c 27) {//key #esc,退出break;}if (c 49) {//key #1,按键1&#xff0c;打印y…

挑战杯 地铁大数据客流分析系统 设计与实现

文章目录 1 前言1.1 实现目的 2 数据集2.2 数据集概况2.3 数据字段 3 实现效果3.1 地铁数据整体概况3.2 平均指标3.3 地铁2018年9月开通运营的线路3.4 客流量相关统计3.4.1 线路客流量排行3.4.2 站点客流量排行3.4.3 入站客流排行3.4.4 整体客流随时间变化趋势3.4.5 不同线路客…

3DSC特征描述符、对应关系可视化以及ICP配准

一、3DSC特征描述符可视化 C #include <pcl/point_types.h> #include <pcl/point_cloud.h> #include <pcl/search/kdtree.h> #include <pcl/io/pcd_io.h> #include <pcl/features/normal_3d_omp.h>//使用OMP需要添加的头文件 #include <pcl…

微信小程序引入官方《评价组件》的一些坑点

作为微信小程序开发者&#xff0c;多少有些想对其吐槽的冲动。文档是多&#xff0c;却混乱、自相矛盾等等。 这次遇到的坑就是官方的《评价组件》&#xff0c;原本引入该组件是为了增加用户体验&#xff0c;结果却不如人意。 按官方文档引入组件&#xff08;代码层面的引入&a…

Unity设备分级策略

Unity设备分级策略 前言 之前自己做的设备分级策略&#xff0c;在此做一个简单的记录和思路分享。希望能给大家带来帮助。 分级策略 根据拟定的评分标准&#xff0c;预生成部分已知机型的分级信息&#xff0c;且保存在包内&#xff1b;如果设备没有被评级过&#xff0c;则优…

学习如何在js中指定按照数组中某一个值排序sort方法

学习如何在js中指定按照数组中某一个值排序sort方法 定义和用法排序数组按升序对数组中的数字进行排序按降序对数组中的数字进行排序获取数组中的最小值获取数组中的最大值获取数组中的最大值按字母顺序对数组进行排序&#xff0c;然后反转排序项的顺序&#xff08;降序&#x…

如何选择最适合的图纸加密软件?用户体验及性价比

安秉网盾图纸加密软件是一款功能强大的图纸加密工具&#xff0c;具有以下特点和优势&#xff1a; 全盘加密&#xff1a;安秉网盾采用先进的加密算法&#xff0c;能对文件、文件夹、磁盘等数据进行全面加密&#xff0c;确保数据在存储和传输过程中的安全性。 监控与审计&#…

open3d k-means 聚类

k-means 聚类 一、算法原理1、介绍2、算法步骤 二、代码1、机器学习生成kmeans聚类2、点云学习生成聚类 三、结果1、原点云2、机器学习生成kmeans聚类3、点云学习生成聚类 四、相关链接 一、算法原理 1、介绍 K-means聚类算法是一种无监督学习算法&#xff0c;主要用于数据聚…

[嵌入式系统-28]:开源的虚拟机监视器和仿真器:QEMU(Quick EMUlator)与VirtualBox、VMware Workstation的比较

目录 一、QEMU概述 1.1 QEMU架构 1.2 QEMU概述 1.3 什么时候需要QEMU 1.4 QEMU两种操作模式 1.5 QEMU模拟多种CPU架构 二、QEMU与其他虚拟机的比较 2.1 常见的虚拟化技术 2.1 Linux KVM 2.2 Windows VirtualBox 2.3 Windows VMware workstation 三、VirtualBox、VM…

elementui 中el-date-picker 选择年后输出的是Wed Jan 01 2025 00:00:00 GMT+0800 (中国标准时间)

文章目录 问题分析 问题 在使用 el-date-picker 做只选择年份的控制器时&#xff0c;出现如下问题&#xff1a;el-date-picker选择年后输出的是Wed Jan 01 2025 00:00:00 GMT0800 (中国标准时间)&#xff0c;输出了两次如下 分析 在 el-date-picker 中&#xff0c;我们使用…

FISCO BCOS(十七)利用脚本进行区块链系统监控

要利用脚本进行区块链系统监控&#xff0c;你可以使用各种编程语言编写脚本&#xff0c;如Python、Shell等 利用脚本进行区块链系统监控可以提高系统的稳定性、可靠性&#xff0c;并帮助及时发现和解决潜在问题&#xff0c;从而确保区块链网络的正常运行。本文可以利用脚本来解…

day09-MongoDB

文章目录 day09-MongoDB一、回顾1.1. 行为实战核心要点说明 二、评论系统2.1 MongoDB2.1.1 MongoDB简介①简介②体系结构与术语 2.1.2 安装与连接2.1.3 Springboot整合MongoDB①引入依赖②添加服务端配置③准备实体类④测试-新增⑤测试-查询⑥测试-更新测试-删除 2.2 app端评论…

fastApi笔记04-查询参数和字符串校验

额外校验 使用Query可以对查询参数添加校验 from typing import Unionfrom fastapi import FastAPI, Queryapp FastAPI()app.get("/items/") async def read_items(q: Union[str, None] Query(defaultNone, max_length50)):results {"items": [{"…

Java,SpringBoot项目中,Postman的测试方法。

目录 展示查询搜索 根据id展示数据 根据id删除数据 根据id更新数据 添加数据 展示查询搜索 // 根据姓名分页查询用户GetMapping("/getUsersByName")public IPage<User> getUsersByName(RequestParam(defaultValue "1") Long current,RequestPar…

Vue-route核心知识整理

目录 1 相关理解 1.1 对 vue-router 的理解 1.2 对 SPA 应用的理解 1.3 对路由的理解 1.3.1 什么是路由&#xff1f; 1.3.2 路由的分类 2 几个注意点 3 路由的基本使用 4 嵌套 (多级) 路由 5 路由传参 5.1 query 方式传参 5.1.1 跳转路由并携带query参数&#xff0…

32单片机基础:OLED调试工具的使用

下面会介绍OLED显示屏的驱动函数模块&#xff0c;先学会如何使用&#xff0c;至于OLED屏幕的原理和代码编写&#xff0c; 我们之后会再写一篇。 现在我们就是用OLED当一个调试的显示屏&#xff0c;方便我们调试程序。 为什么要调试呢&#xff0c;是为了方便我们看现象&#…

深度学习在时间序列预测的总结和未来方向分析

2023年是大语言模型和稳定扩散的一年&#xff0c;时间序列领域虽然没有那么大的成就&#xff0c;但是却有缓慢而稳定的进展。Neurips、ICML和AAAI等会议都有transformer 结构(BasisFormer、Crossformer、Inverted transformer和Patch transformer)的改进&#xff0c;还出现了将…

四川宏博蓬达法律咨询有限公司守护您的法律安全

在法治社会日益完善的今天&#xff0c;法律咨询服务的需求日益增长。四川宏博蓬达法律咨询有限公司作为一家专业的法律服务机构&#xff0c;始终致力于为客户提供全面、高效、安全的法律服务&#xff0c;为社会和谐稳定贡献自己的力量。 一、专业团队&#xff0c;铸就信赖 四川…
推荐文章