7.react useCallback与useMemo函数使用与常见问题

react useCallback与useMemo函数使用与常见问题

useCallback返回一个可记忆的函数,useMemo返回一个可记忆的值,useCallback只是useMemo的一种特殊形式。

那么这到底是什么意思呢?实际上我们在父子通信的时候,有可能传递的值是一样的,但是传递的内存地址可能是不一样的,那么在React眼里是会对组件进行重新执行的。

一般对象类型的值都是具备内存地址的,所以值相同,但内存地址可能不同,举例如下:

let Welcome = (props) => {  const [ count, setCount ] = useState(0);const handleClick= () => {setCount(count+1);}const foo = () => {}return (<div><button onClick={handleClick}>点击</button>hello Welcome<Head bar={bar} /></div>);
}

当点击按钮的时候,组件会进行重新渲染,因为每次重新触发组件的时候,后会重新生成一个新的内存地址的foo函数。

那么如何不让foo函数重新生成,使用之前的函数地址呢?因为这样做可以减少子组件的渲染,从而提升性能。可以通过useCallback来实现。

const foo = useCallback(() => {}, [])

等价

const foo = useMemo(()=> ()=>{}, [])   // 针对函数

而有时候这种需要不一定都是函数,比如数组的情况下,我们就需要用到useMemo这个钩子函数了,useMemo更加强大,其实useCallback是useMemo的一种特殊形式而已。

const foo = useMemo(()=> ()=>{}, [])   // 针对函数
const bar = useMemo(()=> [1,2,3], [])  // 针对数组

这里我们还要注意,第二个参数是一个数组,这个数组可以作为依赖项存在,也就是说当依赖项发生值的改变的时候,那么对应的对象就会重新创建。

const foo = useMemo(()=> ()=>{}, [count])   // 当count改变时,函数重新创建

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

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

相关文章

实训笔记7.25

实训笔记7.25 7.25笔记一、MapReduce的特殊使用场景1.1 通过MapReduce程序实现多文件Join操作1.1.1 通过在Reduce端实现join操作1.1.2 通过在Map端实现join操作 1.2 MapReduce中的计数器的使用1.2.1 计数器使用两种方式 1.3 MapReduce实现数据清洗 二、MapReduce的OutputFormat…

Linux笔记——搜索命令find、解压缩命令、vi编辑器、用户权限命令、系统信息相关命令讲解

系列文章目录 Linux笔记——磁盘进行分区与挂载介绍 Linux笔记——管道相关命令以及shell编程 Linux笔记——进程管理与网络监控技术讲解​​​​​​ Linux笔记——rpm与yum下载软件命令介绍 文章目录 系列文章目录 准备工作 一 搜索命令—— find 搜索 1.1 目标 1.…

Python基础语法学习

文章目录 基础语法标识符注释行与缩进多行语句获取控制台输入print输出import 与 from...import 基本数据类型布尔类型数字类型字符串列表(List)元组(Tuple)集合(Set)字典(Dictionary) 数据类型转换隐式类型转换显式类型转换 条件控制if 语句match...case 循环语句whilewhile循…

html input 展示隐藏的密码

<!DOCTYPE html> <html> <meta http-equiv"Content-Type" content"text/html;charsetutf-8"/> <body><h2>登录表格</h2><form action"/action_page.php"><div class"container"><…

chrome查看浏览器内核日志

由于经常在网页上调试播放音视频&#xff0c;但是总遇到一些未知原因&#xff0c;导致无法正常播放&#xff0c;亟需查看浏览器内核日志&#xff0c;分析原因&#xff0c;做一下笔记。 (1) 查看浏览器快捷键属性 &#xff08;2&#xff09;在快捷键启动位置补充参数 --enable-…

菜鸡shader:L12 SD处理贴图制作时钟动画

文章目录 SD处理贴图Shader代码C#代码最后效果 SD处理贴图 呃呃感觉这节课&#xff0c;很大一部分都是在将怎么用SD来处理贴图&#xff0c;在这里就简单放一下课上的截图吧&#xff0c;我也跟着做了一下&#xff0c;虽然表盘十二个数排列间隔不一样&#xff0c;但还是稀碎地做…

脉冲频率、转速相关计算(信捷PLC C语言FC编程应用)

转速、线速度、角速度转换和计算关系请查看下面文章链接: 转速/线速度/角速度计算FC_RXXW_Dor的博客-CSDN博客里工业控制张力控制无处不在,也衍生出很多张力控制专用控制器,磁粉制动器等,本篇博客主要讨论PLC的张力控制相关应用和算法,关于绕线机的绕线算法,大家可以参看…

12.Netty源码之整体架构脉络

Netty 整体架构脉络 Netty 的逻辑处理架构为典型网络分层架构设计&#xff0c;共分为网络通信层、事件调度层、服务编排层&#xff0c;每一层各司其职。 网络通信层 网络通信层的职责是执行网络 I/O 的操作。它支持多种网络协议和 I/O 模型的连接操作。当网络数据读取到内核缓冲…

