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

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

news 2026/5/28 15:47:51

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返回一个可记忆的函数&#xff0c;useMemo返回一个可记忆的值&#xff0c;useCallback只是useMemo的一种特殊形式。 那么这到底是什么意思呢&#xff1f;实际上我们在父子通信的时候&#xff0c;有可能传递的值是一…...

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

Sentinel限流中间件

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

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

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

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

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

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

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

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

Redis缓存击穿

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

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

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

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

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

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

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 前面既然已经搞定了spi-nor驱动，那么下一步考虑的就是怎么从spi-nor flash上面加载uboot、kernel和rootfs。目前spi-nor就是一块白片，上面肯定什么都没有，那么这个时候，我们要做…...

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

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

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

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

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

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

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

TDesign 中后台系统搭建

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

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

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

开发中&#xff0c;经常要用到一些阅读隐私协议的场景&#xff0c;原生的textview控件很难做到在一个控件里有两个点击事件&#xff0c;那现在就来安利一个强大的组件——SpannableStringBuilder。 先看看效果&#xff1a; 直接上代码&#xff0c;布局文件&#xff1a; <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在智能电子设备中有着广泛的应用潜力&#xff0c;可以为电子设备提供更智能、更个性化的用户体验&#xff0c;并为用户提供更多便利和高效的功能和服务。智能电子设备是指通过集成计算机、传感器、网络和人工智能等技术&#xff0c;实现智能化的功能和交互的设备。ChatG…...

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

MGRE之OSPF实验

目录 题目&#xff1a; 步骤二&#xff1a;拓扑设计与地址规划​编辑 步骤三&#xff1a;IP地址配置 步骤四&#xff1a;缺省路由配置 步骤五&#xff1a;NAT的配置 步骤六&#xff1a;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

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

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

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

Java_26_Stream流

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

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

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

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

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

uniapp 即时通讯开发流程详解

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

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

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

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

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

CentOS 7下‘Development Tools’和‘开发工具’组有区别吗？实测告诉你答案

CentOS 7下‘Development Tools’与‘开发工具’的隐藏关联&#xff1a;技术细节全解析在Linux系统管理中&#xff0c;yum的软件包组功能一直是个既实用又充满谜团的领域。特别是当系统语言环境与软件包元数据语言不一致时&#xff0c;开发者们常常会遇到一个有趣的现象&#x…...

编程新知 2026/5/26 3:38:09

30岁裸辞后，我用两个月拿下AI应用认证，现在OFFER选择困难症犯了

30岁裸辞那天&#xff0c;我最怕的不是没收入&#xff0c;而是突然发现&#xff1a;过去积累的经验&#xff0c;正在被AI重新定价。以前会写方案、做表格、跟项目&#xff0c;算是职场硬通货&#xff1b;到了2026年&#xff0c;招聘JD里开始频繁出现AI工具应用、智能工作流、Pr…...

编程新知 2026/5/26 2:47:45

Redis沙盒体验：在浏览器中零门槛掌握NoSQL核心技能

Redis沙盒体验&#xff1a;在浏览器中零门槛掌握NoSQL核心技能 【免费下载链接】try.redis A demonstration of the Redis database. 项目地址: https://gitcode.com/gh_mirrors/tr/try.redis 当你第一次听说Redis时&#xff0c;是否被那些晦涩的技术术语吓退&#xff1…...

编程新知 2026/5/26 2:27:35

BurpSuite 2025插件开发JDK版本兼容性实战指南

1. 为什么BurpSuite插件开发环境总在JDK版本上翻车&#xff1f;你是不是也经历过&#xff1a;下载好BurpSuite最新版2025.4&#xff0c;兴冲冲打开插件开发文档&#xff0c;照着官方示例写完第一个HelloWorld插件&#xff0c;一编译——java.lang.UnsupportedClassVersionError…...

编程新知 2026/5/26 1:39:10

告别数据饥荒：用PyTorch手把手实现原型网络(Prototypical Networks)做电影评论情感分类

告别数据饥荒&#xff1a;用PyTorch手把手实现原型网络做电影评论情感分类 在自然语言处理领域&#xff0c;情感分析一直是热门研究方向&#xff0c;但现实中的开发者常面临一个尴尬困境&#xff1a;标注数据太少。传统深度学习方法动辄需要成千上万的标注样本&#xff0c;而实…...

编程新知 2026/5/25 23:39:42

交流电机驱动器的三种控制模式：前沿切相、后沿切相与同步模式详解

1. 项目概述&#xff1a;一个能玩出花的交流电机驱动器在汽车改装、工业控制或者一些创客项目里&#xff0c;驱动一个交流电机听起来简单&#xff0c;但想让它听话地变速、正反转&#xff0c;甚至实现软启动和精确同步&#xff0c;往往就得搬出笨重又昂贵的工业变频器。今天分享…...

编程新知 2026/5/25 22:10:18

百度深度学习研究院的“叛将“，带着一颗芯片改变了中国智能驾驶——地平线余凯，从ImageNet冠军到征程出货1000万

大家好&#xff0c;我是写代码的篮球球痴。这篇文章跟我自己有点关系——我开的是理想汽车。理想的智驾系统 AD Pro&#xff0c;搭载的就是地平线征程 5 芯片。2026 年 1 月理想 AD Pro 4.0 推送&#xff0c;基于单颗征程 6M 实现了城市 NOA——这是行业里第一个用单颗 128TOPS…...

编程新知 2026/5/25 21:11:32

OpenCore Legacy Patcher完全指南：3步让旧款Mac焕发新生的终极方案

OpenCore Legacy Patcher完全指南&#xff1a;3步让旧款Mac焕发新生的终极方案 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否拥有一台性能尚可但已被…...

编程新知 2026/5/25 21:05:31

【DeepSeek灰度发布黄金法则】：20年SRE亲授7步零故障上线实战框架

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek灰度发布策略全景图 DeepSeek模型服务的灰度发布并非简单的流量切分&#xff0c;而是一套融合可观测性、渐进式验证与多维熔断机制的工程化闭环体系。其核心目标是在保障线上推理稳定性的同时&…...

编程新知 2026/5/25 20:38:10

想深耕网络安全行业，这些必备条件缺一不可

网络空间的攻防对抗日益激烈&#xff0c;网络安全已成为企业生存和国家安全的命脉&#xff0c;它负责构筑数字世界的坚固防线&#xff0c;保护核心资产与用户隐私免受侵害。 想要成为一名优秀的网络安全专家&#xff0c;除了敏锐的安全意识和高度的责任感&#xff0c;更需要锤…...

编程新知 2026/5/25 17:46:25