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。以下是关于…

Golang 设计模式

文章目录 创建型模式简单工厂模式图形接口具体图形类&#xff1a;圆形具体图形类&#xff1a;矩形工厂类定义使用简单工厂模式 抽象工厂模式1. 定义产品接口2. 定义具体产品实现类3. 定义抽象工厂接口4. 定义具体工厂实现类5. 使用抽象工厂创建对象并使用产品 创建者模式1. 定义…

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

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

项目太大导致 git clone 失败

git克隆也分深浅&#xff0c;大项目clone可以先用浅克隆&#xff0c;只克隆源代码和最新的提交记录。 具体分两步&#xff1a; 1. 浅克隆 git clone https://github.com/google/mydemo.git --depth 1 只会克隆最新的一次提交&#xff0c;没有历史记录&#xff0c; 2. 拉取剩…

vue 纯前端导出 Excel

方法一&#xff1a; 1、安装"file-saver" npm i -S file-saver xlsx 2、引入 在需要导出功能的 .vue 文件中引入 import FileSaver from "file-saver"; import XLSX from "xlsx"; 3、简单示例&#xff08;复制即可食用&#xff09;&#x…

高斯数据库与MySQL数据库的区别

高斯数据库与MySQL数据库的区别 在当今数据驱动的时代&#xff0c;选择合适的数据库管理系统&#xff08;DBMS&#xff09;对于项目的成功至关重要。高斯数据库和MySQL作为两款广泛使用的数据库系统&#xff0c;各自具有独特的特点和优势&#xff0c;适用于不同的应用场景。本…

Mac玩Steam游戏秘籍!

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

深入剖析 Wireshark:网络协议分析的得力工具

在网络技术的广阔领域中&#xff0c;网络协议分析是保障网络正常运行、优化网络性能以及进行网络安全防护的关键环节。而 Wireshark 作为一款开源且功能强大的网络协议分析工具&#xff0c;在网络工程师、安全专家以及网络技术爱好者中广受欢迎。本文将深入介绍 Wireshark 的功…

【网络篇】IP知识

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

深度学习中的模块复用原则(定义一次还是多次)

文章目录 1. 模块复用的核心原则&#xff08;1&#xff09;模块是否有**可学习参数**&#xff08;2&#xff09;模块是否有**内部状态**&#xff08;3&#xff09;模块的功能需求是否一致 2. 必须单独定义的模块&#xff08;1&#xff09;nn.Linear&#xff08;全连接层&#x…

我的年度总结

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

【Javascript Day8】计算机存储方式、方法定义方式、作用域、预解析、对象

目录 计算机存储方式 方法的定义方式 声明式方法 表达式方式方法 作用域 变量作用域对代码影响 1. 全局变量和局部变量重名 2. 方法内不使用 var 定义变量对全局变量的影响 3. 变量名和参数名重复 4. 作用域链 &#xff1a;作用域嵌套产生的作用域父子子孙关系 5. 嵌套作…

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;重…

docker 与K8s的恩怨情仇

Docker 和 Kubernetes&#xff08;通常简称为 K8s&#xff09;是容器化和容器编排领域的两大重要工具&#xff0c;它们在技术生态中扮演着不同的角色&#xff0c;并且有着密切的关系。虽然有时候人们会讨论它们之间的关系&#xff0c;但实际上它们更多的是互补而不是对立。下面…

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

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