React@16.x(32)useDebugValue

目录

  • 1,介绍
  • 2,作用

1,介绍

从一个例子开始:

export default function App() {const [n, setN] = useState(0);const refH1 = useRef();useEffect(() => {console.log("父组件");});return <h1 ref={refH1}>{n}</h1>;
}

使用了3个 HOOK,会在浏览器插件中会按顺序显示在“表格”中:

在这里插入图片描述

但如果使用了自定义HOOK,比如:

function useTest() {const [arr, setArr] = useState([]);useEffect(() => {console.log("自定义hook");});return arr;
}export default function App() {const [n, setN] = useState(0);const refH1 = useRef();useEffect(() => {console.log("父组件");});useTest();return <h1 ref={refH1}>{n}</h1>;
}

自定义HOOK默认展示为空:

在这里插入图片描述

打开自定义HOOK,才能看到它使用的其他HOOK函数:

在这里插入图片描述

2,作用

useDebugValue 的作用,就是为了搭配 React 的浏览器插件,来调试自定义HOOK。

它会在浏览器插件中,给自定义HOOK展示一个自定义的值。比如:

function useTest() {const [arr, setArr] = useState([]);useEffect(() => {console.log("自定义hook");});useDebugValue(123);return arr;
}

在这里插入图片描述

一般来说,几乎用不到。只是当一些通用的自定义HOOK使用次数较多时,方便定位问题。


以上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/29147.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 imu_utils 、Kalibr 工具进行IMU和相机内外参外参标定

文章目录 一、问题描述二、imu_utils 工具的使用1. 安装1.1 下载与编译1.2 编译bug解决 2. 标定 IMU2.1 imu bag包录制2.1.1 imu 数据格式2.1.2 imu 数据录制 2.2 imu 标定 三、Kalibr 工具的使用1. 安装1.1 下载与编译1.2 问题解决 一、问题描述 vins系列安装完成后&#xff…

首页IP代理科普 住宅IP与普通IP的区别

在互联网连接中&#xff0c;IP地址是识别每个网络节点的关键。在众多类型的IP地址中&#xff0c;住宅IP和普通IP是两种常见的分类。本文将深入探讨住宅IP与普通IP之间的主要区别。 一、定义与来源 住宅IP指的是由互联网服务提供商&#xff08;ISP&#xff09;直接分配给家庭或…

EasyRecovery电脑数据恢复软件2024数据守护神#误删文件神器#硬盘恢复利器#数据丢失救星

&#x1f310; 你是否曾经因为误删文件、硬盘损坏等原因&#xff0c;失去了重要的数据&#xff1f;别担心&#xff0c;EasyRecovery电脑数据恢复软件是你的救星&#xff01;它能够帮你找回丢失的文件&#xff0c;让你的数据重新焕发生机。 &#x1f50d; EasyRecovery软件的核…

有关健身的俄语表达,柯桥零基础俄语培训

фитнес 健身 тренер 教练 абонемент 会员卡 аэробика 有氧运动 анаэробика 无氧运动 плавание 游泳 пробежка / бег трусцой 慢跑 беговая дорожка 跑步机 йога 瑜伽 коври…

redis击穿问题使用锁实现方案

解决Redis缓存击穿问题的一种常见方法是使用互斥锁。以下是一个使用Java编写的简单示例&#xff0c;展示了如何利用Redis的SET命令加上NX&#xff08;仅在键不存在时设置&#xff09;和EX&#xff08;设置键的过期时间&#xff09;选项来实现分布式锁&#xff0c;以防止缓存击穿…

MCU嵌入式AI开发笔记-视频笔记同步更新

MCU嵌入式AI开发笔记 抖音B站等站点笔记视频同步更新 01嵌入式AI大的方向 STM32跑神经网络 http://news.eeworld.com.cn/mp/EEWorld/a134877.jspx 为什么可以在STM32上面跑神经网络?简而言之就是使用STM32CubeMX中的X-Cube-AI扩展包将当前比较热门的AI框架进行C代码的转化,…

安卓开发serizeable和parcelble的区别

在Android开发中&#xff0c;Serializable和Parcelable是两种常见的用于对象序列化的接口。它们的主要区别在于性能、使用的复杂性和适用场景。以下是它们的详细比较&#xff1a; 1. Serializable Serializable是Java标准库中的一个接口&#xff0c;用于将对象序列化为字节流…

持续学习的综述: 理论、方法与应用

