React第二十二章(useDebugValue)

useDebugValue

useDebugValue 是一个专为开发者调试自定义 Hook 而设计的 React Hook。它允许你在 React 开发者工具中为自定义 Hook 添加自定义的调试值。

用法

const debugValue = useDebugValue(value)

参数说明

入参

  • value: 要在 React DevTools 中显示的值
  • formatter?: (可选) 格式化函数
    • 作用:自定义值的显示格式
    • 调用时机:仅在 React DevTools 打开时才会调用,可以进行复杂的格式化操作
    • 参数:接收 value 作为参数
    • 返回:返回格式化后的显示值

返回值

  • 无返回值(void)

获取 React DevTools

方式一:Chrome 商店安装

  1. 访问 React Developer Tools
  2. 点击"添加至 Chrome"即可安装

方式二:离线安装

  1. 在微信公众号(小满zs) 回复 React/React工具 获取安装包

在这里插入图片描述

离线安装步骤

  1. 打开 Chrome 浏览器,点击右上角三个点 → 更多工具 → 扩展程序
  2. 开启右上角的"开发者模式"
  3. 将下载的 .crx 文件直接拖拽到扩展程序页面
  4. 在弹出的确认框中点击"添加扩展程序"

实战案例:自定义 useCookie Hook

下面通过实现一个 useCookie Hook 来展示 useDebugValue 的实际应用。这个 Hook 提供了完整的 cookie 操作功能,并通过 useDebugValue 来增强调试体验。

import React, { useState, useDebugValue } from 'react';const useCookie = (name: string, initialValue: string = '') => {const getCookie = () => {const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]*)(;|$)`)) return match ? match[2] : initialValue}const [cookie, setCookie] = useState(getCookie())const updateCookie = (value: string, options?: any) => {document.cookie = `${name}=${value};${options}`setCookie(value)}const deleteCookie = () => {document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`setCookie(initialValue)}useDebugValue(cookie, (value) => {return `cookie: ${value}`})return [cookie, updateCookie, deleteCookie] as const
}const App: React.FC = () => {const [cookie, updateCookie, deleteCookie] = useCookie('key', 'value')return (<div><div>{cookie}</div><button onClick={() => { updateCookie('update-value') }}>设置cookie</button><button onClick={() => { deleteCookie() }}>删除cookie</button></div>);
}export default App;

Hook 功能说明

  1. getCookie: 获取指定名称的 cookie 值
  2. updateCookie: 更新或创建新的 cookie
  3. deleteCookie: 删除指定的 cookie

useDebugValue 的应用

在这个例子中,我们使用 useDebugValue 来显示当前 cookie 的值:

useDebugValue(cookie, (value) => `cookie: ${value}`)

调试效果展示

在 React DevTools 中的显示效果:

在这里插入图片描述

更新 cookie 后的显示效果:

在这里插入图片描述

使用建议

  1. 仅在自定义 Hook 中使用 useDebugValue
  2. 对于简单的值,可以省略 formatter 函数
  3. 当格式化值的计算比较昂贵时,建议使用 formatter 函数,因为它只在开发者工具打开时才会执行

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

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

相关文章

【漏洞分析】DDOS攻防分析

0x00 UDP攻击实例 2013年12月30日&#xff0c;网游界发生了一起“追杀”事件。事件的主角是PhantmL0rd&#xff08;这名字一看就是个玩家&#xff09;和黑客组织DERP Trolling。 PhantomL0rd&#xff0c;人称“鬼王”&#xff0c;本名James Varga&#xff0c;某专业游戏小组的…

【 PID 算法 】PID 算法基础

一、简介 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&#xff09;、Differential&#xff08;微分&#xff09;的缩写。也就是说&#xff0c;PID算法是结合这三种环节在一起的。粘一下百度百科中的东西吧。 顾名思义&#xff0c;…

PyTorch使用教程(1)—PyTorch简介

