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

react钩子函数用法(useCallback、useMemo)

useMemo

import { useMemo } from 'react';  function MyComponent({ a, b }) {  const memoizedValue = useMemo(() => {  // 进行一些昂贵的计算  return a + b;  }, [a, b]); // 当 a 或 b 发生变化时,memoizedValue 将被重新计算  return <div>{memoizedValue}</div>;  
}

useMemo 接受两个参数:一个函数和一个依赖数组。函数返回我们想要“记住”的值,而依赖数组则告诉 React 何时需要重新计算这个值。

注意事项

1、useMemo 仅在依赖项发生变化时重新计算值。如果依赖项没有变化,即使组件重新渲染,useMemo 也会返回上一次缓存的值。

2、useMemo 缓存的是函数的返回值,而不是函数本身。因此,如果函数本身发生变化(例如,函数内部的逻辑被修改),即使依赖项没有变化,useMemo 也可能会返回新的值。但这种情况在实际开发中较少见,因为函数逻辑通常在组件外部定义且不会频繁变化。

3、在使用 useMemo 时,需要注意不要过度优化。对于一些简单的计算或不会频繁触发的计算,可能不需要使用 useMemo。因为过度使用 useMemo 可能会增加内存的消耗,并可能导致不必要的复杂性。

useCallback

useCallback 的主要作用是返回一个缓存版本的函数,只有当它的依赖项发生变化时,这个函数才会被重新创建。这意味着,如果依赖项没有改变,函数的引用将保持不变,从而避免因函数引用改变而导致的不必要的重新渲染。其背后的原理是利用闭包和 React 的调度机制来存储并在必要时重建函数。

useCallback 接受两个参数:一个是要被缓存的回调函数,另一个是该回调函数的依赖项数组。当依赖项数组中的任何一个值发生变化时,useCallback 都会返回一个新的函数实例;否则,它将返回之前缓存的函数实例。

const memoizedCallback = useCallback(() => {  doSomething(a, b);  
}, [a, b]);

在这个例子中,memoizedCallback 是一个被缓存的函数,它仅在 a 或 b 发生变化时才会被重新创建。

使用场景

1、在传递给子组件的回调函数中,特别是当子组件使用了如 React.memo 或 shouldComponentUpdate 来避免不必要的渲染时,useCallback 可以确保传递给子组件的回调函数引用保持稳定,从而防止不必要的重新渲染。

2、在大型列表渲染或频繁状态更新的性能敏感场景中,使用 useCallback 可以帮助提升性能。

注意事项

1、与直接在组件内创建函数相比,使用 useCallback 需要付出额外的开销,因为它涉及到存储和检索函数的机制。因此,在不需要优化性能的情况下,盲目使用 useCallback 可能会导致性能下降。

2、依赖项数组应准确反映函数的所有外部依赖,以避免出现逻辑错误。未来编译器可能会更加智能,能够自动创建和管理依赖项数组。

相关文章:

react钩子函数用法(useCallback、useMemo)

useMemo import { useMemo } from react; function MyComponent({ a, b }) { const memoizedValue useMemo(() > { // 进行一些昂贵的计算 return a b; }, [a, b]); // 当 a 或 b 发生变化时&#xff0c;memoizedValue 将被重新计算 return <div>{memoizedVa…...

linux配置Vnc Server给Windows连接

1. linux 安装必要vnc server和桌面组件 sudo apt -y install tightvncserversudo apt install xfce4 xfce4-goodies2. linux 配置vncserver密码 #bash vncserver参考: https://cn.linux-console.net/?p21846#google_vignette 3. 将启动桌面命令写入.vnc/xstartup # .vnc/x…...

Android中的KeyEvent详解

介绍 在Android中&#xff0c;KeyEvent 是用来表示按键事件的类&#xff0c;可根据对应的事件来处理按键输入&#xff0c;具体包含了关于按键事件的信息&#xff0c;例如按键的代码、动作&#xff08;按下或释放&#xff09;以及事件的时间戳&#xff0c;KeyEvent 对象通常在用…...

移植案例与原理 - HDF驱动框架-驱动配置(2)

1.2.7 节点复制 节点复制可以实现在节点定义时从另一个节点先复制内容&#xff0c;用于定义内容相似的节点。语法如下&#xff0c;表示在定义"node"节点时将另一个节点"source_node"的属性复制过来。 node : source_node示例如下&#xff0c;编译后bar节点…...

年终奖发放没几天,提离职领导指责我不厚道,我该怎么办?

“年终奖都发了&#xff0c;你还跳槽&#xff1f;太不厚道了吧&#xff01;” “拿完年终奖就走人&#xff0c;这不是典型的‘骑驴找马’吗&#xff1f;” 每到岁末年初&#xff0c;关于“拿到年终奖后是否应该立即辞职”的话题总会引发热议。支持者认为&#xff0c;这是个人…...

多处理系统结构

目录 统一内存访问&#xff08;UMA&#xff09;多处理器系统结构 优点 缺点 应用场景 UMA 结构的架构示例 解决方案和改进 非统一内存访问&#xff08;NUMA&#xff09;多处理系统结构 概述 NUMA的优点 NUMA的缺点 NUMA系统的工作原理 NUMA优化策略 结论 现代计算…...

创建进程的常用方式

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在Python中有多个模块可以创建进程&#xff0c;比较常用的有os.fork()函数、multiprocessing模块和Pool进程池。由于os.fork()函数只适用于Unix/Linu…...

李宏毅2023机器学习作业HW06解析和代码分享

ML2023Spring - HW6 相关信息&#xff1a; 课程主页 课程视频 Sample code HW06 视频 HW06 PDF 个人完整代码分享: GitHub | Gitee | GitCode P.S. HW06 是在 Judgeboi 上提交的&#xff0c;出于学习目的这里会自定义两个度量的函数&#xff0c;不用深究&#xff0c;遵循 Sugge…...

专业技能篇--算法

文章目录 前言经典算法思想总结一、贪心算法二、动态规划三、回溯算法四、分治算法 前言 这篇简单理解一些常见的算法。如果面试的时候问到相关的算法&#xff0c;能够应付一二。 经典算法思想总结 一、贪心算法 思想&#xff1a;贪心算法是一种在每一步选择中都采取在当前状…...

Vue中CSS动态样式绑定

Vue中CSS动态样式绑定与注意事项_vue css动态绑定-CSDN博客 在 Vue 中&#xff0c;你不能直接在 CSS 中直接绑定 data 中的数据&#xff0c;因为 CSS 不是响应式的。但是&#xff0c;有几种方法可以实现根据 Vue 实例中的数据来动态地改变样式&#xff1a; 内联样式绑定&…...

【漏洞复现】契约锁电子签章平台 add 远程命令执行漏洞(XVE-2023-23720)

0x01 产品简介 契约锁电子签章平台是上海亘岩网络科技有限公司推出的一套数字签章解决方案。契约锁为中大型组织提供“数字身份、电子签章、印章管控以及数据存证服务”于一体的数字可信基础解决方案,可无缝集成各类系统,让其具有电子化签署的能力,实现组织全程数字化办公。通…...

计算机专业是否仍是“万金油”?

身份角度一&#xff1a;一名曾经的计算机专业学生  随着高考的结束&#xff0c;我站在了人生的分岔路口&#xff0c;面临着大学专业的选择。在众多的选择中&#xff0c;计算机专业一直是我深思熟虑后的一个重要选项。然而&#xff0c;我并不清楚自己是否真的适合这个专业&…...

Spring 启动顺序

在 Spring 框架中&#xff0c;应用启动过程涉及多个步骤和组件的初始化。理解 Spring 启动顺序不仅有助于优化应用性能&#xff0c;还能帮助开发人员排查启动过程中可能出现的问题。本文将详细介绍 Spring 启动过程中的关键步骤和顺序。 1. Spring 启动过程概述 Spring 应用的…...

2024.06.19 刷题日记

41. 缺失的第一个正数 这个题目的通过率很低&#xff0c;是一道难题&#xff0c;类似于脑筋急转弯&#xff0c;确实不好想。实际上&#xff0c;对于一个长度为 N 的数组&#xff0c;其中没有出现的最小正整数只能在 [1,N1] 中。 这个结论并不好想&#xff0c;举个例子&#x…...

linux系统中,pwd获取当前路径,dirname获取上一层路径;不使用 ../获取上一层路径

在实际项目中&#xff0c;我们通常可以使用 pwd 来获取当前路径&#xff0c;但是如果需要获取上一层路径&#xff0c;有不想使用 …/ 的方式&#xff0c;可以尝试使用 dirname指令 测试shell脚本 #!/bin/bash# 获取当前路径 CURRENT_PATH$PWD echo "CURRENT_PATH$CURREN…...

DeepSpeed Monitoring Comm. Logging

Monitoring 支持多种后端&#xff1a;Tensorboard、WandB、Comet、CSV文件&#xff1b; TensorBoard例子&#xff1a; 自动监控&#xff1a;DeepSpeed自动把重要metric记录下来。只需在配置文件里enable相应的看板后端即可&#xff1a; {"tensorboard": {"enabl…...

关于INCA的几个实用功能

01--VUI窗口设计 这个可以按照自己的想法设计INCA观测或标定窗口 首先进入到INCA的环境内&#xff0c;点击实验→加载VUI窗口 选择空的窗口 打开后如下所示&#xff1a; 点击UI开发模式&#xff0c;如下图 如下&#xff1a; 添加标定量、观测量、示波器 窗口的大小需要在开发…...

Mamaba3--RNN、状态方程、勒让德多项式

Mamaba3–RNN、状态方程、勒让德多项式 一、简单回顾 在Mamba1和Mamba2中分别介绍了RNN和状态方程。 下面从两个图和两个公式出发&#xff0c;对RNN和状态方程做简单的回顾&#xff1a; R N N : s t W s t − 1 U x t &#xff1b; O t V s t RNN: s_t Ws_{t-1}Ux_t&…...

PLC模拟量和数字量到底有什么区别?

PLC模拟量和数字量的区别 在工业自动化领域&#xff0c;可编程逻辑控制器&#xff08;PLC&#xff09;是控制各种机械设备和生产过程的核心组件。PLC通过处理模拟量和数字量来实现对工业过程的精确控制。了解模拟量和数字量的区别对于设计高效、可靠的自动化系统至关重要。 1. …...

html中如何写一个提示框,css画一个提示框

在HTML中&#xff0c;提示框通常使用<div>元素来创建&#xff0c;然后使用CSS进行样式化。以下是一个示例&#xff0c;展示如何在HTML中写一个提示框&#xff0c;并使用CSS来设计其外观。 HTML 首先&#xff0c;创建一个HTML文件&#xff0c;其中包含一个提示框的结构&…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...