react hook:useMemo

news/2024/4/16 14:44:50/文章来源:https://blog.csdn.net/qq_36413371/article/details/136543270

useMemo在每次重新渲染的时候能够缓存计算的结果。
在初次渲染时,useMemo 返回调用 calculateValue 的结果。
在接下来的渲染中,如果依赖项没有发生改变,它将返回上次缓存的值;否则将再次调用 calculateValue,并返回最新结果。
尽管在某些情况下您可以不使用它,但对于需要进行昂贵的计算或处理大量数据的情况,使用 useMemo 是非常有益的。

calculateValue:要缓存计算值的函数。它应该是一个没有任何参数的纯函数,并且可以返回任意类型。在之后的渲染中,如果 dependencies 没有发生变化,React 将直接返回相同值。否则,将会再次调用 calculateValue 并返回最新结果,然后缓存该结果以便下次重复使用。
dependencies:所有在 calculateValue 函数中使用的响应式变量组成的数组。响应式变量包括 props、state 和所有你直接在组件中定义的变量和函数。

const cachedValue = useMemo(() => calculateValue, dependencies)

在严格模式下,为了 帮你发现意外的错误,React 将会 调用你的计算函数两次。
你可以仅仅依赖 useMemo 作为性能优化手段。否则,使用 state 变量 或者 ref 可能更加合适。

你应该仅仅把 useMemo 作为性能优化的手段。如果没有它,你的代码就不能正常工作,那么请先找到潜在的问题并修复它。然后再添加 useMemo 以提高性能。

默认情况下,当一个组件重新渲染时,React 会递归地重新渲染它的所有子组件。

记忆另一个 Hook 的依赖

依赖这样的对象会破坏记忆化。当组件重新渲染时,组件主体内的所有代码都会再次运行。创建 searchOptions 对象的代码行也将在每次重新渲染时运行。因为 searchOptions 是你的 useMemo 调用的依赖项,而且每次都不一样,React 知道依赖项是不同的,并且每次都重新计算 searchItems。

