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

【前端】【React】useCallback的作用与使用场景总结

news 来源：原创 2025/9/16 1:57:18

一、`useCallback` 的作用与使用场景总结

useCallback 是 React 提供的一个 Hook，用于缓存函数的引用，避免因为组件重新渲染而导致函数地址发生变化。
它返回一个记忆（memoized）后的回调函数，只有当依赖项发生变化时才会重新生成该函数。

二、具体讲解与使用场景

（一）作用详解

(1) 避免函数在每次渲染时都重新创建
- React 函数组件每次渲染都会重新定义所有函数，可能会导致不必要的渲染或性能浪费。
(2) 与子组件配合 React.memo 使用，避免子组件不必要的渲染
- 如果 props 中有一个函数，每次渲染都会创建新函数引用，即使函数体一样，也会导致子组件更新。

（二）使用场景

(1) 传递函数给使用 React.memo 的子组件时，避免子组件重复渲染。
(2) 用于依赖函数的 useEffect、useMemo，如果不缓存函数会导致无限循环或性能问题。
(3) 用于性能优化较敏感的场景，避免重复创建函数。

三、代码示例

（一）未使用 `useCallback` 导致子组件重复渲染

import React, { useState } from 'react';const Child = React.memo(({ onClick }) => {console.log("Child Rendered");return <button onClick={onClick}>Click Me</button>;
});const Parent = () => {const [count, setCount] = useState(0);const handleClick = () => {console.log("Clicked");};return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Add</button><Child onClick={handleClick} /></div>);
};

每次点击“Add”，Parent 组件会重新渲染，handleClick 是新函数，导致 Child 被重新渲染。

（二）使用 `useCallback` 缓存函数，优化渲染

import React, { useState, useCallback } from 'react';const Child = React.memo(({ onClick }) => {console.log("Child Rendered");return <button onClick={onClick}>Click Me</button>;
});const Parent = () => {const [count, setCount] = useState(0);const handleClick = useCallback(() => {console.log("Clicked");}, []);  // 空数组表示 handleClick 永远不会变return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Add</button><Child onClick={handleClick} /></div>);
};

此时点击“Add”不会触发 Child 重新渲染，提升性能。

四、小结

useCallback(fn, deps) 等价于 useMemo(() => fn, deps)
用于性能优化，不是所有场景都需要用
优先考虑组件中是否存在性能瓶颈，再考虑是否引入 useCallback

【前端】【React】useCallback的作用与使用场景总结

一、useCallback 的作用与使用场景总结 useCallback 是 React 提供的一个 Hook，用于缓存函数的引用，避免因为组件重新渲染而导致函数地址发生变化。它返回一个记忆（memoized）后的回调函数，只有当依赖项发生变化时才会…...

编程日记 2025/9/16 1:57:18

什么是 React Router？如何使用？

React Router 详解 1. 引言在现代 web 开发中，单页面应用（SPA）越来越流行，React 是构建 SPA 的热门库之一。React Router 是一个标准的路由库，专为 React 应用设计，允许开发者在应用中实现动态路由和 UR…...

编程日记 2025/9/16 4:18:32

jQuery 插件

在现代Web开发中，jQuery以其简洁的语法和强大的功能成为了前端开发者们喜爱的工具之一。为了进一步扩展jQuery的功能，社区贡献了大量的插件，使得开发者能够更加高效地实现各种复杂的交互效果和功能。本文将介绍什么是jQuery插件、如何编写自己…...

编程日记 2025/9/15 1:37:30

未来杭州：科技与茶香交织的生态诗篇

故事背景故事发生在中国浙江杭州，融合智能科技与传统茶文化，描绘未来城市中人与自然共生的诗意画卷。通过六个充满未来感的生态场景，展现科技如何重塑龙井茶园、古运河、西湖等经典地标，编织出一曲科技与人文共鸣的生态交响诗。 …...

编程日记 2025/9/11 7:04:22

微服务多模块构建feign项目过程与一些报错（2025详细版）

目录 1.eureka-server的注意事项 2.eureka-feign的注意事项 3.多模块构建feign项目过程 3.1创建父项目 3.2创建子项目eureka-server 3.3创建子项目eureka-provider 3.4创建子项目eureka-feign 3.5运行给个点赞谢谢 1.eureka-server的注意事项 eureka-server的yml文件…...

编程日记 2025/9/11 11:32:22

AWS云安全实践：基于CISA关键措施的检测与实施指南

