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

useCallback 与 useMemo 的区别 作用

useCallback 缓存钩子函数,useMemo 缓存返回值(计算结果)

TS声明如下:type DependencyList = ReadonlyArray<any>;function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;

一些文章长篇大论解释,其实直接看 typescript 声明就知道作用了,泛型 T 在 useCallback 中是一个钩子函数,在 useMemo 中是一个返回值。

demo示例

一个简单计数器 demo 解释全部作用:点击按钮 count 加 1,同时显示这个数是奇数还是偶数

不用 hook 的代码

import React, { FC, useCallback, useMemo, useState } from 'react';const Index: FC = (props) => {const [count, setCount] = useState(0);const isEvenNumber = count % 2 === 0;const onClick = () => setCount(count + 1);return (<div><div>{count} is {isEvenNumber ? 'even':'odd'} number</div><button onClick={onClick}></button></div>);
};

使用 hook 后的代码

import React, { FC, useCallback, useMemo, useState } from 'react';const Index: FC = (props) => {const [count, setCount] = useState(0);const isEvenNumber = useMemo(() => {return count % 2 === 0;}, [count]);const onClick = useCallback(() => {setCount(count + 1);}, [count]);return (<div><div>{count} is {isEvenNumber ? 'even':'odd'} number</div><button onClick={onClick}></button></div>);
};

看起来没有什么区别,甚至使用 hook 后代码还变复杂了。这个 demo 比较简单,所有使用 hook 后的优化效果不明显,大部分代码即使使用第一种写法都没有太大区别,用户无感知,但系统逐步升级后为了占用更小的内存、更流畅的使用体验 hook 是必要的。

作用

如果不使用 hook,每次组件 re-render 的时候,都需要重新计算 isEvenNumber 的值,以及 new 一个 onClick 函数,即使每次计算结果没有改变,也要重复这个浪费内存的操作,hook 可以缓存相关结果,避免重复渲染时的无效计算。

useCallback 和 useMemo 的参数都是一个函数加一个依赖数组,依赖没有改变时直接返回内存中缓存的结果,无需重复计算。简单理解就是 useCallback 缓存事件处理函数,useMemo 缓存二次计算的结果,如上面的点击事件,以及通过 count 值判断奇数偶数的二次计算结果。

本质原因

React 的函数组件是非常好用的东西,相比 class 写法以及 Vue 的对象挂载写法简洁很多,代码测试复用成本低,容易入手,但也带来一些问题,无状态函数很理想,但现实有一些计算开销大、组件渲染频繁的场景是需要状态的,每次都计算一遍状态(callback 和 二次计算值)无疑很浪费内存,函数不像对象(React class 写法或者 Vue 组件写法)可以直接将状态挂载在自身,没有浪费内存的问题,要实现类似的效果只能找一个的内存挂载点挂载这些东东,所以有了 useCallback 和 useMemo 这些 hook。

useCallback和useMemo的区别

  • 相同点:
    1. useCallback 和 useMemo 参数相同,第一个参数是函数,第二个参数是依赖项的数组。
    2. useMemo、useCallback 都是使参数(函数)不会因为其他不相关的参数变化而重新渲染。
    3. 与 useEffect 类似,[] 内可以放入你改变数值就重新渲染参数(函数)的对象。如果 [] 为空就是只渲染一次,之后都不会渲染
  • 区别:
    • 主要区别是 React.useMemo 将调用 fn 函数并返回其结果,而 React.useCallback 将返回 fn 函数而不调用它。

相关文章:

useCallback 与 useMemo 的区别 作用

useCallback 缓存钩子函数&#xff0c;useMemo 缓存返回值&#xff08;计算结果&#xff09;。 TS声明如下&#xff1a;type DependencyList ReadonlyArray<any>;function useCallback<T extends (...args: any[]) > any>(callback: T, deps: DependencyList)…...

Mybatis的学习

01-mybatis传统dao开发模式 概述 mybatis有两种使用模式: ①传统dao开发模式, ②dao接口代理开发模式 ①传统dao开发模式 dao接口 dao实现子类 mapper映射文件dao实现子类来决定了dao接口的方法和mapper映射文件的statement的关系 代码实现 public class StudentDaoImpl im…...

PyTorch深度学习实战 | 计算机视觉

深度学习领域技术的飞速发展&#xff0c;给人们的生活带来了很大改变。例如&#xff0c;智能语音助手能够与人类无障碍地沟通&#xff0c;甚至在视频通话时可以提供实时翻译&#xff1b;将手机摄像头聚焦在某个物体上&#xff0c;该物体的相关信息就会被迅速地反馈给使用者&…...

力扣(LeetCode)436. 寻找右区间(2023.03.10)

给你一个区间数组 intervals &#xff0c;其中 intervals[i] [starti, endi] &#xff0c;且每个 starti 都 不同 。 区间 i 的 右侧区间 可以记作区间 j &#xff0c;并满足 startj > endi &#xff0c;且 startj 最小化 。 返回一个由每个区间 i 的 右侧区间 在 interv…...

