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

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

news 2025/12/24 7:02:37

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

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/11/9 1:27:18

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/12/23 17:54:24

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

工程地质软件市场：发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/10/6 6:10:29

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/9/22 21:37:01

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/12/23 21:52:08

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/12/9 19:30:18

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/12/17 20:13:49

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/12/20 18:09:59