1. 引言随着越来越多的组织将其基础设施迁移到云端，确保AWS环境的安全变得至关重要。美国网络安全与基础设施安全局(CISA)提出的关键措施为我们提供了一个可靠的框架。本文将探讨如何在AWS环境中实施这些措施，特别关注检测类别和可实施的关键措施。 2. AWS云安全中的CISA关…...

编程日记 2025/9/11 3:08:09

超越肉眼所见：一种利用视网膜光学相干断层扫描血管成像（OCTA）图像进行早期痴呆检测的关联模型|文献速递-深度学习医疗AI最新文献

Title 题目 Beyond the eye: A relational model for early dementia detection using retinal OCTA images 超越肉眼所见：一种利用视网膜光学相干断层扫描血管成像（OCTA）图像进行早期痴呆检测的关联模型 01 文献速递介绍阿尔茨海默病&…...

编程日记 2025/9/13 15:06:02

终端使用python出现segmentation fault (core dumped)的一种解法

有时候在终端输入python，希望交互式运行命令或者通过pdb调试，但是出现如下错误： [1] 7476 segmentation fault (core dumped) python 但是单独运行python xxx.py 或者 python -c "xxx" 又是可以的！ 经过与AI大模…...

编程日记 2025/9/12 0:38:30

分布式id生成算法（雪花算法 VS 步长id生成）

分布式ID生成方案详解：雪花算法 vs 步长ID 一、核心需求全局唯一性：集群中绝不重复有序性：有利于数据库索引性能高可用：每秒至少生成数万ID低延迟：生成耗时<1ms二、雪花算法（Snowflake） 1. 数据结构（64位） 0 | 0000000000 0000000000 0000000000 0000000000 0 |…...

编程日记 2025/9/14 6:41:43

h265为什么没有大范围应用

H.265（也称为 HEVC，High Efficiency Video Coding）是一种视频压缩标准，旨在提供比 H.264（AVC）更高的压缩效率。然而，尽管 H.265 在技术上具有许多优势，但其大范围应用受到了以下几个…...

编程日记 2025/9/12 0:17:49

Linux图形化界面

一、Linux图形化界面桌面对于Linux系统来说，只是一个应用程序，所以是可以移植的。 Linaro公司针对于半导体厂商推出的芯片，开发了ARM开发工具、Linux内核以及Linux发行版（包括Android及Ubuntu）。所以无需自己移植&am…...

编程日记 2025/9/12 0:14:34

LangChain-检索系统 (Retrieval)

检索系统 (Retrieval) 检索系统是LangChain的核心组件之一，它提供了从各种数据源获取相关信息的能力，是构建知识增强型应用的基础。本文档详细介绍LangChain检索系统的组件、工作原理和最佳实践。概述检索系统解决了大型语言模型知识有限和过时的问…...

编程日记 2025/9/10 14:09:47

【Linux】进程概念

目录一、进程概念 （一）什么是进程 （二）描述进程-PCB 二、fork创建进程 （一）bash概念 （二）如何创建子进程一、进程概念 （一）什么是进程结论&#x…...

编程日记 2025/9/8 16:37:28

【JavaScript】十七、事件委托（冒泡阶段的利用）

文章目录 1、事件委托2、tab栏切换案例：使用事件委托优化3、阻止元素默认行为 1、事件委托以送快递为例，某班有20名同学，每人有一个快递，快递员可以一个个送，需要送40次，很繁琐，换个方式&…...

编程日记 2025/8/22 17:59:01

Android InstalldNativeService::getAppSize源码分析

InstalldNativeService::getAppSize 是 Android 系统中用于计算应用程序存储空间的核心方法，其逻辑可分为以下几个关键模块（结合代码和上下文分析）： 一、基础校验与初始化 1. 权限校验通过 ENFORCE_UID(AID_SYSTEM) 确…...

编程日记 2025/9/14 8:16:18

微信小程序跳

