React@16.x（32）useDebugValue

1，介绍

从一个例子开始：

export default function App() {
    const [n, setN] = useState(0);
    const refH1 = useRef();
    useEffect(() => {
        console.log("父组件");
    });
    return <h1 ref={refH1}>{n}</h1>;
}

使用了3个 HOOK，会在浏览器插件中会按顺序显示在“表格”中：

但如果使用了自定义HOOK，比如：

function useTest() {
    const [arr, setArr] = useState([]);
    useEffect(() => {
        console.log("自定义hook");
    });
    return arr;
}

export default function App() {
    const [n, setN] = useState(0);
    const refH1 = useRef();
    useEffect(() => {
        console.log("父组件");
    });
    useTest();
    return <h1 ref={refH1}>{n}</h1>;
}

自定义HOOK默认展示为空：

打开自定义HOOK，才能看到它使用的其他HOOK函数：

2，作用

useDebugValue 的作用，就是为了搭配 React 的浏览器插件，来调试自定义HOOK。

它会在浏览器插件中，给自定义HOOK展示一个自定义的值。比如：

function useTest() {
    const [arr, setArr] = useState([]);
    useEffect(() => {
        console.log("自定义hook");
    });
    useDebugValue(123);
    return arr;
}

一般来说，几乎用不到。只是当一些通用的自定义HOOK使用次数较多时，方便定位问题。

---

以上。