当前位置: 首页 > 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…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...