当前位置: 首页 > 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;其中包含一个提示框的结构&…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

医疗AI模型可解释性编程研究:基于SHAP、LIME与Anchor

1 医疗树模型与可解释人工智能基础 医疗领域的人工智能应用正迅速从理论研究转向临床实践,在这一过程中,模型可解释性已成为确保AI系统被医疗专业人员接受和信任的关键因素。基于树模型的集成算法(如RandomForest、XGBoost、LightGBM)因其卓越的预测性能和相对良好的解释性…...

ZYNQ学习记录FPGA(二)Verilog语言

一、Verilog简介 1.1 HDL&#xff08;Hardware Description language&#xff09; 在解释HDL之前&#xff0c;先来了解一下数字系统设计的流程&#xff1a;逻辑设计 -> 电路实现 -> 系统验证。 逻辑设计又称前端&#xff0c;在这个过程中就需要用到HDL&#xff0c;正文…...

npm安装electron下载太慢,导致报错

npm安装electron下载太慢&#xff0c;导致报错 背景 想学习electron框架做个桌面应用&#xff0c;卡在了安装依赖&#xff08;无语了&#xff09;。。。一开始以为node版本或者npm版本太低问题&#xff0c;调整版本后还是报错。偶尔执行install命令后&#xff0c;可以开始下载…...