学习React-19-useDebugValue

useDebugValue 概述

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

基本语法

javascript 复制代码

useDebugValue(value, formatFn);

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

使用场景

直接显示简单值

javascript 复制代码

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

格式化复杂值

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

javascript 复制代码

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

小栗子

复制代码

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

ts 复制代码

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 = () => {
    // 通过设置过期时间为过去的时间来删除cookie
    document.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;

效果展示：

注意事项

仅用于自定义 Hook：在普通组件中使用无效。
生产环境无影响：调试值仅在开发模式下显示，不会增加生产包体积或性能负担。
避免滥用：仅对需要高优先级调试信息的 Hook 使用，过度使用可能干扰开发者工具的可读性。

小工具

React Developer Tools

React Developer Tools 是官方提供的浏览器扩展，用于调试 React 应用。支持 Chrome、Firefox 及 Edge 等浏览器，可检查组件层级、状态、props 及性能分析。

安装方法

Chrome/Firefox/Edge 扩展商店
打开浏览器扩展商店（如 Chrome Web Store）。Chrome 需要开魔法
搜索 "React Developer Tools"。
点击"添加至浏览器"完成安装。