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

React中useMemo和useCallback的区别

一句话来解释,useMemo是缓存值的,useCallback是缓存函数的。
一、useMemo:

接收两个参数,第一个参数是个函数,第二个是依赖项。返回一个memoized值,只有当它的某个依赖项改变时才重新计算 memoized 值,初始化的时候也会调用一次,这种优化有助于避免在每次渲染时都进行高开销的计算。

import React, { useState, useMemo } from 'react';export default function hook() {const [count, setCount] = useState(1)const [total, setTotal] = useState(1)const memoizedValue = useMemo(() => {console.log("只有total变了我才会变")// 返回的值是total+1return total + 1}, [total]);return (<div><button onClick={() => setCount(count + 1)}>count + 1</button><button onClick={() => setTotal(total + 1)}>total + 1</button><div>count is {count}</div><div>total is {total}</div><div>memoizedValue is {memoizedValue}</div></div>)
}

二、useCallback

接收两个参数,第一个参数是个函数,第二个是依赖项。返回一个memoized函数,依赖项不变的情况下,memoizedCallback的引用不变。即:useCallback会被缓存,从而达到渲染性能优化的目的。

父组件:

export default function LearnUseCallBack() {const [num, setNum] = useState(1);const [count, setCount] = useState(1);const add = useCallback(() => {console.log("你好");setNum(num + 1);}, [count]);return (<div><div>缓存函数</div><button onClick={add}>num + 1</button><button onClick={() => setCount(count + 1)}>count + 1</button>num ==> {num}count ==> {count}<ChildComponent add={add}></ChildComponent></div>);
}

子组件:

import React, { useState, useCallback } from "react";// react.memo会做一层浅比较/*** 因为我们每次触发render 都会重新执行一遍当前函数* 所以说,我们的方法会重新赋值,react.memo时进行浅比较* 重新赋值的方法和之前的方法,引用不一样,所以react.memo* 会认为是一个新的对象,所以会重新渲染*/
const ChildComponent = React.memo((props) => {console.log("每次render都会触发吗?", props);return (<div><div>你好我是子组件</div></div>);
});

注:若add方法不被缓存,因为add是引用类型,则组件刷新时add函数每次渲染时都指向不同的引用类型,若将add传给子组件,即使子组件使用了memo包裹,子组件还是每次都会刷新的,影响性能!我们只希望与子组件相关的值变化了之后子组件才去重新渲染。

相关文章:

React中useMemo和useCallback的区别

一句话来解释&#xff0c;useMemo是缓存值的&#xff0c;useCallback是缓存函数的。 一、useMemo&#xff1a; 接收两个参数&#xff0c;第一个参数是个函数&#xff0c;第二个是依赖项。返回一个memoized值&#xff0c;只有当它的某个依赖项改变时才重新计算 memoized 值&…...

SpringBoot 快速实现IP地址解析

如果使用本地ip 解析的话&#xff0c;我们将会借助ip2region&#xff0c;该项目维护了一份较为详细的本地ip 地址对应表&#xff0c;如果为了离线环境的使用&#xff0c;需要导入该项目依赖&#xff0c;并指定版本&#xff0c;不同版本的方法可能存在差异。 <dependency>…...

亚马逊、速卖通,阿里国际等平台测评如何用自养号测评补单

在电商领域&#xff0c;补单是一种常见的推广方式。它能够优化商品销售、留下优质评论、打压竞品和赶走跟卖等&#xff0c;具有很多好处。然而&#xff0c;补单也存在安全性问题&#xff0c;有些卖家找人补单后店铺反而出了问题。因此&#xff0c;了解测评系统是非常重要的的。…...

ubuntu挂载ext4文件系统

文章目录 1.虚拟机分配10G磁盘用来挂载ext4文件系统2.磁盘分区3.创建文件系统4.挂载文件系统5.卸载文件系统6.使用ior测试ext4三种日志模式&#xff08;1&#xff09;ordered&#xff08;2&#xff09;journal&#xff08;3&#xff09;writeback 1.虚拟机分配10G磁盘用来挂载e…...

MySQL 读写分离

目录 一、什么是读写分离&#xff1f; 二、为什么要读写分离呢&#xff1f; 三、什么时候要读写分离&#xff1f; 四、主从复制与读写分离 五、MySQL 读写分离原理 六、企业 使用MySQL 读写分离场景 1&#xff09;基于程序代码内部实现 2&#xff09;基于中间代理层实现…...

【多线程例题】顺序打印abc线程

顺序打印-进阶版 方法一&#xff1a;三个线程竞争同一个锁&#xff0c;通过count判断是否打印 方法二&#xff1a;三个线程同时start&#xff0c;分别上锁&#xff0c;从a开始&#xff0c;打印后唤醒b 三个线程分别打印A&#xff0c;B&#xff0c;C 方法一&#xff1a;通过co…...

WebSocket工具类

最近的项目在整长连接WebSocket&#xff0c;之前也写过一个感觉没有这个全面。提供个工具类WebSocketHelper和Java-WebSocket-1.3.9.jar包以及一个HttpURLConnectionUtil 1、WebSocketHelper import android.util.Log;import org.java_websocket.client.WebSocketClient; imp…...

Linux 的 crontab

Linux 的 crontab 是一个用于在特定时间运行命令或脚本的工具。每个用户都可以创建自己的 crontab 文件来安排定时任务。 以下是使用 Linux crontab 的基本步骤&#xff1a; 打开终端或命令行界面。 输入以下命令来编辑当前用户的 crontab 文件&#xff1a; crontab -e如果是…...

十二.Redis模拟集群搭建

配置环境 查看环境信息 127.0.0.1:6379> info replication #查看当前redis的信息 # Replication role:master #角色 master主机 connected_slaves:0 #从机数量为0 master_failover_state:no-failover master_replid:115f37a0ec195680ef754d6915738b0c0a05f450 master_replid…...

IDEA导入微服务项目后自动将微服务展示在service面板中

有时候&#xff0c;不会自动将微服务展示在service面板中。 添加service面板&#xff1a; service面板&#xff1a; 更新所有maven&#xff0c;就可以自动将微服务展示在service面板中。...

MySQL体系结构及执行过程

一、MySQL体系结构 1、网络连接层 客户端连接器&#xff08;Client Cnnectors&#xff09;&#xff1a;提供支持与MySQL服务器建立连接。 建立连接命令&#xff1a;mysql -h -u -p -h指定MySQL服务的IP 若本地连接则不需要 每一个连接均会保存用户权限&#xff0c;中途修改权…...

21. MySQL基础知识

文章目录 一、索引B Tree 原理1. 数据结构2. 操作3. 与红黑树的比较 MySQL 索引1. BTree 索引2. 哈希索引3. 全文索引4. 空间数据索引 索引优化1. 独立的列2. 多列索引3. 索引列的顺序4. 前缀索引5. 覆盖索引 索引的优点索引的使用条件 二、查询性能优化使用 Explain 进行分析优…...

【ArcGIS Pro微课1000例】0029:绘制全球海洋波纹荡漾效果图

本文讲解ArcGIS Pro3.0中,基于全球航洋面状矢量数据,绘制震撼全球海洋波纹荡漾效果图。 文章目录 一、效果预览二、效果制作三、参数详解一、效果预览 绘制好的海水波纹荡漾效果图如下: 下面我们来学习绘制过程。 二、效果制作 波纹荡漾效果需要在全局或者局部场景中制作…...

2023“钉耙编程”中国大学生算法设计超级联赛(3)8-bit Zoom

2023“钉耙编程”中国大学生算法设计超级联赛&#xff08;3&#xff09;8-bit Zoom 题解 有一张尺寸为 n n n\times n nn的图片&#xff0c;你要将图片放大成大小为 n Z 100 n Z 100 \dfrac{nZ}{100}\times \dfrac{nZ}{100} 100nZ​100nZ​的图片。 当下列任何一个条件不成…...

【PWN · ret2text | 伪rand()】[HDCTF 2023]pwnner

伪随机数以及ctypes库的初步接触 目录 前言 一、题目 二、解题思路 三、exp 总结 前言 一道简单的ret2text&#xff0c;加上一些伪随机的知识&#xff0c;对于本蒟蒻萌新来说&#xff0c;比较新&#xff0c;值得记录。 一、题目 栈溢出保护、PIE保护都没有开。反汇编后…...

第五章:通过对抗擦除的目标区域挖掘:一种简单的语义分割方法

0.摘要 我们研究了一种逐步挖掘具有鉴别性的物体区域的原则方法&#xff0c;使用分类网络来解决弱监督语义分割问题。分类网络只对感兴趣对象中的小而稀疏的鉴别性区域有响应&#xff0c;这与分割任务的要求相背离&#xff0c;分割任务需要定位密集、内部和完整的区域以进行像素…...

自定义view - 玩转字体变色

自定义View步骤&#xff1a; 1>&#xff1a;values__attrs.xml&#xff0c;定义自定义属性&#xff1b; 2>&#xff1a;在第三个构造方法中获取自定义属性&#xff1b; 3>&#xff1a;onMeasure【不是必须的】&#xff1b; 4>&#xff1a;onDraw&#xff1a;绘制代…...

工业边缘网关HiWoo Box的4G/5G CPE功能:为现场无线设备提供网络

引言 随着工业物联网的快速发展&#xff0c;现场设备的无线连接需求越来越迫切。然而&#xff0c;在一些室外或者不方便布网的场景下&#xff0c;为现场的无线设备提供网络仍然是一个挑战。为了满足这一需求&#xff0c;工业边缘网关HiWoo Box引入了4G/5G CPE&#xff08;Cust…...

Set 和 Map 数据结构

数据结构Set ES6提供了新的数据结构Set。它类似于数组&#xff0c;但是成员的值都是唯一的&#xff0c;没有重复的值。 Set本身是一个构造函数&#xff0c;用来生成Set数据结构。 // 数组去重 const set new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4]目前个人感觉Se…...

nginx根据url参数动态代理

nginx根据url参数动态代理 请求url格式&#xff0c;其中参数proxy后面的url就是需要访问的真实地址&#xff1a; http://localhost:9388/?proxyhttp://localhost:8038/Content/layui/font/iconfont.woff?v256 http://localhost:9388/?proxyhttp://localhost:8072/article/A…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...