当前位置：首页 > news >正文

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

news 2025/11/8 1:10:07

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改变时，函数重新创建

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

react useCallback与useMemo函数使用与常见问题 useCallback返回一个可记忆的函数，useMemo返回一个可记忆的值，useCallback只是useMemo的一种特殊形式。那么这到底是什么意思呢？实际上我们在父子通信的时候，有可能传递的值是一…...

编程日记 2023/7/27 21:19:57

Sentinel限流中间件

目录介绍 Sentinel 的特征 Sentinel 的组成实战使用简单实例配置本地控制台使用可视化ui配置简单流控配置异步任务限流使用注解定义限流资源 SpringCloud整合Sentinel 简单整合并发线程流控关联模式整合openFeign使用介绍随着微服务的流行&#xff0…...

编程日记 2023/7/27 21:18:56

使用ajax进行前后端交互的方法

使用ajax进行前后端交互的方法：（我只测试通了json对象作为参数的方式，其他方式我没有测试通过） 1、前端方法： 传参方式：POST 请求类型：json对象响应类型：json对象 function test() …...

编程日记 2023/7/27 21:17:54

动手学深度学习——线性回归从零开始

生成数据集synthetic_data()读取数据集data_iter()初始化模型参数w, b定义模型：线性回归模型linreg()定义损失函数：均方损失squared_loss()定义优化算法：梯度下降sgd()进行训练：输出损失loss和估计误差 %matplotlib inline impor…...

编程日记 2023/7/27 21:16:51

Redis缓存击穿

Redis缓存击穿是指在使用Redis作为缓存时，某个热点数据过期或不存在，导致大量请求直接打到后端存储系统（例如数据库），使得后端系统压力骤增，性能下降的情况。这种情况通常发生在热点数据失效的瞬间。缓存…...

编程日记 2023/7/27 21:15:49

网络安全（黑客）自学的一些建议

1.选择方向首先是选择方向的问题，网络安全是一个很宽泛的专业，包含的方向特别多。比如 web安全，系统安全，无线安全 ，二进制安全，运维安全，渗透测试，软件安全，IOT安全&a…...

编程日记 2023/7/27 21:14:48

全志F1C200S嵌入式驱动开发（基于usb otg的spi-nor镜像烧入）

编程日记 2023/7/27 21:13:46

如何恢复损坏/删除的 Word 文件

有关如何修复不可读的 Microsoft Word 文件或 Rich Text 文件中的文本的分步说明。这些说明有助于从损坏的*.doc、*.docx、*.dot、*.dotx、*.rtf文件（任何版本和大小）中提取文本，只需单击几下： 从此处下载奇客数据恢复 &#xff…...

编程日记 2023/7/27 21:12:45

【论文阅读】Feature Inference Attack on Shapley Values

摘要研究背景近年来，解释性机器学习逐渐成为一个热门的研究领域。解释性机器学习可以帮助我们理解机器学习模型是如何进行预测的，它可以提高模型的可信度和可解释性。Shapley值是一种解释机器学习模型预测结果的方法，它可以计算每个特征对…...

编程日记 2023/7/27 21:11:44

TDesign 中后台系统搭建

目录 1 模板安装2 启动项目3 添加页面总结一般如果希望开发小程序，是要给使用的用户提供一套中后台系统来管理数据的。现在中后台系统开源项目也比较多，本篇我们介绍一个腾讯开源的TDesign模板。 1 模板安装先要在电脑里安装好nodejs，搜索…...

编程日记 2023/7/27 21:10:42

Android 实现阅读用户协议的文字控件效果

开发中，经常要用到一些阅读隐私协议的场景，原生的textview控件很难做到在一个控件里有两个点击事件，那现在就来安利一个强大的组件——SpannableStringBuilder。先看看效果： 直接上代码，布局文件： <Li…...

编程日记 2023/7/27 21:09:41

19.主题时钟

主题时钟 html部分 <div class"btn">黑色</div><div class"clock-container"><div class"time">21</div><div class"date">21</div><div class"clock"><div class&qu…...

编程日记 2023/7/27 21:07:34

ChatGPT在智能电子设备中的应用如何？

ChatGPT在智能电子设备中有着广泛的应用潜力，可以为电子设备提供更智能、更个性化的用户体验，并为用户提供更多便利和高效的功能和服务。智能电子设备是指通过集成计算机、传感器、网络和人工智能等技术，实现智能化的功能和交互的设备。ChatG…...

编程日记 2023/7/27 21:06:33

MGRE之OSPF实验

目录题目： 步骤二：拓扑设计与地址规划编辑步骤三：IP地址配置步骤四：缺省路由配置步骤五：NAT的配置步骤六：MGRE配置中心站点R1配置分支站点配置中心站点R5 R1配置分支站点配置检测&…...

编程日记 2023/7/27 21:05:32

【Selenium+Pytest+allure报告生成自动化测试框架】附带项目源码和项目部署文档

目录前言【文章末尾给大家留下了大量的福利】测试框架简介首先管理时间添加配置文件 conf.py config.ini 读取配置文件记录操作日志简单理解POM模型简单学习元素定位管理页面元素封装Selenium基类创建页面对象简单了解Pytest pytest.ini 编写测试…...

编程日记 2023/7/27 21:04:30

如何负载均衡中的日志统一管理

详细部署步骤：将负载均衡中的日志统一管理调研和规划确定日志管理的需求和目标。调研可用的日志收集工具和中心化存储系统。选择合适的日志收集工具根据需求选择适合负载均衡环境的日志收集工具，如Logstash、Fluentd或Filebeat。在负载均衡服务器…...

编程日记 2023/7/27 21:03:29

Java_26_Stream流

Stream 什么是Stream流？ 在Java 8中，得益于Lambda所带来的函数式编程， 引入了一个全新的Stream流概念 ，用于解决已有集合/数组类库有的弊端。 Stream流能解决什么问题? 可以解决已有集合类库或者数组API的弊端。 Stream认为集合…...

编程日记 2023/7/27 21:02:28

周四见 | 物流人的一周资讯

京东支付年活跃用户数超1.9亿 7月27日消息，京东科技发布2022年环境、社会及公司治理报告。报告显示，在推动社会公平方面，2022年京东科技帮助超207万家中小微企业实现数智化转型，为42万中小微企业提供贷款，节省融资成本…...

编程日记 2023/7/27 21:01:27

uniapp 即时通讯开发流程详解

今天我将为您详细介绍UniApp开发中的即时通讯流程。本文将向您展示如何在UniApp中实现即时通讯功能，为您的应用程序增添交互性和实时性。 1. 准备工作在开始开发之前，确保您已完成以下准备工作： 确保您已经安装好UniApp开发环境&#xff…...

编程日记 2023/7/27 21:00:26

【Terraform学习】Terraform-docker部署快速入门（快速入门）

Terraform-docker部署快速入门实验步骤创建 EC2 IAM 角色导航到IAM 在左侧菜单中，单击角色。单击创建角色该按钮以创建新的 IAM 角色。在创建角色部分，为角色选择可信实体类型： AWS 服务使用案例:EC2 单击下一步添加权限&#x…...

编程日记 2023/7/27 20:59:24

本示例使用的发卡器：https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/11/7 20:25:41

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性：电力载波技术在楼宇自控中的核心价值在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...

编程新知 2025/9/27 2:43:26

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/10/2 6:08:50