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

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函数&#xff0c;用于帮助开发者排查是哪个属性改变导致了组件的 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可以理解为控制台&#xff0c;in可以理解为输入。 参考代码&#xff1a; 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&#xff0c;简称 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仿真

地址&#xff1a; https://pan.baidu.com/s/1cgqRHMHp9VJet4vs5LiG5A 提取码&#xff1a;1234 仿真图&#xff1a; 芯片/模块的特点&#xff1a; AT89C52/AT89C51简介&#xff1a; AT89C52/AT89C51是一款经典的8位单片机&#xff0c;是意法半导体&#xff08;STMicroelectro…...

1229java面经

1,Java中synchronized关键字是否是可重入的? 可重入的定义 可重入是指当一个线程已经获取了某个对象的锁&#xff0c;在该锁没有释放的情况下&#xff0c;如果这个线程再次请求获取这个对象的锁&#xff0c;是可以成功获取的&#xff0c;而不会出现自己把自己锁死的情况。简单…...

MySQL中查看表结构

1. 使用 DESCRIBE 或 DESC 命令 DESCRIBE&#xff08;或其简写 DESC&#xff09;是最简单和最直接的方法&#xff0c;可以显示表的列信息。 语法&#xff1a; DESCRIBE table_name; -- 或者 DESC table_name;示例&#xff1a; 假设有一个名为 employees 的表&#xff0c;可以…...

python利用selenium实现大麦网抢票

大麦网&#xff08;damai.cn&#xff09;是中国领先的现场娱乐票务平台&#xff0c;涵盖演唱会、音乐会、话剧、歌剧、体育赛事等多种门票销售。由于其平台上经常会有热门演出&#xff0c;抢票成为许多用户关注的焦点。然而&#xff0c;由于票务资源的有限性&#xff0c;以及大…...

FME教程:一键批量调换图斑X、Y坐标,解决因为坐标弄反了,导致GIS弹窗提示“范围不一致”警告问题

目录 一、实现效果 二、实现过程 1.读取数据 2.提取坐标 3.调换图斑的X、Y坐标 4.输出成果 5.模板的使用 三、总结 在工作中有时候会出现因为失误导致图斑的X、Y坐标弄反&#xff0c;在GIS中打开是会提示“范围不一致”警告的弹窗警告&#xff0c;如果重做工作量非常大…...

OpenCV-Python实战(4)——图像处理基础知识

一、坐标 在 OpenCV 中图像左上角坐标为&#xff08;0&#xff0c;0&#xff09;&#xff0c;竖直向下为 Y&#xff08;height&#xff09; &#xff1b;水平向右为 X&#xff08;width&#xff09;。 二、生成图像 2.1 灰度图像 img np.zeros((h,w), dtype np.uint8) i…...

音视频入门基础:MPEG2-PS专题(1)——MPEG2-PS官方文档下载

一、引言 MPEG2-PS&#xff08;又称PS&#xff0c;Program Stream&#xff0c;程序流&#xff0c;节目流&#xff09;是一种多路复用数字音频、视频等的封装容器。MPEG2-PS将一个或多个分组但有共同的时间基准的基本数据流 &#xff08;PES&#xff09;合并成一个整体流。它是…...

Qt自定义步骤引导按钮

1. 步骤引导按钮 实际在开发项目过程中&#xff0c;由一些流程比较繁琐&#xff0c;为了给客户更好的交互体验&#xff0c;往往需要使用step1->step2这种引导对话框或者引导按钮来引导用户一步步进行设置&#xff1b;话不多说&#xff0c;先上效果 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

作者&#xff1a;来自 Elastic Andre Luiz 将 Apache Kafka 与 Elasticsearch 集成的分步指南&#xff0c;以便使用 Python、Docker Compose 和 Kafka Connect 实现高效的数据提取、索引和可视化。 在本文中&#xff0c;我们将展示如何将 Apache Kafka 与 Elasticsearch 集成以…...

嵌入式系统 第十二讲 块设备和驱动程序设计

• 块设备是Linux三大设备之一&#xff08;另外两种是字符设备&#xff0c;网络设备&#xff09;&#xff0c;块 设备也是通过/dev下的文件系统节点访问。 • 块设备的数据存储单位是块&#xff0c;块的大小通常为512B至32KB不等。 • 块设备每次能传输一个或多个块&#xff0c…...

攻防世界web第六题upload

这是题目&#xff0c;可以看出是个上传文件的题目&#xff0c;考虑文件上传漏洞&#xff0c;先随便上传一个文件试试&#xff0c;要求上传的是图片。 可以看到上传成功。 考虑用一句话木马解决&#xff0c;构造文件并修改后缀为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 服务端程序必须绑定端口号&#xff0c;否则客户端找不到这个 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…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...