PyTorch是一个开源的深度学习框架&#xff0c;由Facebook人工智能研究院&#xff08;FAIR&#xff09;于2016年开发并发布&#xff0c;其主要特点包括自动微分功能和动态计算图的支持&#xff0c;使得模型建立更加灵活‌。官网网址&#xff1a;https://pytorch.org。以下是关于…

PyTorch框架——基于深度学习YOLOv5神经网络水果蔬菜检测识别系统

基于深度学习YOLOv5神经网络水果蔬菜检测识别系统&#xff0c;其能识别的水果蔬菜有15种&#xff0c;# 水果的种类 names: [黑葡萄, 绿葡萄, 樱桃, 西瓜, 龙眼, 香蕉, 芒果, 菠萝, 柚子, 草莓, 苹果, 柑橘, 火龙果, 梨子, 花生, 黄瓜, 土豆, 大蒜, 茄子, 白萝卜, 辣椒, 胡萝卜,…

Mac玩Steam游戏秘籍!

Mac玩Steam游戏秘籍&#xff01; 大家好&#xff01;最近有不少朋友在用MacBook玩Steam游戏时遇到不支持mac的问题。别担心&#xff0c;我来教你如何用第三方工具Crossover来畅玩这些不支持的游戏&#xff0c;简单又实用&#xff01; 第一步&#xff1a;下载Crossover 首先&…

【网络篇】IP知识

IPv4首部与IPv6首部 IPv4相对于IPv6的好处&#xff1a; 1.IPv6可自动配置&#xff0c;即使没有DHCP服务器也可以实现自动分配IP地址&#xff0c;实现即插即用。 2.IPv6包首部长度采用固定40字节&#xff0c;删除了选项字段&#xff0c;以及首部校验和&#xff0c;简化了首部…

我的年度总结

这一年的人生起伏&#xff1a;从曙光到低谷再到新的曙光 其实本来没打算做年度总结的&#xff0c;无聊打开了帅帅的视频&#xff0c;结合自己最近经历的&#xff0c;打算简单聊下。因为原本打算做的内容会是一篇比较丧、低能量者的呻吟。 实习生与创业公司的零到一 第一段工…

Vue脚手架开发 Vue2基础 VueRouter的基本使用 vue-router路由案例

vue-router路由 Vue脚手架开发&#xff0c;创建项目&#xff1a;https://blog.csdn.net/c_s_d_n_2009/article/details/144973766 Vue Router&#xff0c;Vue Router | Vue.js 的官方路由&#xff0c;Vue.js 的官方路由&#xff0c;为 Vue.js 提供富有表现力、可配置的、方便…

Windows远程桌面网关出现重大漏洞

微软披露了其Windows远程桌面网关&#xff08;RD Gateway&#xff09;中的一个重大漏洞&#xff0c;该漏洞可能允许攻击者利用竞争条件&#xff0c;导致拒绝服务&#xff08;DoS&#xff09;攻击。该漏洞被标识为CVE-2025-21225&#xff0c;已在2025年1月的补丁星期二更新中得到…

c语言----------内存管理

内存管理 目录 一。作用域1.1 局部变量1.2 静态(static)局部变量1.3 全局变量1.4 静态(static)全局变量1.5 extern全局变量声明1.6 全局函数和静态函数1.7 总结 二。内存布局2.1 内存分区2.2 存储类型总结2.3内存操作函数1) memset()2) memcpy()3) memmove()4) memcmp() 2.4 堆…

【2024年华为OD机试】 (C卷,100分)- 堆栈中的剩余数字(Java JS PythonC/C++)

一、问题描述 题目描述 向一个空栈中依次存入正整数&#xff0c;假设入栈元素 n(1<n<2^31-1)按顺序依次为 nx…n4、 n3、n2、 n1, 每当元素入栈时&#xff0c;如果 n1n2…ny(y 的范围[2,x]&#xff0c; 1<x<1000)&#xff0c;则 n1~ny 全部元素出栈&#xff0c;重…

