useCallback()
官网直达:https://zh-hans.react.dev/reference/react/useCallback
点击按钮,子组件会重新渲染
import { memo, useState, useCallback } from 'react';const Child = (props) => {console.log('我是子组件!我在渲染呢!!!')return (<><div>我是子组件</div></>)
}const Parent = () => {console.log('我是父组件!我在渲染呢!!!')const [p1, setP1] = useState(0)const p2 = 'hello';const p3 = 'world';return (<><div>我是父组件,p1:{p1}</div><button onClick={() => {setP1(p1 + 1);}}>点我p1加1</button><Child p2={p2} p3={p3} /></>)
}export default Parent;
点击父组件的按钮,子组件也跟着渲染
使用memo()包裹子组件,如下
import { memo, useState, useCallback } from 'react';const Child = memo((props) => {console.log('我是子组件!我在渲染呢!!!')return (<><div>我是子组件</div></>)
});const Parent = () => {console.log('我是父组件!我在渲染呢!!!')const [p1, setP1] = useState(0)const p2 = 'hello';const p3 = 'world';return (<><div>我是父组件,p1:{p1}</div><button onClick={() => {setP1(p1 + 1);}}>点我p1加1</button><Child p2={p2} p3={p3} /></>)
}export default Parent;
这样父组件里的state变换就不会再渲染子组件了
使用memo()后会对props进行浅比较,如果props没有变化,则不会重新渲染子组件
现在要给子组建要传入一个函数p4,如下
import { memo, useState, useCallback } from 'react';const Child = memo((props) => {console.log('我是子组件!我在渲染呢!!!')return (<><div>我是子组件</div></>)
});const Parent = () => {console.log('我是父组件!我在渲染呢!!!')const [p1, setP1] = useState(0)const p2 = 'hello';const p3 = 'world';const p4 = () => {console.log(p2, p3)}return (<><div>我是父组件,p1:{p1}</div><button onClick={() => {setP1(p1 + 1);}}>点我p1加1</button><Child p2={p2} p3={p3} p4={p4} /></>)
}export default Parent;
现在添加p4,发现父组件的state变换,子组件也会重新渲染
说明p4变化了
这是因为p4是一个函数,每次渲染都会生成一个新的函数,导致props变化,从而触发子组件重新渲染
所以需要使用useCallback来缓存函数,确保是同一个函数
useCallback接受两个参数,第一个参数是函数,第二个参数是依赖项数组如下
同时在包裹函数的时候要在useCallback里传入函数所依赖的参数,
否则useCallback会认为函数没有依赖项,每次都会生成一个新的函数
import { memo, useState, useCallback } from 'react';const Child = memo((props) => {console.log('我是子组件!我在渲染呢!!!')return (<><div>我是子组件</div></>)
});const Parent = () => {console.log('我是父组件!我在渲染呢!!!')const [p1, setP1] = useState(0)const p2 = 'hello';const p3 = 'world';const p4 = useCallback(() => {console.log(p2, p3)}, [p2, p3])return (<><div>我是父组件,p1:{p1}</div><button onClick={() => {setP1(p1 + 1);}}>点我p1加1</button><Child p2={p2} p3={p3} p4={p4} /></>)
}export default Parent;
哎,这样就可以了,子组建没有重新渲染
来看下回调函数执行完之后会是怎样的一个结果
子组建执行props.p4()
如果回调里面要把p1log出来,会出现什么问题
只有第一次才会输出,p1改变不执行
应为函数p4被缓存了起来
依赖项是p2和p3,p1改变,不会触发p4重新生成
添加依赖项p1,p4重新生成,p1改变,p4重新执行
import { memo, useState, useCallback } from 'react';const Child = memo((props) => {console.log('我是子组件!我在渲染呢!!!')props.p4()return (<><div>我是子组件</div></>)
});const Parent = () => {console.log('我是父组件!我在渲染呢!!!')const [p1, setP1] = useState(0)const p2 = 'hello';const p3 = 'world';const p4 = useCallback(() => {console.log(p2, p3, p1)}, [p2, p3, p1])return (<><div>我是父组件,p1:{p1}</div><button onClick={() => {setP1(p1 + 1);}}>点我p1加1</button><Child p2={p2} p3={p3} p4={p4} /></>)
}export default Parent;
相关文章:
useCallback()
官网直达:https://zh-hans.react.dev/reference/react/useCallback 点击按钮,子组件会重新渲染 import { memo, useState, useCallback } from react;const Child (props) > {console.log(我是子组件!我在渲染呢!࿰…...
Python面试题精选及解析--第二篇
在Python的面试中,除了基础语法和常用库的知识外,面试官往往还会通过一系列的问题来考察应聘者的逻辑思维、问题解决能力以及项目经验。以下是一些精心挑选的Python面试题及其详细答案,旨在帮助求职者更好地准备面试。 面试题一:…...
Linux操作常用问题
目录 Ubuntu操作问题vi编辑方向键键盘乱码回退键不能使用的问题解决问题的方法 Ubuntu操作问题 vi编辑方向键键盘乱码回退键不能使用的问题 编辑/etc/systemd/resolved.conf文件来修改DNS,结果编辑时键盘乱码,按下方向键会出现ABCD,且回退键…...
汽车发动机系统(ems)详细解析
汽车发动机系统EMS,即Engine-Management-System(发动机管理系统),是现代汽车电子控制技术的重要组成部分。以下是对汽车发动机系统EMS的详细解析,内容将涵盖其定义、工作原理、主要组成、功能特点、技术发展以及市场应…...
对比学习训练是如何进行的
对比学习(Contrastive Learning)是一种自监督学习的方法,旨在通过拉近相似样本的表示、拉远不相似样本的表示来学习特征表示。在训练过程中,模型并不依赖标签,而是通过样本之间的相似性进行学习。以下是对比学习的基本…...
React 生命周期 - useEffect 介绍
在 React 中,useEffect 钩子可以被看作是函数组件中的一种副作用管理工具,它的行为可以模拟类组件中的不同生命周期方法。useEffect 的执行时机取决于其依赖项数组(第二个参数)的设置方式。 根据 useEffect 的使用方式,…...
OpenCV-指纹识别
文章目录 一、意义二、代码实现1.计算匹配点2.获取编号3.获取姓名4.主函数 三、总结 一、意义 使用OpenCV进行指纹识别是一个复杂且挑战性的任务,因为指纹识别通常需要高精度的特征提取和匹配算法。虽然OpenCV提供了多种图像处理和计算机视觉的工具,但直…...
IPD的核心思想
IPD是一套领先的、成熟的研发管理思想、模式和方法。它是根据大量成功的研发管理实践总结出来的,并被大量实践证明的高效的产品研发模式。 那么,按照IPD来开展产品研发与产品管理工作,应该基于哪些基本思想或原则?市场导向、客户…...
如何在算家云搭建MVSEP-MDX23(音频分离)
一、MVSEP-MDX23简介 模型GitHub网址:MVSEP-MDX23-music-separation-model/README.md 在 main ZFTurbo/MVSEP-MDX23-音乐分离模型 GitHub 上 在音视频领域,把已经发布的混音歌曲或者音频文件逆向分离一直是世界性的课题。音波混合的物理特性导致在没有…...
常用的Java安全框架
Spring Security: 就像Java安全领域的“瑞士军刀”,功能全面且强大。 支持认证、授权、加密、会话管理等安全功能。 与Spring框架无缝集成,使用起来特别方便。 社区活跃,文档丰富,遇到问题容易找到解决方案。 Apach…...
使用 PHP 的 strip_tags函数保护您的应用安全
在现代 web 开发中,处理用户输入是一项常见的任务。然而,用户输入的内容往往包含 HTML 或 PHP 标签,这可能会导致安全漏洞,如跨站脚本攻击(XSS)。为了解决这个问题,PHP 提供了一个非常有用的函数…...
您的计算机已被Lockbit3.0勒索病毒感染?恢复您的数据的方法在这里!
导言 在数字化时代,互联网已成为我们生活、工作和学习中不可或缺的一部分。然而,随着网络技术的飞速发展,网络安全威胁也日益严峻。其中,勒索病毒作为一种极具破坏性的网络攻击手段,正逐渐成为企业和个人面临的重大挑…...
经典sql题(十二)UDTF之Explode炸裂函数
1. EXPLODE: UDTF 函数 1.1 功能说明 EXPLODE 函数 是Hive 中的一种用户定义的表函数(UDTF),用于将数组或映射结构中的复杂的数据结构每个元素拆分为单独的行。这在处理复杂数据时非常有用,尤其是在需要将嵌套数据“打散”以便更…...
【AIGC】ChatGPT提示词解析:如何打造个人IP、CSDN爆款技术文案与高效教案设计
博客主页: [小ᶻZ࿆] 本文专栏: AIGC | ChatGPT 文章目录 💯前言💯打造个人IP爆款文案提示词使用方法 💯CSDN爆款技术文案提示词使用方法 💯高效教案设计提示词使用方法 💯小结 💯前言 在这…...
【Ubuntu】Ubuntu常用命令
文章目录 网卡路由常用命令:编辑文件echo 权限设置gcc编译器: 重启网络服务 sudo service network-manager restart 网卡 #查看网卡信息 ip a #区分光网卡电网卡 sudo lshw -class network -businfo ifconfig ifconfig eth1 192.168.1.12/24 #重启网卡…...
架构设计笔记-5-软件工程基础知识-2
知识要点 构件组装是将库中的构件经适当修改后相互连接,或者将它们与当前开发项目中的软件元素连接,最终构成新的目标软件。 构件组装技术大体可分为: 1. 基于功能的组装技术:基于功能的组装技术采用子程序调用和参数传递的方式将构件组装起来。它要求库中的构件以子程序…...
[网络]抓包工具介绍 tcpdump
一、tcpdump tcpdump是一款基于命令行的网络抓包工具,可以捕获并分析传输到和从网络接口流入和流出的数据包。 1.1 安装 tcpdump 通常已经预装在大多数 Linux 发行版中。如果没有安装,可以使用包管理器 进行安装。例如 Ubuntu,可以使用以下…...
基于STM32和FPGA的射频数据采集系统设计流程
一、项目概述 高速采集射频(RF)信号是一个关键的需求。本文旨在设计一种基于STM32和FPGA的射频数据采集系统,以实现对接收到的射频信号的高精度和高速度的处理。该系统适用于无线通信、信号分析、雷达系统等应用场景。 技术栈关键词&#x…...
自动变速箱系统(A/T)详细解析
自动变速箱系统(A/T),即Automatic Transmission,是一种能够在车辆行驶过程中自动完成换挡操作的传动系统。以下是对自动变速箱系统(A/T)的详细解析,内容涵盖其定义、工作原理、主要组成、类型、…...
【Kubernetes】常见面试题汇总(四十三)
目录 98. kube-apiserver 和 kube-scheduler 的作用是什么? 99.您对云控制器管理器了解多少? 特别说明: 题目 1-68 属于【Kubernetes】的常规概念题,即 “ 汇总(一)~(二十二)…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...
HarmonyOS运动开发:如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit(传感器服务)# 前言 在运动类应用中,运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据,如配速、距离、卡路里消耗等,用户可以更清晰…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...
安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板(STM32F103RBT6)通过I2C驱动ICM20948九轴传感器,实现姿态解算,并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化,适合嵌入式及物联网开发者。在基础驱动上新增…...
学习一下用鸿蒙DevEco Studio HarmonyOS5实现百度地图
在鸿蒙(HarmonyOS5)中集成百度地图,可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API,可以构建跨设备的定位、导航和地图展示功能。 1. 鸿蒙环境准备 开发工具:下载安装 De…...
Vue 3 + WebSocket 实战:公司通知实时推送功能详解
📢 Vue 3 WebSocket 实战:公司通知实时推送功能详解 📌 收藏 点赞 关注,项目中要用到推送功能时就不怕找不到了! 实时通知是企业系统中常见的功能,比如:管理员发布通知后,所有用户…...
Mac flutter环境搭建
一、下载flutter sdk 制作 Android 应用 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 1、查看mac电脑处理器选择sdk 2、解压 unzip ~/Downloads/flutter_macos_arm64_3.32.2-stable.zip \ -d ~/development/ 3、添加环境变量 命令行打开配置环境变量文件 ope…...