闲置旧手机搭建服务器?在安卓手机上使用Termux搭建web服务「公网远程访问」

文章目录 概述1.搭建apache2.安装cpolar内网穿透3.公网访问配置4.固定公网地址5.添加站点 概述 Termux是一个Android终端仿真应用程序&#xff0c;用于在 Android 手机上搭建一个完整的Linux 环境&#xff0c;能够实现Linux下的许多基本操作&#xff0c;不需要root权限Termux就…

docker系列5:docker安装nginx

传送门 前面介绍了docker的安装&#xff1a;docker系列1&#xff1a;docker安装 还有docker镜像加速器&#xff1a;docker系列2&#xff1a;阿里云镜像加速器 以及docker的基本操作&#xff1a; docker系列3&#xff1a;docker镜像基本命令 以及容器的基本命令&#xff1a;…

k8s服务发现之第五弹--使用 Service 连接到应用

Kubernetes 的网络模型 通过前面教程的学习&#xff0c;我们已经可以将容器化的应用程序在 Kubernetes 中运行起来&#xff0c;并且发布到 Kubernetes 内/外的网络上。 通常&#xff0c;Docker 使用一种 host-private 的联网方式&#xff0c;在此情况下&#xff0c;只有两个容…

Go学习 2、程序结构

2、程序结构 2.1 命名 一个名字必须以一个字母或下划线开头&#xff0c;后面可以跟任意数量的字母、数字或下划线。 大写字母和小写字母是不同的。 GO语言有25个关键字&#xff0c;关键字不能用于自定义名字。 还有大约30多个预定义名字&#xff0c;对应内建的常量、类型和函…

【iOS】多界面传值

文章目录 前言一、属性传值二、协议传值三、block传值四、KVO传值五、KVO的自动触发与手动触发六、通知传值总结 前言 在写网易云音乐以及3GShare包括后面的学生管理系统时&#xff0c;用到许多界面传值方法&#xff0c;特撰写博客记录目前学过的几种多界面传值方法 一、属性…

【Docker】Docker部署私有仓库的配置及应用

文章目录 一、Docker-registry 搭建本地私有仓库1. Registry 的概念2. Registry 的部署过程 二、Docker-harbor 搭建私有仓库1. 什么是Harbor2. Harbor 的特性3. Harbor的构成4. Harbor 的部署过程4.1 安装 harbor4.2 创建项目并进行上传下载4.3 上传镜像到私有仓库4.4 从私有仓…

Vue--插槽

一、插槽-默认插槽 1.作用 让组件内部的一些 结构 支持 自定义 2.需求 将需要多次显示的对话框,封装成一个组件 3.问题 组件的内容部分&#xff0c;不希望写死&#xff0c;希望能使用的时候自定义。怎么办 4.插槽的基本语法 组件内需要定制的结构部分&#xff0c;改用**…

mysql的主键选择

一.没有定义主键有什么问题 如果定义了主键&#xff0c;那么InnoDB会使用主键作为聚簇索引如果没有定义主键&#xff0c;那么会使用第一非空的唯一索引&#xff08;NOT NULL and UNIQUE INDEX&#xff09;作为聚簇索引如果既没有主键也找不到合适的非空索引&#xff0c;那么In…

【数据挖掘】时间序列的傅里叶变换:用numpy解释的快速卷积

一、说明 本篇告诉大家一个高级数学模型&#xff0c;即傅里叶模型的使用&#xff1b; 当今&#xff0c;傅里叶变换及其所有变体构成了我们现代世界的基础&#xff0c;为压缩、通信、图像处理等技术提供了动力。我们从根源上理解&#xff0c;从根本上应用&#xff0c;这是值得付…

STM32MP157驱动开发——按键驱动(线程化处理)

文章目录 “线程化处理”机制&#xff1a;内核函数线程化处理方式的按键驱动程序(stm32mp157)编程思路button_test.cgpio_key_drv.cMakefile修改设备树文件编译测试 “线程化处理”机制&#xff1a; 工作队列是在内核的线程的上下文中执行的 工作队列中有多个 work&#xff0…

Git远程仓库使用方法

目录 介绍 详细教程 1、创建远程仓库 2、在本地初始化仓库 3、关联远程仓库 4、提交代码 5、拉取到本地仓库 6、提交到Git仓库 5、将本地代码推送到远程仓库 介绍 远程仓库在协同开发中起着关键的作用&#xff0c;它提供了一个中央存储库&#xff0c;使多个开发者能够…

Hadoop中HDFS的架构

一、Switch语句 语法规则&#xff1a; ①语句中的变量类型可以是byte、short、int或者char;从javaSE5开始支持枚举类型&#xff1b; javaSE7开始&#xff0c;switch支持String。 ②没有break时&#xff0c;后续case的语句都会执行 二、修饰符 访问修饰符 Java中&#xff0c…