已解决Servlet中Request请求参数中文乱码的问题

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…...

【flask】URL和视图映射

目录 首页 传参 URL数据类型 get传参 首页 url与视图函数的映射是通过app.route()装饰器实现的。 只有一个斜杠代表的是根目录——首页。 传参 URL传参是通过<参数名称>的形式进行传递。URL中有几个参数&#xff0c;在视图函数中也要指定几个参数 from flask im…...

Python实现性能测试(locust)

一、安装locustpip install locust -- 安装&#xff08;在pycharm里面安装或cmd命令行安装都可&#xff09;locust -V -- 查看版本&#xff0c;显示了就证明安装成功了或者直接在Pycharm中安装locust:搜索locust并点击安装&#xff0c;其他的第三方包也可以通过这种方式二、loc…...

【数论】试除法判断质数,分解质因数,筛质数

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法......感兴趣就关注我吧&#xff01;你定不会失望。 &#x1f308;个人主页&#xff1a;主页链接 &#x1f308;算法专栏&#xff1a;专栏链接 现已更新完KMP算法、排序模板&#xff0c;之…...

【C++】红黑树

文章目录红黑树的概念红黑树的性质特征红黑树结点的定义红黑树的插入操作情况1情况2情况3特殊情况代码实现红黑树的验证红黑树的删除红黑树和AVL树的比较红黑树的应用红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但是每一个结点都增加一个存储位表示结点的颜…...

【剧前爆米花--爪哇岛寻宝】进程的调度以及并发和并行,以及PCB中属性的详解。

作者&#xff1a;困了电视剧 专栏&#xff1a;《JavaEE初阶》 文章分布&#xff1a;这是关于进程调度、并发并行以及相关属性详解的文章&#xff0c;我会在之后文章中更新有关线程的相关知识&#xff0c;并将其与进程进行对比&#xff0c;希望对你有所帮助。 目录 什么是进程/…...

网络的瓶颈效应

python从小白到总裁完整教程目录:https://blog.csdn.net/weixin_67859959/article/details/129328397?spm1001.2014.3001.5501 ❤ 网络的瓶颈效应 网络瓶颈&#xff0c;指的是影响网络传输性能及稳定性的一些相关因素&#xff0c;如网络拓扑结构&#xff0c;网线&#xff0…...

【C++进阶】四、红黑树(三)

目录 一、红黑树的概念 二、红黑树的性质 三、红黑树节点的定义 四、红黑树的插入 五、红黑树的验证 六、红黑树与AVL树的比较 七、完整代码 一、红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可…...

Spring——AOP切入点表达式和AOP通知类型

切入点:要进行增强的方法 切入点表达式:要进行增强的方法的描述式 第一种方法的本质是基于接口实现的动态代理(jdk) 第二种是基于cglib实现的动态代理 AOP切入点表达式 而需要加载多个切入点时&#xff0c;不可能每个切入点都写一个切入点表达式 例子 下面的代理描述的是匹配…...

Hadoop学习:Yarn

1.YARN介绍 一个通用的资源管理系统和调度平台 YARN不分配磁盘&#xff0c;由HDFS分配 相当于一个分布式的操作系统平台&#xff0c;为上层MR等计算程序提供运算所需要的资源&#xff08;内存、CPU等&#xff09; 2.YARN三大组件 不要忘记AppMaster&#xff0c;他是程序内部…...

Spring Data JPA

文章目录一、Spring Data基础概念二、JPA与JDBC的相同与不同之处三、Hibernate & JPA快速搭建1.添加依赖2.实体类3.hibernate的配置文件 ——hibernate.cfg.xml四、测试——基于hibernate的持久化&#xff08;单独使用&#xff09;五、测试——基于JPA的持久化&#xff08;…...

java List报错Method threw ‘java.lang.UnsupportedOperationException‘ exception. 解决

问题描述&#xff1a;List使用Arrays.asList()初始化后&#xff0c;再add对象时报错&#xff1a;Method threw java.lang.UnsupportedOperationException exception.错误示例如下&#xff1a; List<ExportListVO.ExportSheet> sheetVOList Arrays.asList(new ExportList…...

数据结构-用栈实现队列

前言&#xff1a; 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09;&#xff1a; 实现 MyQueue 类&#xff1a; void push(int x) 将元素 x 推到队列的末尾 int pop() 从队列的开头移除并返回元素 int…...

第十四章 从 Windows 客户端控制 IRIS

文章目录第十四章 从 Windows 客户端控制 IRISIRISctlGetDirsSyntaxReturn ValuesIRISctlConfigStatusSyntaxReturn ValuesIRISctlControlSyntaxReturn Values第十四章 从 Windows 客户端控制 IRIS IRIS 为 Windows 客户端程序提供了一种机制来控制 IRIS 配置并启动 IRIS 进程…...

数据结构---双链表

专栏&#xff1a;数据结构 个人主页&#xff1a;HaiFan. 专栏简介&#xff1a;从零开始&#xff0c;数据结构&#xff01;&#xff01; 双链表前言双链表各接口的实现为要插入的值开辟一块空间BuyLN初始化LNInit和销毁LNDestory打印链表中的值LNPrint尾插LNPushBack和尾删LNPop…...

