useWhyDidYouUpdate详解
目录
API
Params
demo演示
源码
useWhyDidYouUpdate是ahooks库中的一个hook函数,用于帮助开发者排查是哪个属性改变导致了组件的 rerender。
API
type IProps = Record<string, any>;useWhyDidYouUpdate(componentName: string, props: IProps): void;
Params
| 参数 | 说明 | 类型 | 默认值 |
| componentName | 必填,观测组件的名称(ps:只是一个代号,自己能分别清楚即可) | string | - |
| props | 必填,需要观测的数据(当前组件 state 或者传入的 props 等可能导致 rerender 的数据) | object | - |
demo演示
import { useState } from 'react'
import { useWhyDidYouUpdate } from 'ahooks';function Counter(props) {useWhyDidYouUpdate('Counter', props);return <><div><span>{props.title}:</span><span>{props.count}</span></div></>
}function App() {const [count, setCount] = useState(0)return (<><button onClick={() => setCount(count + 1)}>+1</button><Counter title={'计数显示'} count={count} /></>)
}export default App


源码
type IProps = Record<string, unknown>;
/*** 什么导致了页面render自定义hooks** @param componentName 观测组件的名称* @param props 需要观测的数据(当前组件 state 或者传入的 props 等可能导致 rerender 的数据)*/
const useWhyDidYouUpdate = (componentName: any, props: any) => {// 创建一个ref对象let oldPropsRef = useRef<IProps>({});useEffect(() => {if (oldPropsRef.current) {// 遍历新旧props的所有keylet keys = Object.keys({ ...oldPropsRef.current, ...props });// 改变信息对象let changeMessageObj: IProps = {};keys.forEach((key) => {// 对比新旧props是否改变,改变及记录到changeMessageObjif (!Object.is(oldPropsRef.current[key], props[key])) {changeMessageObj[key] = {from: oldPropsRef?.current[key],to: props[key],};}});// 是否存在改变信息,存在及打印if (Object.keys(changeMessageObj).length) {console.log(componentName, changeMessageObj);}// 更新refoldPropsRef.current = props;}});
};
相关文章:
useWhyDidYouUpdate详解
目录 API Params demo演示 源码 useWhyDidYouUpdate是ahooks库中的一个hook函数,用于帮助开发者排查是哪个属性改变导致了组件的 rerender。 API type IProps Record<string, any>;useWhyDidYouUpdate(componentName: string, props: IProps): void; …...
c++入门——c++输入cin和输出cout的简单使用
c输入cin、输出cout 1 cin2 cout3 cin和cout说明 c在c语言的输入、输出函数的基础上进行了封装。 1 cin c可以理解为控制台,in可以理解为输入。 参考代码: void f(){int a;float b;double c;char d;cin>>a>>b>>c>>d;//这里和…...
Spring Cloud LoadBalancer (负载均衡)
目录 什么是负载均衡 服务端负载均衡 客户端负载均衡 Spring Cloud LoadBalancer快速上手 启动多个product-service实例 测试负载均衡 负载均衡策略 自定义负载均衡策略 什么是负载均衡 负载均衡(Load Balance,简称 LB) , 是高并发, 高可用系统必不可少的关…...
微服务-1 认识微服务
目录 1 认识微服务 1.1 单体架构 1.2 微服务 1.3 SpringCloud 2 服务拆分原则 2.1 什么时候拆 2.2 怎么拆 2.3 服务调用 3. 服务注册与发现 3.1 注册中心原理 3.2 Nacos注册中心 3.3 服务注册 3.3.1 添加依赖 3.3.2 配置Nacos 3.3.3 启动服务实例 …...
基于51单片机的交通灯带拐弯proteus仿真
地址: https://pan.baidu.com/s/1cgqRHMHp9VJet4vs5LiG5A 提取码:1234 仿真图: 芯片/模块的特点: AT89C52/AT89C51简介: AT89C52/AT89C51是一款经典的8位单片机,是意法半导体(STMicroelectro…...
1229java面经
1,Java中synchronized关键字是否是可重入的? 可重入的定义 可重入是指当一个线程已经获取了某个对象的锁,在该锁没有释放的情况下,如果这个线程再次请求获取这个对象的锁,是可以成功获取的,而不会出现自己把自己锁死的情况。简单…...
MySQL中查看表结构
1. 使用 DESCRIBE 或 DESC 命令 DESCRIBE(或其简写 DESC)是最简单和最直接的方法,可以显示表的列信息。 语法: DESCRIBE table_name; -- 或者 DESC table_name;示例: 假设有一个名为 employees 的表,可以…...
python利用selenium实现大麦网抢票
大麦网(damai.cn)是中国领先的现场娱乐票务平台,涵盖演唱会、音乐会、话剧、歌剧、体育赛事等多种门票销售。由于其平台上经常会有热门演出,抢票成为许多用户关注的焦点。然而,由于票务资源的有限性,以及大…...
FME教程:一键批量调换图斑X、Y坐标,解决因为坐标弄反了,导致GIS弹窗提示“范围不一致”警告问题
目录 一、实现效果 二、实现过程 1.读取数据 2.提取坐标 3.调换图斑的X、Y坐标 4.输出成果 5.模板的使用 三、总结 在工作中有时候会出现因为失误导致图斑的X、Y坐标弄反,在GIS中打开是会提示“范围不一致”警告的弹窗警告,如果重做工作量非常大…...
OpenCV-Python实战(4)——图像处理基础知识
一、坐标 在 OpenCV 中图像左上角坐标为(0,0),竖直向下为 Y(height) ;水平向右为 X(width)。 二、生成图像 2.1 灰度图像 img np.zeros((h,w), dtype np.uint8) i…...
音视频入门基础:MPEG2-PS专题(1)——MPEG2-PS官方文档下载
一、引言 MPEG2-PS(又称PS,Program Stream,程序流,节目流)是一种多路复用数字音频、视频等的封装容器。MPEG2-PS将一个或多个分组但有共同的时间基准的基本数据流 (PES)合并成一个整体流。它是…...
Qt自定义步骤引导按钮
1. 步骤引导按钮 实际在开发项目过程中,由一些流程比较繁琐,为了给客户更好的交互体验,往往需要使用step1->step2这种引导对话框或者引导按钮来引导用户一步步进行设置;话不多说,先上效果 2. 实现原理 实现起来…...
贝叶斯神经网络(Bayesian Neural Network)
最近在研究贝叶斯神经网络,一些概念一直搞不清楚,这里整理一下相关内容,方便以后查阅。 贝叶斯神经网络(Bayesian Neural Network) 贝叶斯神经网络(Bayesian Neural Network)1. BNN 的核心思想2. BNN 的优化目标3. BNN 的结构与特点4. BNN 的训练过程5. BNN 的优缺点6. …...
Direct Preference Optimization: Your Language Model is Secretly a Reward Model
DPO直接偏好优化:你的语言模型实际上是一个奖励模型 前言知识储备 什么是用户偏好数据目的:用于指导模型行为,使其输出更符合特定用户或者用户群体期望和喜好的信息。 用户偏好数据通常反映了用户对特定内容、风格、观点或者互动方式的倾向。 用户偏好数据的收集通常涉及直…...
如何通过 Kafka 将数据导入 Elasticsearch
作者:来自 Elastic Andre Luiz 将 Apache Kafka 与 Elasticsearch 集成的分步指南,以便使用 Python、Docker Compose 和 Kafka Connect 实现高效的数据提取、索引和可视化。 在本文中,我们将展示如何将 Apache Kafka 与 Elasticsearch 集成以…...
嵌入式系统 第十二讲 块设备和驱动程序设计
• 块设备是Linux三大设备之一(另外两种是字符设备,网络设备),块 设备也是通过/dev下的文件系统节点访问。 • 块设备的数据存储单位是块,块的大小通常为512B至32KB不等。 • 块设备每次能传输一个或多个块,…...
攻防世界web第六题upload
这是题目,可以看出是个上传文件的题目,考虑文件上传漏洞,先随便上传一个文件试试,要求上传的是图片。 可以看到上传成功。 考虑用一句话木马解决,构造文件并修改后缀为jpg,然后上传。 <?php eval($_POST[attack])…...
人工智能-Python网络编程-HTTP
用Python创建自己的HTTP服务器 方案一 HTTP-Python官方 python -m http.server 80 方案二 HTTP-概念版 import socketIPV4_ADDR 192.168.124.7 IPV4_PORT 8888# TCP 服务端程序必须绑定端口号,否则客户端找不到这个 TCP 服务端程序 class ServerSocket(obje…...
探索仓颉编程语言:功能、实战与展望
目录 引言 一.使用体验 二.功能剖析 1.丰富的数据类型与控制结构 2.强大的编程范式支持 3.标准库与模块系统 4.并发编程能力 三.实战案例 1.项目背景与目标 2.具体实现步骤 (1).导入必要的模块 (2).发送 HTTP 请求获取网页内容 (3).解析 HTML 页面提取文章信息 (…...
Unity-Editor扩展显示文件夹大小修复版 FileCapacity.cs
实战中是这样的,大项目, 容易定位美术大资产 (原版的代码有问题,每次点运行都会卡顿,大项目20S) //但其实获整个项目内容,1G都没有,有够省的(10年前的中型项目,一直有出DLC) using System; using System.Collections; using System.Collections.Generic; using Sy…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明:这是一个机器学习实战项目(附带数据代码文档),如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下,风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
STM32HAL库USART源代码解析及应用
STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...
【 java 虚拟机知识 第一篇 】
目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...
Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「storms…...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...
Python 高级应用10:在python 大型项目中 FastAPI 和 Django 的相互配合
无论是python,或者java 的大型项目中,都会涉及到 自身平台微服务之间的相互调用,以及和第三发平台的 接口对接,那在python 中是怎么实现的呢? 在 Python Web 开发中,FastAPI 和 Django 是两个重要但定位不…...
Python环境安装与虚拟环境配置详解
本文档旨在为Python开发者提供一站式的环境安装与虚拟环境配置指南,适用于Windows、macOS和Linux系统。无论你是初学者还是有经验的开发者,都能在此找到适合自己的环境搭建方法和常见问题的解决方案。 快速开始 一分钟快速安装与虚拟环境配置 # macOS/…...
深入理解 React 样式方案
React 的样式方案较多,在应用开发初期,开发者需要根据项目业务具体情况选择对应样式方案。React 样式方案主要有: 1. 内联样式 2. module css 3. css in js 4. tailwind css 这些方案中,均有各自的优势和缺点。 1. 方案优劣势 1. 内联样式: 简单直观,适合动态样式和…...
