react教程，被神化的useDebugValue的使用场景是什么？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

react项目里面，“使用useDebugValue()代替大家常用的console.log()，来更方便的查看数据”，这样的言论在网上甚为流传。但是，苏南大叔并不同意这样的观点。只是在非常有限的场景下，useDebugValue()可以替代console.log()。

苏南大叔的程序如此灵动，记录苏南大叔的代码所想。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。

useDebugValue()限制很多

这个useDebugValue()函数确实是个比较另类的函数，它的正常使用是有诸多限制的。所以，想替换console.log()，那就仅仅是个极其美好的梦想。苏南大叔建议您，别试图这样做。useDebugValue()只能在非常有限的场景下，可以实现替换console.log()查看数据效果。

useDebugValue()的调试效果，在react-dev-toolbar里面看到效果。参考文字：
https://newsn.net/say/react-devtools.html

useDebugValue()，以use开头。所以，它在react里面，是个只能用于函数式组件自定义hook。参考：
https://newsn.net/say/react-hook-diy.html

综上所述，useDebugValue()代替console.log()？这是个无法完成的伟大梦想。

相关报错信息：

React Hook "useDebugValue" is called in function "setCountDiy" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks

useDebugValue()使用姿势

useDebugValue()有两个参数，个人觉得就第一个参数就够用了，第二个参数似乎是有些多余。怎么说呢？因为第二个参数它的效果是个回调函数，是个函数内部的函数，对第一层的第一个参数进行加工，然后返回个新的加工后的变量。（在最终的显示效果上，替代第一个变量...）

useDebugValue("调试信息", (val) => {
  return "调试信息的再加工结果"   // val 就是 "调试信息" 这几个字！！！
});

官方说，这个useDebugValue()函数内部的函数，调用时机是：Hook被检查时才会被调用。暂时无法理解，打开toolbar对他们进行检查，难道不是唯一的使用场景么？

第一个例子

这里的例子，还是基于苏南大叔的上一个自定义hook的例子，参考文字：
https://newsn.net/say/react-hook-diy.html

import React, { useState, useDebugValue } from 'react';
function useDiy2(num) {
    useDebugValue('可单独使用第一个参数');
    useDebugValue('可单独使用第一个参数', (val) => {
        return "或者通过第二个参数再格式化一下" + Date.now() + val
    });
    const [count, setCount] = useState(num);
    const setCountDiy = (who) => {
        // useDebugValue('不能放在普通函数里面', (val) => {
        //     return "只能放在组件或者use函数里面"
        // });
        console.log(who + ":" + count);
        setCount(count + 2);
    }
    return [count, setCountDiy];
}
function App() {
    const [count2, setCount2] = useDiy2(10);
    useDebugValue('可以放在组件里面，不报错但没效果', (val) => {
        return val + "," + count2
    });
    return (<>
        {count2}
        <button onClick={() => setCount2("苏南大叔")}>这不是个use，所以不能用useDebugValue</button>
    </>);
}
export default App;

运行的效果，如下图所示：

可以看到：useDebugValue()函数的使用场景，确确实实是被神化了，真的没有网络教程上所说的那么好用，很鸡肋。

第二个例子

下面有另外一个使用useDebugValue()的例子，大家看需查看。
https://github.com/SyncfusionExamples/custom-hook-debugging-with-useDebugValue

结束语

苏南大叔的react相关经验文字，请点击：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。