function Dropdown({ allItems, text }) {const searchOptions = { matchMode: 'whole-word', text };const visibleItems = useMemo(() => {return searchItems(allItems, searchOptions);}, [allItems, searchOptions]); // 🚩 提醒:依赖于在组件主体中创建的对象// ...

要解决此问题,你可以在将其作为依赖项传递之前记忆 searchOptions 对象 本身:

function Dropdown({ allItems, text }) {const searchOptions = useMemo(() => {return { matchMode: 'whole-word', text };}, [text]); // ✅ 只有当 text 改变时才会发生改变const visibleItems = useMemo(() => {return searchItems(allItems, searchOptions);}, [allItems, searchOptions]); // ✅ 只有当 allItems 或 serachOptions 改变时才会发生改变// ...

记忆一个函数

export default function Page({ productId, referrer }) {const handleSubmit = useMemo(() => {return (orderDetails) => {post('/product/' + productId + '/buy', {referrer,orderDetails});};}, [productId, referrer]);return <Form onSubmit={handleSubmit} />;
}
export default function Page({ productId, referrer }) {const handleSubmit = useCallback((orderDetails) => {post('/product/' + productId + '/buy', {referrer,orderDetails});}, [productId, referrer]);return <Form onSubmit={handleSubmit} />;
}

上面两个例子是完全等价的。useCallback 的唯一好处是它可以让你避免在内部编写额外的嵌套函数。

每次重新渲染时计算函数都会运行两次
在 严格模式 中,React 将调用你的某些函数两次而不是一次:

故障排查
我调用的 useMemo 应该返回一个对象,但返回了 undefined

这段代码不起作用:// 🔴 你不能像这样 `() => {` 在箭头函数中直接返回一个对象const searchOptions = useMemo(() => {matchMode: 'whole-word',text: text}, [text]);
请显式编写 return 语句:// ✅ 这有效并且是明确的const searchOptions = useMemo(() => {return {matchMode: 'whole-word',text: text};}, [text]);

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

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

相关文章

导出谷歌gemma模型为ONNX

参考代码如下&#xff08;从GitHub - luchangli03/export_llama_to_onnx: export llama to onnx修改而来&#xff0c;后面会合入进去&#xff09; 模型权重链接参考&#xff1a; https://huggingface.co/google/gemma-2b-it 可以对modeling_gemma.py进行一些修改(transforme…

革命文物的新征程:SpringBoot实践

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

【QT】定时器事件应用

public&#xff1a;//定时器void timerEvent(QTimerEvent *);private:int id;#include <QTimerEvent> //QWidget 默认不追踪鼠标事件 mylabel::mylabel(QWidget *parent) : QLabel(parent) {this->setMouseTracking(true);//启动定时器//参数1&#xff1a;触发定时器的…

electron+vue3全家桶+vite项目搭建【29】封装窗口工具类【3】控制窗口定向移动

文章目录 引入实现效果思路声明通用的定位对象主进程模块渲染进程测试效果 引入 demo项目地址 窗口工具类系列文章&#xff1a; 封装窗口工具类【1】雏形 封装窗口工具类【2】窗口组&#xff0c;维护窗口关系 封装窗口工具类【3】控制窗口定向移动 很多时候&#xff0c;我们想…

2024 AI 辅助研发的新纪年

随着人工智能技术的持续发展与突破&#xff0c;2024年AI辅助研发正成为科技界和工业界瞩目的焦点。从医药研发到汽车设计&#xff0c;从软件开发到材料科学&#xff0c;AI正逐渐渗透到研发的各个环节&#xff0c;变革着传统的研发模式。在这一背景下&#xff0c;AI辅助研发不仅…

【粉丝福利】探秘内部审计数字化之道:精准解析转型方法与成功路径

&#x1f33c;前言 内部审计是一种独立的、客观的确认和咨询活动&#xff0c;包括鉴证、识别和分析问题以及提供管理建议和解决方案。狭义的数字化转型是指将企业经营管理和业务操作的各种行为、状态和结果用数字的形式来记录和存储&#xff0c;据此再对数据进行挖掘、分析和应…

万字详解,Java实现低配版线程池

文章目录 1.什么是线程池2.线程池的优势3.原理4.代码编写4.1 阻塞队列4.2 ThreadPool线程池4.3 Worker工作线程4.4 代码测试 5. 拒绝策略5.1 抽象Reject接口5.2 BlockingQueue新增tryPut方法5.3 修改ThreadPool的execute方法5.4 ThreadPool线程池构造函数修改5.5 拒绝策略实现1…

运输层端口号、复用和分用的概念

运行在计算机上的进程用进程标识符PID来标志&#xff0c;但不同操作系统使用的进程标识符又不一样。 所以为了能让不同计算机上的进程进行网络通信&#xff0c;就需要统一的方式来进行标识&#xff0c;这就是TCP/IP体系的端口号&#xff0c;范围是0~65535&#xff0c;2字节 运…

详解float函数类型转换

函数描述 float([x]) 函数将数字或数字的字符串表示形式转换为与它等效的有符号浮点数。如果参数x是一个字符串&#xff08;十进制表示的数字串&#xff09;&#xff0c;数字前面可以添加符号来表示正数&#xff0c;或负数。符号和数字之间不能出现空格&#xff0c;但是符号前…

【Web前端】Vue核心基础

文章目录 1. Vue简介2. Vue官网使用指南3. 初识Vue3.1 搭建Vue开发环境3.2 HelloWorld案例3.3 el与data的两种写法3.4 MVVM模型3.5 模板语法 4. 数据绑定4.1 v-bind单向数据绑定4.2 v-model双向数据绑定 5. 事件处理5.1 v-on绑定事件5.2 事件修饰符5.3 键盘事件 6. 计算属性6.1…

关于出国留学和考研比较----以本人双非跨考计算机为例

文章目录 中心论点国内就业现状勿让旧认知害了自己那出国留学真的一无是处了吗?1. 藤校仍旧是具有极高价值2. 时间成本低3. 研究生一定比单纯的本科找工作强!4. 很多人说出国读博好,可以无脑入,真是这样吗? 中心论点 如果在选择出国留学还是国内考研的最终核心诉求都是有更好…

【kubernetes】关于k8s集群的污点和容忍,以及k8s集群的故障排查思路

目录 一、污点 关于污点的增删改查 验证污点的作用——NoExecute ​编辑 验证污点的作用——NoSchedule 验证污点的作用——PreferNoSchedule 二、容忍 三、关于cordon 和 drain 四、Pod启动阶段 五、关于pod的五种状态 六、k8s常见的排障手段 针对组件故障 针对pod…

04 Python的面向对象编程

self是一个指针&#xff0c;指向对象xiaoming,可以调用对象里面的属性和方法。 name 和 age是实例变量。 desplay_msg是类变量 xiaoming就是具体的对象&#xff0c;是类的实例化

如何使用apk2url从APK中快速提取IP地址和URL节点

关于apk2url apk2url是一款功能强大的公开资源情报OSINT工具&#xff0c;该工具可以通过对APK文件执行反汇编和反编译&#xff0c;以从中快速提取出IP地址和URL节点&#xff0c;然后将结果过滤并存储到一个.txt输出文件中。 该工具本质上是一个Shell脚本&#xff0c;专为红队…

字节跳动发布SDXL-Lightning模型,支持WebUI与ComfyUI双平台,只需一步生成1024高清大图!

字节跳动发布SDXL-Lightning模型,WebUI与ComfyUI平台,只需一步生成1024高清大图,需要的步数比 LCM 更低了! 什么是SDXL-Lightning: SDXL-Lightning 是一种快速的文本到图像生成模型。SDXL-Lightning模型的核心优势在于其创新的蒸馏策略,它可以通过几个步骤生成高质量的 1…

Unity使用UnityWebRequest读取音频长度不对的解决方法

在开发的过程中碰到这样一个问题&#xff0c;有的音频文件通过UnityWebRequest读取出来后&#xff0c;AudioClip的Length会不对&#xff0c;比如本身有7秒&#xff0c;读出来只有3秒。代码如下&#xff1a; IEnumerator TestEnumerator() {UnityWebRequest www UnityWebReque…

利用“定时执行专家”循环执行BAT、VBS、Python脚本——含参数指定功能

目录 一、软件概述 二、VBS脚本执行设置 三、触发器设置 四、功能亮点 五、总结 在自动化办公和日常计算机任务管理中&#xff0c;定时执行脚本是一项非常重要的功能。今天&#xff0c;我将为大家带来一款名为“定时执行专家”的软件的评测&#xff0c;特别是其定时执行VB…

IPSEC VPN安全介绍以及相关实验

目录 一、IPSEC相关的安全服务 二、IPSEC的安全协议 三、实验 IPSEC一组协议集合&#xff0c;用于确保在IP网络上进行通信时的安全性和保密性。它提供了一种标准化的方法&#xff0c;用于对IP数据包进行加密、身份验证和完整性保护。IPSEC通常用于建立虚拟私人网络VPN连接&am…

托管服务器常见的问题有哪些(常见托管问题解决)

​  对于我们来说&#xff0c;选择一个合适的服务器托管提供商只是建立和管理自己所属网站的第一步。相对来说&#xff0c;真正的挑战在于解决管理网站运行时可能出现的各种问题。就像有时&#xff0c;有些常见的服务器托管问题是不可避免的&#xff0c;但通过主动监控、定期…

Springboot教程(六)——异常处理

拦截异常 在Spring Boot中&#xff0c;我们可以将异常统一放在全局处理类来处理&#xff0c;创建一个全局异常处理类需要用到ControllerAdvice和ExceptionHandler注解。 ControllerAdvice类似一个增强版的Controller&#xff0c;用于标注类&#xff0c;表示该类声明了整个项目…