[React]useMemoizedFn和useCallback对比
useMemoizedFn文档地址:https://ahooks.js.org/zh-CN/hooks/use-memoized-fn
hooks组件内什么时候会更新自定义函数
在 React 中,自定义的 Hooks 内部的函数在以下常见的几种情况下会被重新赋值,导致更新引用:
-
组件重新渲染:
当组件重新渲染时,Hooks 内部的函数会被重新执行,从而导致函数的重新赋值和更新引用。
这意味着每次组件重新渲染时,Hooks 内部的函数会被重新计算,返回新的函数引用。 -
依赖项发生变化(对于使用了依赖项的 Hooks):
对于某些 Hooks,例如 useEffect、useMemo 和 useCallback,当其依赖项发生变化时,Hooks 内部的函数也会被重新执行。
这会导致函数的重新赋值和更新引用,以确保在依赖项发生变化时能够获得最新的函数引用。 -
闭包内部依赖的状态发生变化:
自定义的 Hooks 可能使用闭包内部的状态或其他上下文中的值作为依赖,如果这些依赖的状态发生变化,Hooks 内部的函数也会重新执行。这样做是为了保持函数内部依赖的状态是最新的,避免出现闭包中使用过期数据的问题。
useCallback和useMemoizedFn对比
在 React 中,useMemoizedFn 和 useCallback 都用于优化函数组件的性能,但它们有一些不同点。
- 目的:
useMemoizedFn: 这不是 React 的内置 Hook,而是可能由第三方库提供的功能。它的目的是将一个函数 “记忆化”,类似于useCallback,但在某些情况下,它提供了更多的功能,例如支持自定义的缓存策略和多个实例之间共享缓存等。useCallback: 这是 React 的内置 Hook,专门用于记忆化函数。它的主要目的是在依赖项列表不变时,返回相同的函数引用,以减少函数的重新创建。
- 用法:
useMemoizedFn的基本思想是将一个函数包装起来,并根据特定的条件缓存函数的结果,以便在相同的输入参数下再次调用时,直接返回缓存的结果,而不必重新计算。useCallback接受一个函数和依赖项列表,并在依赖项列表不变时返回记忆化的函数引用。
import React, { useState, useCallback } from 'react';
import { message } from 'antd';
import { useMemoizedFn } from 'ahooks';export default () => {const [count, setCount] = useState(0);const callbackFn = useCallback(() => {message.info(`Current count is ${count}`);}, [count]);const memoizedFn = useMemoizedFn(() => {message.info(`Current count is ${count}`);});return (<><p>count: {count}</p><buttontype="button"onClick={() => {setCount((c) => c + 1);}}>Add Count</button><div style={{ marginTop: 16 }}><button type="button" onClick={callbackFn}>call callbackFn</button><button type="button" onClick={memoizedFn} style={{ marginLeft: 8 }}>call memoizedFn</button></div></>);
};
在上面的示例中,callbackFn和memoizedFn效果是一样的,区别在于memoizedFn不用自己指定依赖。
useCallback:使用useMemo实现
使用 useMemo 来实现类似于 useCallback 的功能。事实上,useCallback 本质上就是使用 useMemo 来进行函数记忆化的一种简化形式。
useCallback 和 useMemo 都是 React 的内置 Hook,它们都用于在依赖项不变时,返回记忆化的值。唯一的区别是 useCallback 是专门用于记忆化函数,而 useMemo 可以用于任何类型的值。
在 React 组件中,当函数作为依赖项传递给子组件时,通常会使用 useCallback 来确保子组件不会因为父组件的重新渲染而频繁地创建新的函数。然而,你也可以使用 useMemo 来达到相同的目的。
下面是一个使用 useMemo 实现类似于 useCallback 的示例:
import React, { useState, useMemo } from 'react';function useMyCallback(callback, deps) {return useMemo(() => callback, deps);
}const MyComponent = () => {const [count, setCount] = useState(0);// 使用 useMyCallback 记忆化函数const handleClick = useMyCallback(() => {console.log('Callback function called');setCount(count + 1);}, [count]);return (<div><p>Count: {count}</p><button onClick={handleClick}>Increment</button></div>);
};
在上面的示例中,我们定义了一个 useMyCallback Hook,它接受一个函数 callback 和一个依赖项列表 deps。在内部,我们使用 useMemo 将传入的 callback 进行记忆化,并返回记忆化的函数引用。
这样,当 count 不变时,handleClick 将返回相同的函数引用,避免了因为父组件重新渲染而导致的函数的频繁创建,从而实现了和 useCallback 类似的功能。
useMemoizedFn:使用useMemo实现
useMemoizedFn 是持久化 function 的 Hook,理论上,可以使用 useMemoizedFn 完全代替 useCallback。使用 useMemoizedFn,可以省略第二个参数 deps,同时保证函数地址永远不会变化。
function useMemoizedFn(func){if(typeof func !== 'function') return// 通过 useRef 保持其引用地址不变,并且值能够保持值最新const funcRef = useRef(func)funcRef.current = useMemo(()=>{return func}, [func])const memoizedFn = useRef();if (!memoizedFn.current) {// 返回的持久化函数,调用该函数的时候,调用原始的函数memoizedFn.current = function(...args){return funcRef.current.apply(this, args)}}return memoizedFn.current
}
ahooks源码实现如下:
import { useMemo, useRef } from 'react';
import { isFunction } from '../utils';
import isDev from '../utils/isDev';
function useMemoizedFn(fn) {if (isDev) {if (!isFunction(fn)) {console.error("useMemoizedFn expected parameter is a function, got ".concat(typeof fn));}}var fnRef = useRef(fn);// why not write `fnRef.current = fn`?// https://github.com/alibaba/hooks/issues/728fnRef.current = useMemo(function () {return fn;}, [fn]);var memoizedFn = useRef();if (!memoizedFn.current) {memoizedFn.current = function () {var args = [];for (var _i = 0; _i < arguments.length; _i++) {args[_i] = arguments[_i];}return fnRef.current.apply(this, args);};}return memoizedFn.current;
}
export default useMemoizedFn;
useMemoizedFn 的实现中使用了两个 useRef 钩子,具有不同的用途:
-
fnRef:这个useRef用于存储原始函数(fn)的引用。它被初始化为传递给useMemoizedFn函数的fn参数,并且其目的是始终保持函数的最新版本。使用它的原因是确保记忆化的函数(memoizedFn)能够始终调用最新版本的原始函数fn,即使在渲染之间fn发生了变化。 -
memoizedFn:这个useRef用于存储将由useMemoizedFn钩子返回的记忆化函数。其目的是在渲染间保持记忆化函数的引用。当memoizedFn首次创建时,它被赋值为一个新的函数,该函数调用最新版本的fnRef.current并传递提供的参数。然后,这个记忆化函数被返回并在组件中使用。
这样的实现通过使用两个独立的 useRef 钩子,确保记忆化函数能够正确地引用最新版本的原始函数,同时保持记忆化函数本身的稳定引用。
使用 useMemo 更新 fnRef.current 而不是直接赋值 fnRef.current = fn,是为了确保当 fn 依赖项发生变化时,记忆化函数会被重新计算。通过在 useMemo 中使用 [fn] 作为依赖项数组,记忆化函数将始终引用 fn 的最新版本,并在 fn 发生变化时相应地更新。
这个实现旨在确保 useMemoizedFn 返回的记忆化函数保持高效,并正确地反映原始函数的最新版本和其依赖项的最新变化。
参考文章
https://juejin.cn/post/7106061970184339464#heading-6
https://ahooks.js.org/zh-CN/hooks/use-memoized-fn
相关文章:
[React]useMemoizedFn和useCallback对比
useMemoizedFn文档地址:https://ahooks.js.org/zh-CN/hooks/use-memoized-fn hooks组件内什么时候会更新自定义函数 在 React 中,自定义的 Hooks 内部的函数在以下常见的几种情况下会被重新赋值,导致更新引用: 组件重新渲染&…...
计算机毕设 深度学习人体跌倒检测 -yolo 机器视觉 opencv python
文章目录 0 前言1.前言2.实现效果3.相关技术原理3.1卷积神经网络3.1YOLOV5简介3.2 YOLOv5s 模型算法流程和原理4.数据集处理3.1 数据标注简介3.2 数据保存 5.模型训练 6 最后 0 前言 🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升,传统的毕设题…...
完全背包
动态规划解题步骤 : 动态规划问题一般从三个步骤进行考虑。 步骤一:集合和集合的状态 所谓的集合,就是一些方案的集合。 用 g[i][j] 表示从前 i 种物品中进行选择,且总体积不大于 j 的各个选法获得的价值的集合。注意:g[i][j] 不是一个数…...
【软件测试】webdriver常用API演示(Java+IDEA+chrome浏览器)
1.元素定位方法 对象的定位应该是自动化测试的核心,要想操作一个对象,首先应该识别这个对象。一个对象就是一个人一样,他会有各种的特征(属性),如比我们可以通过一个人的身份证号,姓名…...
Linux安装MySQL 8.1.0
MySQL是一个流行的开源关系型数据库管理系统,本教程将向您展示如何在Linux系统上安装MySQL 8.1.0版本。请按照以下步骤进行操作: 1. 下载MySQL安装包 首先,从MySQL官方网站或镜像站点下载MySQL 8.1.0的压缩包mysql-8.1.0-linux-glibc2.28-x…...
多线程面试相关的一些问题
面试题 1. 常见的锁策略相关的面试题 2. CAS相关的面试题 3. Synchronized 原理相关的面试题 4. Callable 接口相关的面试题 1. 常见的锁策略 乐观锁 vs 悲观锁 悲观锁: 总是假设最坏的情况,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都…...
【使用维纳滤波进行信号分离】基于维纳-霍普夫方程的信号分离或去噪维纳滤波器估计(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
Vue+axios如何解决跨域
1、为什么会产生跨域? 出于浏览器的同源策略限制。 同源策略(Sameoriginpolicy)是一种约定,是浏览器的一种安全机…...
网络安全系统中的守护者:如何借助威胁情报 (TI) 提高安全性
在这篇哈巴尔网站上的推文中,我们将解释 TI 缩写背后的含义、为什么需要它、Positive Technologies 收集哪些网络威胁数据以及如何帮助企业预防网络威胁。我们将以四种情况为例,说明公司如何使用 PT Threat Intelligence Feeds 来发现恶意活动并预防攻击…...
并发编程 - CompletableFuture
文章目录 Pre概述FutureFuture的缺陷类继承关系功能概述API提交任务的相关API结果转换的相关APIthenApplyhandlethenRunthenAcceptthenAcceptBoththenCombinethenCompose 回调方法的相关API异常处理的相关API获取结果的相关API DEMO实战注意事项 Pre 每日一博 - Java 异步编程…...
IPIDEA参展ChinaJoy!探索未来创新科技的峰会之旅
中国最大的国际数码互动娱乐展会ChinaJoy即将于7月28日在上海举行,届时将聚集全球来自22个国家和地区的领先科技公司、创业者和技术专家,为参观者呈现一系列引人入胜的展览和活动。而IPIDEA作为参展商之一,将为参观者带来一场关于数字科技的奇…...
2023最新ChatGPT商业运营版网站源码+支持ChatGPT4.0+GPT联网+支持ai绘画(Midjourney)+支持Mind思维导图生成
本系统使用Nestjs和Vue3框架技术,持续集成AI能力到本系统! 支持GPT3模型、GPT4模型Midjourney专业绘画(全自定义调参)、Midjourney以图生图、Dall-E2绘画Mind思维导图生成应用工作台(Prompt)AI绘画广场自定…...
轮趣科技教育版ros小车键盘控制运动
我之前买的ros小车是单独买的底板,以为随便一个树莓派就可以,因为我以前有一个树莓派3B,后来买了单独的小车之后,发现只能使用树莓派4B,然后又单独买了一个树莓派4B,给装上镜像,安装ros-melodic…...
深入理解Python中的os.chdir()方法
深入理解Python中的os.chdir()方法 1. 简介 在Python中,os.chdir()方法用于改变当前的工作目录。工作目录是指当前正在执行的脚本所在的目录。通过使用os.chdir()方法,我们可以在脚本执行过程中切换到不同的目录。 在编写Python脚本时,我们…...
【Golang 接口自动化02】使用标准库net/http发送Post请求
目录 写在前面 发送Post请求 示例代码 源码分析 Post请求参数解析 响应数据解析 验证 发送Json/XMl Json请求示例代码 xml请求示例代码 总结 资料获取方法 写在前面 上一篇我们介绍了使用 net/http 发送get请求,因为考虑到篇幅问题,把Post单…...
LaTex语法(常用数学符号的语法和注意事项)
说明:[]括号表示把语法括起来,并不表示LaTex语法。 1. 求和符号(Σ) 这个符号的基本语法为:[\sum_{}^{}]。 符号有两种模式:内联数学模式(inside math mode)和显示数学模式(displayed math mode)。 内联数学模式:排版时使用各…...
Yunfly 一款高效、性能优异的node.js企业级web框架
介绍 Yunfly 一款高性能 Node.js WEB 框架, 使用 Typescript 构建我们的应用。 使用 Koa2 做为 HTTP 底层框架, 使用 routing-controllers 、 typedi 来高效构建我们的 Node 应用。 Yunfly 在 Koa 框架之上提升了一个抽象级别, 但仍然支持 Koa 中间件。在此基础之上, 提供了一…...
mac m1安装Centos9
先看结果(在mac M1 安装centos8 安装不成功的原因大部分是没有找到正确的系统) 由于Cnetos8 停服,现有mac m1 上能够按照的Centos8 并非由官方发布,因此寻找官方发布的能够在mac m1上安装的centos版本。 在YouTuBe上找到一个视频…...
深入理解mAP
0 介绍 mAP是目标检测任务最重要的评价指标。 mAP 是mean average precosion的缩写,mean 和 average都是平均的意思, 所以这个指标的计算涉及到2次平均。 mean是对所有类别的平均, 比如VOC 数据有20个类, 每个类别分别计算AP&…...
PostGis -基础、Springboot 整合、电子围栏处理
目的: 为什么要用PostgreSQL? 因为有时候我们需要存储 空间数据,如:存储一个 多边形 到数据。PostGis中 geometry、geography :基本空间数据类型,用于表达点线面等空间要素,具体类型涵盖了OGC的简单对象模…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
反射获取方法和属性
Java反射获取方法 在Java中,反射(Reflection)是一种强大的机制,允许程序在运行时访问和操作类的内部属性和方法。通过反射,可以动态地创建对象、调用方法、改变属性值,这在很多Java框架中如Spring和Hiberna…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制: 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程,创建出来的进程就是子进程,原来的进程为父进程。…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
