react学习—DebugValueHook

飞羽逐星

于 2021-11-28 15:37:15 发布

阅读量805

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript的学习 react学习文章标签： react hook

本文链接：https://blog.csdn.net/xun__xing/article/details/121592344

JavaScript的学习同时被 2 个专栏收录

44 篇文章

订阅专栏

react学习

38 篇文章

订阅专栏

本文探讨了如何通过引入DebugValueHook来增强React组件的调试能力，特别是在处理通用Hook时，它提供了直观的调试视图。通过实例对比，展示了useDebugValue在显示状态管理和自定义组件信息上的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DebugValueHook

一、DebugValueHook

一、DebugValueHook

useDebugValue：用于将自定义Hook的关联数据显示到调试栏

function useTest(){
    const [students, ] = useState([])
    return students;
}

export default function App() {
    useState(0)
    useState("abc")
    useEffect(() => {
        console.log("effect")
    }, [])
    useTest();
    return (
        <div>
        </div>
    )
}

当App调用useTest组件时，我们调试页面会发现：
在这里插入图片描述
这样的显示结果，并不具备很好的调试能力
如果我们使用了DebugValueHook的话

function useTest(){
    const [students, ] = useState([])
    useDebugValue("测试组件")
    return students;
}

export default function App() {
    useState(0)
    useState("abc")
    useEffect(() => {
        console.log("effect")
    }, [])
    useTest();
    return (
        <div>
        </div>
    )
}