Windows 环境安装Scala详情

为了进一步学习Spark&#xff0c;必须先学习Scala 编程语言。首先开始Scala 环境搭建。温馨提示&#xff1a;本文是基于Windows 11 安装Scala 2.13.1 版本第一步&#xff1a;确保本机已经正确安装JDK1.8 环境第二步&#xff1a;Scala 官网下载我们所属scala版本文件。Scala 官网…...

反激电源设计避坑:空载炸管、RCD吸收烧电阻?聊聊DCM模式下那些容易忽略的细节

反激电源实战陷阱解析&#xff1a;从空载炸管到RCD失效的深度拆解 实验室里弥漫着焦糊味&#xff0c;示波器上那条本该稳定的波形突然飙升——这可能是每个电源工程师都经历过的噩梦时刻。反激拓扑看似简单&#xff0c;但当你的设计从仿真进入实测阶段&#xff0c;各种"幽…...

Qwen-Image-Edit-2509镜像部署实战:跟着图文教程,10分钟跑通AI修图

Qwen-Image-Edit-2509镜像部署实战&#xff1a;跟着图文教程&#xff0c;10分钟跑通AI修图 1. 快速了解Qwen-Image-Edit-2509 Qwen-Image-Edit-2509是阿里巴巴通义千问团队推出的最新AI图像编辑工具。这个模型最大的特点是能够理解自然语言指令&#xff0c;对图片进行智能修改…...

PyTorch Vision模型微调终极指南:从零到精通的迁移学习实战

PyTorch Vision模型微调终极指南&#xff1a;从零到精通的迁移学习实战 【免费下载链接】vision pytorch/vision: 一个基于 PyTorch 的计算机视觉库&#xff0c;提供了各种计算机视觉算法和工具&#xff0c;适合用于实现计算机视觉应用程序。 项目地址: https://gitcode.com/…...

5年java开发经验总结面试题-内含完整答案

1、讲讲IO里面的常见类&#xff0c;字节流、字符流、接口、实现类、方法阻塞。 文件字节输入输出流 FileInputStream/FileOutputStream&#xff0c; 文件字符流 FileReader/FileWriter 包装流PrintStream/PrintWriter/Scanner 字符串输入输出流StringReader/StringWriter 转换流…...

东北老牌央国企陪跑机构哪家实力强

在东北地区&#xff0c;众多求职者&#xff0c;特别是应届毕业生&#xff0c;将目光投向了工作稳定、发展前景广阔的央国企。在这一背景下&#xff0c;专业的求职服务机构应运而生&#xff0c;为求职者提供系统化的支持。辽宁优泰教育咨询有限公司便是其中一家专注于该领域的服…...

STM32智能甲鱼养殖系统设计与实现

基于STM32的智能甲鱼养殖系统设计与实现1. 项目概述1.1 系统背景现代水产养殖行业正面临从传统人工管理向智能化转型的关键时期。甲鱼作为对水质环境敏感的特种水产品&#xff0c;其养殖过程中需要持续监测多项水质参数并保持稳定环境。传统人工监测方式存在响应滞后、精度不足…...

PLCopen运动控制功能块实战:从单轴控制到多轴联动的5个经典案例解析

PLCopen运动控制功能块实战&#xff1a;从单轴控制到多轴联动的5个经典案例解析 在工业自动化领域&#xff0c;精确的运动控制是实现高效生产的关键。无论是简单的传送带定位&#xff0c;还是复杂的多轴协同作业&#xff0c;PLCopen规范提供的标准化功能块都能为工程师提供强大…...

5分钟搞懂3GPP NTN标准:从Release16到19的关键技术演进与实战应用

5分钟搞懂3GPP NTN标准&#xff1a;从Release16到19的关键技术演进与实战应用 当全球通信行业将目光投向低轨卫星星座与高空平台时&#xff0c;3GPP的NTN&#xff08;非地面网络&#xff09;标准正在重塑连接边界。本文将以工程师视角&#xff0c;带您穿透技术文档迷雾&#xf…...

从零到精通:Human Resource Machine 全关卡高效解法与思维跃迁指南

1. 为什么《Human Resource Machine》是程序员的最佳思维训练场 第一次打开《Human Resource Machine》时&#xff0c;我以为这不过是个披着编程外衣的小游戏。但当我卡在"第三年"的关卡整整一个下午后&#xff0c;才意识到这可能是最接近真实编程思维的训练场。这款…...

OWASP靶场实战指南:从环境搭建到第一个SQL注入漏洞挖掘(含DVWA通关思路)

OWASP靶场实战指南&#xff1a;从环境搭建到第一个SQL注入漏洞挖掘 网络安全的世界就像一片未知的海洋&#xff0c;而靶场就是我们练习游泳的安全泳池。对于刚入门的新手来说&#xff0c;最大的困扰往往不是缺乏理论知识&#xff0c;而是不知道如何将所学付诸实践。OWASP靶场正…...