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

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

news 2026/4/3 6:17:18

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

《常见三维CAD模型表示法》

表示法核心思想 / 定义数据结构 / 关键特点优点缺点CAD中的应用场景常见软件 / 文件格式B-rep (边界表示)通过精确记录物体的边界&#xff08;顶点、边、面&#xff09;及其拓扑关系&#xff08;邻接、归属&#xff09;来定义实体包含几何信息&#xff08;点坐标、曲线方程、曲…...

编程新知 2026/4/3 6:03:03

【bilibili-downloader】：突破4K画质限制的B站视频下载工具：给视频收藏爱好者的高效解决方案

【bilibili-downloader】&#xff1a;突破4K画质限制的B站视频下载工具&#xff1a;给视频收藏爱好者的高效解决方案 【免费下载链接】bilibili-downloader B站视频下载&#xff0c;支持下载大会员清晰度4K&#xff0c;持续更新中 项目地址: https://gitcode.com/gh_mirrors/…...

编程新知 2026/4/3 5:52:59

SEO_快速诊断并解决网站SEO问题的常见方法（164 ）

快速诊断网站SEO问题的有效方法 在当今数字化时代&#xff0c;网站的SEO&#xff08;搜索引擎优化&#xff09;问题不仅关乎网站的流量&#xff0c;更直接影响到业务的发展。对于许多网站来说&#xff0c;SEO问题往往是隐藏在表面现象背后的复杂问题。因此&#xff0c;快速诊断…...

编程新知 2026/4/3 3:14:42

OpenClaw多终端同步：手机遥控Phi-3-mini-128k-instruct执行电脑任务

OpenClaw多终端同步&#xff1a;手机遥控Phi-3-mini-128k-instruct执行电脑任务 1. 为什么需要手机遥控电脑&#xff1f; 上周五晚上十点半&#xff0c;我正躺在沙发上刷手机&#xff0c;突然想起有个重要文档忘在办公室电脑里了。如果按传统方式&#xff0c;我需要&#xff…...

编程新知 2026/4/3 2:46:15

手把手搓FPGA版W5500三合一驱动

FPGA W5500 3合一 驱动 UDP、TCP客户端、TCP服务端三合一&#xff0c;8个SOCKET都可用源代码&#xff0c;SPI时钟80m,无时序问题&#xff0c;上手即用 硬件实测&#xff0c;高速、稳定 verilog编写&#xff0c;纯逻辑实现 这块W5500芯片的驱动在项目里被我折腾了半个月&#xf…...

编程新知 2026/4/3 2:19:44

AI辅助开发新体验：描述你的健康应用构想，快马一键生成Compose项目代码

最近在尝试开发一个Android端的个人健康数据追踪应用&#xff0c;发现用传统方式从零开始写代码特别耗时。正好体验了InsCode(快马)平台的AI辅助开发功能&#xff0c;整个过程变得轻松多了。下面分享下这个健康应用的实现思路和关键模块设计。 整体架构设计 采用Clean Architec…...

编程新知 2026/4/3 2:15:43

GESP到底有没有必要考？说说我的真实看法

“老师&#xff0c;GESP要不要考&#xff1f;考了能免考CSP初赛&#xff0c;值不值&#xff1f;” 每次信奥赛家长群里一聊到这个&#xff0c;就会吵起来。 有人说"CCF官方的&#xff0c;含金量高&#xff0c;必须考"。也有人说"证书没用&#xff0c;浪费钱浪费…...

编程新知 2026/4/2 23:59:58

突破模型部署瓶颈：TimesFM 2.5从500M到200M的压缩实践指南

突破模型部署瓶颈&#xff1a;TimesFM 2.5从500M到200M的压缩实践指南 【免费下载链接】timesfm TimesFM (Time Series Foundation Model) is a pretrained time-series foundation model developed by Google Research for time-series forecasting. 项目地址: https://gitc…...

编程新知 2026/4/2 23:23:00

广州PMP培训机构怎么选？才聚是标准答案

选广州PMP培训机构&#xff0c;核心看官方授权、师资、通过率、本地化服务、学考一体化&#xff0c;才聚在广州确实是综合实力最强、最稳妥的 “标准答案”。 一、在选择时&#xff0c;可以从下面几个方面来评估一家培训机构&#xff0c;看看哪家更适合你&#xff1a; 官方授权…...

编程新知 2026/4/2 23:20:59

Phi-4-Reasoning-Vision基础操作：图片预览、参数调整、结果复制与导出功能

Phi-4-Reasoning-Vision基础操作&#xff1a;图片预览、参数调整、结果复制与导出功能 1. 工具概览 Phi-4-Reasoning-Vision是一款基于微软Phi-4-reasoning-vision-15B多模态大模型开发的高性能推理工具。它专为双卡4090环境优化&#xff0c;通过Streamlit搭建了直观的宽屏交…...

编程新知 2026/4/2 20:42:17