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

学习React-19-useDebugValue

news 2025/9/30 7:42:09

useDebugValue 概述

useDebugValue 是 React Hooks 提供的一个工具函数，用于在 React 开发者工具中为自定义 Hook 添加调试标签。其核心目的是提升自定义 Hook 的可读性和调试体验，尤其在复杂逻辑中能直观展示内部状态或计算值。

基本语法

useDebugValue(value, formatFn);

value: 需要展示的调试值（任何类型）。
formatFn（可选）: 对 value 进行格式化转换的函数，仅在开发者工具中检查时调用，避免生产环境性能损耗。

使用场景

直接显示简单值

function useCustomHook() {const [state] = useState(42);useDebugValue(state); // 开发者工具中显示: 42return state;
}

格式化复杂值

通过第二个参数延迟格式化计算，避免生产环境不必要的开销：

function useTimestampConverter(timestamp) {const date = new Date(timestamp);useDebugValue(date, (d) => `格式化的值: ${d.toLocaleString()}`);return date;
}

小栗子

需求： 实现自定义Cookie的更改和删除。

import React, {useDebugValue, useState} 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())// 更新Cookie
const updateCookie = (newValue: string) => {document.cookie = `${name}=${newValue}`setCookie(newValue)
}// 删除Cookie  
const deleteCookie = () => {// 通过设置过期时间为过去的时间来删除cookiedocument.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`setCookie("")
}useDebugValue(cookie, () => {return `格式化显示Cookie: ${cookie}`
})
return [cookie, updateCookie, deleteCookie, getCookie] as const}export const TestDebugValue = () => { // useCookie(名称, 默认值)const [cookie, updateCookie, deleteCookie] = useCookie("name", "黑子")return (<div><h3>Cookie: {cookie}</h3><button onClick={() => updateCookie('ikun')}>更改Cookie值</button><button onClick={deleteCookie}>删除获取的Cookie值</button></div>)
}export default TestDebugValue;