/** * 画布文本换行绘制 * canvasContext 画布实例 * text 要写入的文本 * x 初始x轴位置 * y 初始y轴位置 * ySpacing 换行后，每行直接的间隔 * maxWidth 此文本写入画布的最大宽度，超过此宽度就换行 * color 文本颜色 * size 文本字体大小 * align 文本…...

编程日记 2025/9/16 4:15:34

openlayers入门01 -- 环境配置和初始化地图

openlayers入门 openlayers开发环境配置 1.下载VSCode 官网地址：https://code.visualstudio.com/ 点击Download for Windows 2.安装汉化插件和openlayers插件搜索chinese，下载Chinese (Simplified) (简体中文) Language Pack 更改语言并重启搜…...

编程日记 2025/9/12 21:34:17

window实现多jdk共存、便捷切换

背景如今大模型技术流行，想要跟上发展就也得学一学，比如Spring-AI等框架，但这些AI相关的框架对jdk版本都有要求，一般都要不低于17。而在企业开发中，很多时候还使用着jdk8，如何重新安装17，则需…...

编程日记 2025/9/9 14:23:54

常见的 set 选项与空变量检查

在编写 Bash 脚本时，使用 set 命令中的一些选项可以帮助我们在脚本执行过程中及时捕获错误和潜在问题，避免脚本在出错时继续执行，提高脚本的可靠性和健壮性。 set -e：遇到错误就停 set -e 的作用是：一旦脚本中的某个…...

编程日记 2025/9/13 19:20:55

JS 创建对象方法

创建对象的三种方法 3 通过构造函数自定义构造函数构造函数快速定义多个对象自定义构造函数...

编程日记 2025/8/27 21:25:47

IMX6ULL2025年最新部署方案：最新的UBootLinux和Rootfs部署正点原子Alpha开发板指南

正点原子Alpha IMX6ULL开发板2025年最新部署方案：基于Ubuntu24.04平台开发，部署最新的UBoot/Linux和BusyBox Rootfs部署指南前言笔者实在绷不住比较旧的方案了，广义流行的方案是使用2016年发布的Uboot来引导Linux4.1.15，配…...

编程日记 2025/9/12 9:47:34

threeJs实现裸眼3D小狗

一、实现效果使用threeJs实现裸眼3D小狗，效果如下，其实如果将小狗换成建模小狗，效果更好，这个是模拟了一只小狗。二、实现代码代码如下： <!DOCTYPE html> <html> <head><title>星空小狗…...

编程日记 2025/9/15 4:45:54

ZYNQ笔记（二）：MIO 、EMIO

版本：Vivado2020.2（Vitis） 任务：使用GPIO MIO 和 EMIO 实现按键 KEY 控制 LED（ 两个PL端LED、两个PS端KEY） 目录一、MIO 、EMIO 介绍二、硬件设计三、软件设计四、效果一、MIO 、EMIO 介绍 …...

编程日记 2025/9/10 6:53:02

本文记录Windows下使用Cygwin编译安装Acise的流程。零、环境操作系统Windows11Visual Studio CodeVisual Studio Code 1.92.0Cygwin 一、工具及依赖 1.1 Visual Studio Code 下载并安装Visual Studio Code, 同时安装以下插件， Task Explorer Output Colorizer …...

编程日记 2025/9/4 12:59:22

ubuntu22.04 安装-ODBC驱动-SQLserver

1.ISO下载中科大 Index of /ubuntu-releases/http://mirrors.ustc.edu.cn/ubuntu-releases/ 2.VMware Workstation创建虚拟机 3.更换清华源或者中科大的源 Ubuntu 24.04更换清华源_哔哩哔哩_bilibili 中科大镜像源： Ubuntu - USTC Mirror Help 清华源 ubuntu | 镜…...

编程日记 2025/8/24 18:11:19

[数据结构]Trie字典树

GPT的介绍 🧠 一句话总结： 字典树是一种专门用来存很多字符串的“超级前缀树”，查找某个字符串或前缀的时候，特别快！ ✍️ 举个生活例子（类比）： 你想做一个词典（Dictio…...

编程日记 2025/9/4 20:44:23

【网络安全】Linux 命令大全

未经许可，不得转载。文章目录前言正文文件管理文档编辑文件传输磁盘管理磁盘维护网络通讯系统管理系统设置备份压缩设备管理其它命令前言在网络安全工作中，熟练掌握 Linux 系统中的常用命令对于日常运维、日志分析和安全排查等任务至关重要。以下是常用命令的整理汇总，…...

编程日记 2025/9/9 14:49:26

Xcode警报“Ignoring duplicate libraries: ‘-lc++’” 警报

目录前言一、问题出现的原因二、解决步骤 1. 检查构建设置中的链接器标志 2. 检查依赖中的重复库 3. 清除派生数据： 4. 检查冲突的 C 库 5. 更新 CocoaPods： 前言有时候我们会看到Xcode警报：Ignoring duplicate libraries: ‘-lc…...

编程日记 2025/8/30 8:35:04

WebStorm中使用live-server插件

文章目录 1. 前提条件1.1 已安装Node1.1.1 淘宝的镜像1.2 安装live-server1.3 安装WebStorm2. Windows配置hosts3. WebStorm配置live-server3.1 WebStorm创建3.2 启动 live-server1. 前提条件 1.1 已安装Node Windows PowerShell 版权所有（C） Microsoft Corporation。保留所…...

编程日记 2025/9/8 0:49:34

Python 中使用单例模式

有这么一种场景，Web服务中有一个全局资源池，在需要使用的地方就自然而言引用该全局资源池即可，此时可以将该资源池以单例模式实现。随后，需要为某一特殊业务场景专门准备一个全局资源池，于是额外复制一份代码新建了一个…...

编程日记 2025/9/9 4:11:33

【基于LangChain的千问大模型工具调用】 Function CallingTool Calling简易示例

目录示例代码运行结果功能：根据用户输入自动选择数学计算/天气查询工具处理 "用户输入 → 意图分析 → 工具调用 → 结果返回" 库名解析：【langchain库名解析】-CSDN博客示例代码 # 模块1：依赖导入 from langc…...

编程日记 2025/9/9 0:46:31

银河麒麟服务器操作系统 V10 SP1 中玩转firewalld防火墙

Hey小伙伴们~👋 今天来聊聊怎么在银河麒麟服务器操作系统 V10 SP1 中玩转firewalld防火墙！🛡️ 这个强大的工具能帮你动态管理防火墙规则，还支持区域概念，让你的网络流量控制更灵活！🎉 &#x…...

编程日记 2025/9/15 11:56:59

信创服务器网络更稳了！链路聚合Bonding实战

原文链接：信创服务器网络更稳了！链路聚合Bonding实战 Hello，大家好啊！今天给大家带来一篇信创服务器操作系统上链路聚合（Bonding）配置实战的文章。链路聚合可以让两块网卡协同工作，提高服务器网…...

编程日记 2025/9/14 19:40:32

沐渥科技详解氮气柜操作指南

氮气柜是一种通过持续注入高纯度氮气，维持柜内惰性气体环境的设备，用于存储半导体晶圆或其他敏感元件，防止氧化、吸湿和污染。氮气柜操作指南是怎样的？下面沐渥小编给大家介绍一下。一、操作前准备 （1）安全…...

编程日记 2025/9/8 16:39:24

Netty之ChannelOutboundBuffer详解与实战

深入理解Netty的高低水位线机制及其应用实践在高性能网络编程中，Netty作为一个广泛使用的异步事件驱动的Java框架，其高效的流量控制机制对于系统的稳定性和性能至关重要。本文将深入探讨Netty中的高低水位线（High/Low Water Mark&#xff0…...

编程日记 2025/9/13 1:00:40

学习Python的优势体现在哪些方面？

文章目录前言易于学习和使用应用领域广泛丰富的开源库和社区支持跨平台兼容性职业发展前景好前言学习 Python 具有多方面的优势，这使得它成为当今最受欢迎的编程语言之一，以下为你详细介绍。易于学习和使用语法简洁易懂：Python 的语法…...

编程日记 2025/9/12 3:29:59

每天五分钟玩转深度学习PyTorch：搭建LSTM算法模型完成词性标注

本文重点本文通过LSTM算法模型来解决一个实际问题，也就是如何使用LSTM完成词性预测，下面我们搭建两个模型，一个是单词级别的，另外一个是字母级别的，大概的步骤就是，字母级别的LSTM将每个单词的字母作为输入，然后取最后一个时刻作为整个单词的表示，然后将文本中所有的…...

编程日记 2025/9/10 7:16:14

ANP协议深度解析：智能体网络协议的演进与革新

引言随着人工智能（AI）技术的快速发展，多智能体系统（Multi-Agent Systems, MAS）逐渐成为解决复杂问题的核心范式。然而，智能体之间的高效协作一直面临通信标准不统一、资源分配冲突、动态环境适应能力不足等…...

编程日记 2025/9/12 8:15:58

如何降低论文的AIGC检测率，减少“AI味”

要降低论文的AIGC（AI生成内容）检测率，减少“AI味”，关键在于让论文更自然、个性化，并符合学术规范。以下是具体方法： 1. 避免直接复制AI生成内容 ❌ 错误做法：直接使用DeepSeek等工具生成的整段…...

编程日记 2025/9/12 6:07:05

安装npm install element-plus --save报错

今天安装npm install element-plus --save报的错，豆包提示说是项目里使用的 eslint 版本是 7.32.0，而 vue/eslint-config-standard9.0.1 要求的 eslint 版本是 ^9.10.0。总之就是说版本不兼容报错： While resolving: vue3_project0.1.0 np…...

编程日记 2025/9/16 0:38:10

Python代码缩进统一规范

一、Python缩进的重要性：逻辑与可读性的桥梁 1. 语法规则的核心 Python与其他编程语言显著不同之处在于，它使用缩进来表示代码块的层次结构。不像C、Java等语言依靠大括号{}来明确函数体、循环体和条件语句的范围，Python完全依赖缩进来界定这些逻辑单元。例如，在一个if条…...

编程日记 2025/9/10 0:43:04

蓝桥杯基础数论入门

一.试除法首先我们要了解，所有大于1的自然数都能进行质因数分解。试除法作用如下： 质数判断试除法通过验证一个数是否能被小于它的数（一般是用2到用根号x）整除来判断其是否为质数。根据定义，质数只能被1和自身整除…...

编程日记 2025/9/12 20:16:48

一个插件，免费使用所有顶级大模型（Deepseek,Gpt,Grok,Gemini）

DeepSider是一款集成于浏览器侧边栏的AI对话工具，可免费使用所有顶级大模型包括GPT-4o，Grok3,Claude 3.5 Sonnet,Claude 3.7,Gemini 2.0，Deepseek R1满血版等以极简交互与超快的响应速度，完成AI搜索、实时问答、内容创作、翻译、…...

编程日记 2025/9/13 15:45:27

nginx入门,部署静态资源,反向代理,负载均衡使用

Nginx在linux上部署静态资源概念介绍 Nginx可以作为静态web服务器来部署静态资源。这里所说的静态资源是指在服务端真实存在，并且能够直接展示的一些文件，比如常见的html页面、css文件、js文件、图片、视频等资源。相对于Tomcat，Nginx处理…...

编程日记 2025/9/11 10:09:16

微信小程序中使用ECharts 并且动态设置数据

项目下载地址 GitHub 地址 https://github.com/ecomfe/echarts-for-weixin 将当前文件夹里的内容拷贝到项目中目录： json: {"usingComponents": {"ec-canvas": "../components/ec-canvas/ec-canvas"} }wxml： <ec…...

编程日记 2025/9/11 0:18:51

【愚公系列】《高效使用DeepSeek》064-跨文化谈判

🌟【技术大咖愚公搬代码：全栈专家的成长之路，你关注的宝藏博主在这里！】🌟 📣开发者圈持续输出高质量干货的"愚公精神"践行者——全网百万开发者都在追更的顶级技术博主！ 👉 江湖人称"愚公搬代码"，用七年如一日的精神深耕技术领域，以"…...

编程日记 2025/9/10 11:58:29

云原生环境Jvm内存占用持续高位问题排查

生产内存占用过高问题排查 1、问题描述一个tomcat应用，部署在云原生集群上，云原生监控显示内存占用率持续偏高，最大占用率、平均占用率都在90%多，但是倒没有OOM什么的。 2、问题复现凭借对此应用的了解，很快就在测…...

编程日记 2025/9/8 17:46:20

linux下io操作详细解析

在 Linux 系统下，IO（输入/输出）操作是程序与外部设备（如文件、网络等）交互的重要方式。Linux 提供了丰富的系统调用和库函数来支持各种 IO 操作。以下是对 Linux 下 IO 操作的详细解析，包括文件 IO、网络 I…...

编程日记 2025/9/13 8:42:09

【在校课堂笔记】Python 第 9 节课总结

- 第 91 篇 - Date: 2025 - 04 - 10 Author: 郑龙浩/仟墨【Python 在校课堂笔记】文章目录南山-第 9 节课字符串的各种操作一 string二 string 的索引1 索引介绍2 示例 - 索引使用三切片1 **结构**2 示例四回文数 – 切片的应用五对手机号进行脱敏处理六注意七读取字…...

编程日记 2025/9/11 20:00:29

AcWing 6099. 座位

原题目链接问题描述有 n 头奶牛（n ≥ 5），编号为 1 ∼ n，按照某种顺序围着一张圆桌坐成一圈。奶牛之间存在如下的朋友关系： 如果两头奶牛相邻，则它们是朋友；如果两头奶牛之间只隔着一头奶…...

编程日记 2025/9/13 17:48:35

一、useCallback 的作用与使用场景总结