Java安全—SPEL表达式XXESSTI模板注入JDBCMyBatis注入

前言 之前我们讲过SpringBoot中的MyBatis注入和模板注入的原理&#xff0c;那么今天我们就讲一下利用以及发现。 这里推荐两个专门研究java漏洞的靶场&#xff0c;本次也是根据这两个靶场来分析代码&#xff0c;两个靶场都是差不多的。 https://github.com/bewhale/JavaSec …

51单片机入门基础

目录 一、基础知识储备 &#xff08;一&#xff09;了解51单片机的基本概念 &#xff08;二&#xff09;掌握数字电路基础 &#xff08;三&#xff09;学习C语言编程基础 二、开发环境搭建 &#xff08;一&#xff09;硬件准备 &#xff08;二&#xff09;软件准备 三、…

基于Java的百度AOI数据解析与转换的实现方法

目录 前言 一、AOI数据结构简介 1、官网的实例接口 2、响应参数介绍 二、Java对AOI数据的解析 1、数据解析流程图 2、数据解析实现 3、AOI数据解析成果 三、总结 前言 在当今信息化社会&#xff0c;地理信息数据在城市规划、交通管理、商业选址等领域扮演着越来越重要的…

【WEB】网络传输中的信息安全 - 加密、签名、数字证书与HTTPS

文章目录 1. 概述2. 网络传输安全2.1.什么是中间人攻击2.2. 加密和签名2.2.1.加密算法2.2.2.摘要2.2.3.签名 2.3.数字证书2.3.1.证书的使用2.3.2.根证书2.3.3.证书链 2.4.HTTPS 1. 概述 本篇主要是讲解讲一些安全相关的基本知识&#xff08;如加密、签名、证书等&#xff09;&…

shell练习2

需求&#xff1a;判断192.168.1.0/24网络中&#xff0c;当前在线的ip有哪些&#xff0c;并编写脚本打印出来。 #!/bin/bashnmap -sn 192.168.1.0/24 | grep Nmap scan report for | awk {print $5} 注意&#xff1a;当运行 bash ip.sh 时出现 nmap: command not found 的错误…

【运维自动化-作业平台】魔法变量到底如何使用之主机列表类型

蓝鲸作业平台&#xff0c;以下简称作业平台或JOB平台 魔法变量&#xff1a;JOB平台执行引擎提供的特有的变量能力用法 脚本中使用&#xff0c;并且需要事先声明&#xff1a;job_import {{变量名}} 声明后&#xff0c;同样是使用 dollar 符 大括号&#xff1a;${变量名}来取值…

活动预告 | CCF开源发展委员会开源供应链安全技术研讨会(2025第一期)——“大模型时代的开源供应链安全风控技术”...

点击蓝字 关注我们 CCF Opensource Development Committee CCF开源发展委员会开源供应链安全工作组&#xff08;以下简称CCF-ODC-OSS&#xff09;将于1月17日下午在北京黄大年茶思屋举行2025年第一期开源供应链安全技术研讨会&#xff0c;此次研讨会主题为“大模型时代的开源供…

XML序列化和反序列化的学习

1、基本介绍 在工作中&#xff0c;经常为了调通上游接口&#xff0c;从而对请求第三方的参数进行XML序列化&#xff0c;这里常使用的方式就是使用JAVA扩展包中的相关注解和类来实现xml的序列化和反序列化。 2、自定义工具类 import javax.xml.bind.JAXBContext; import javax.x…

基于php求职招聘系统设计

基于php求职招聘系统设计 摘要 随着社会信息化时代的到来&#xff0c;如今人们社会的生活节奏普遍加快&#xff0c;人们对于工作效率的要求也越来越高&#xff0c;企业 举办招聘会耗时耗财&#xff0c;个人参加招聘会漫无目的寻找不到“方向”&#xff0c;网络搜索工作量目的…