面试题：React中useDebugValue的基础使用

Question

请简述React中useDebugValue的基本用途，并给出一个简单示例展示如何在自定义Hook中使用它来标记调试信息。

Answer 1

用途

useDebugValue 主要用于在 React 开发者工具中为自定义 Hook 显示自定义标签，方便调试。它允许开发者为自定义 Hook 提供额外的调试信息，使得在使用该 Hook 的组件在 React 开发者工具中更易理解和排查问题。

示例

import React, { useDebugValue, useState } from 'react';

// 自定义 Hook
function useMyCustomHook() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);

  // 使用 useDebugValue 标记调试信息
  useDebugValue(`Count: ${count}`);

  return {
    count,
    increment
  };
}

function App() {
  const { count, increment } = useMyCustomHook();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default App;

在上述示例中，useMyCustomHook 自定义 Hook 使用 useDebugValue 展示了当前 count 的值作为调试信息。在 React 开发者工具中查看使用该 Hook 的组件时，会显示这个自定义的调试标签。