摘要 为了应对现实世界的动态&#xff0c;智能系统需要在其整个生命周期中增量地获取、更新、积累和利用知识。这种能力被称为持续学习&#xff0c;为人工智能系统自适应发展提供了基础。从一般意义上讲&#xff0c;持续学习明显受到灾难性遗忘的限制&#xff0c;在这种情况下…

【Linux硬盘数据读取】WIN10访问linux分区解决方案:ext2fsd

<div id"content_views" class"htmledit_views" style"user-select: auto;"><p>尝试ext2explore、Paragon ExtFS都不好用&#xff0c;强烈安利ext2fsd&#xff0c;可读写&#xff0c;很强大</p> 转自&#xff1a;https://blog…

集群down机的应急和恢复测试(非重做备机)

1. 集群的两台服务器的状态 实例 正常情况主备 ip 端口 node1 主机 192.168.6.6 9088 node2 备机 192.168.6.7 9088 2. 测试的步骤 down掉node1观察node2的状态在node2未自动切换的时候手动将node2调整为单机状态&#xff0c;模拟紧急使用模拟不紧急时&#xff0…

C++之模板(一)

1、为什么需要模板 将具有相同逻辑的一段代码提供一份模板&#xff0c;当我们需要处理不同类型的时候&#xff0c;可以通过数据类型当作参数来传递&#xff0c;从而实例化出对应类型的处理版本。 2、模板的定义 也是一种静态多态。 3、模板的分类 4、函数模板 5、函数模板的使…

-------------------------面试散文-----------------------------------

问题1&#xff1a;vue中动态引入图片&#xff0c;为什么使用require&#xff1f; 回答&#xff1a;因为动态添加的src 编译过后的文件地址和被编译过后的资源文件地址不一致&#xff0c;从而导致无法访问题 而使用require 返回的就是资源文件被编译后的文件地址&#xff0c;从…

Aeron:Aeron Agent

Aeron Agent 是一个 Java 代理&#xff0c;用于提供 Aeron、Aeron Archive 和 Aeron Cluster 中发生的运行时低级日志信息。这些日志语句包括从高级管理员事件到大容量数据帧事件。 在调试 Archive 和 Cluster 问题时&#xff0c;Aeron Agent 的日志数据尤其有用。 一、Availab…

本地无法连接linux上的MariaDB数据库

问题&#xff1a;本地用DBeaver无法连接服务器上的MariaDB数据库 &#xff1f; 测试1&#xff1a;在cmd中ping 服务器IP&#xff0c;看是否能ping通&#xff0c;能ping通&#xff0c;没有问题 测试2&#xff1a;在cmd中telnet 服务器IP 端口&#xff0c;看是否能访问&#xf…

常见的Redis使用问题及解决方案

目录 1. 缓存穿透 1.1 解决方案 2. 缓存击穿 2.1 解决方案 3. 缓存雪崩 3.1 概念图及问题描述 ​编辑3.2 解决方案 4. 分布式锁 4.1 概念 4.2 基于redis来实现分布式锁 4.3 用idea来操作一遍redis分布式锁 4.4 分布式上锁的情况下&#xff0c;锁释放了服务器b中的锁…

JAVA学习笔记DAY8——Spring_AOC Spring-tx

文章目录 AOC概述Spring-aop 配置举例快速实现获取切点详细信息在增强方法中获取目标方法的信息返回结果异常信息 切点表示式语法统一切点管理环绕通知 Around切面增强优先级CGlib生效场景注解方式aop总结xml 方式配置aop Spring AOP 对获取Bean的影响Spring 声明性事务概念事务…

多态深度剖析

前言 继承是多态的基础&#xff0c; 如果对于继承的知识还不够了解&#xff0c; 可以去阅读上一篇文章 继承深度剖析 基本概念与定义 概念&#xff1a; 通俗来说&#xff0c;就是多种形态。具体点就是去完成某个行为&#xff0c; 当不同的对象去完成时会产生出不同的状…

docker使用auth登录

配置config.json文件 vim ~/.docker/config.json 格式&#xff1a; {"auths":{"registry.digitalocean.com":{"auth":"xxx"}} }QA:配置不生效&#xff0c;去掉默认的一些其他配置&#xff0c;只保留auth部分 直接使用auth登录 docke…

淘宝商品信息一网打尽!深入探索item_get接口的高效应用

淘宝item_get接口技术详解 一、引言 淘宝的开放平台为开发者提供了丰富的API接口&#xff0c;其中item_get接口是用于获取淘宝商品详情的常用接口。通过这个接口&#xff0c;开发者可以获取到商品的标题、价格、描述、图片等关键信息&#xff0c;进而实现商品数据的抓取、分析…