在React开发者工具中为useState值添加标签

在React中使用多个useState()钩子时，调试可能会变得有些复杂。幸运的是，有一种简单的方法可以为这些值添加标签，使用useDebugValue()钩子创建一个自定义的useStateWithLabel钩子：

const useStateWithLabel = (initialValue, label) => {
  const [value, setValue] = useState(initialValue);
  useDebugValue(`${label}: ${value}`);
  return [value, setValue];
};

const Counter = () => {
  const [value, setValue] = useStateWithLabel(0, 'counter');
  return (
    <p>{value}</p>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <Counter />
);
// 在React开发者工具中检查`Counter`将显示：
//  StateWithLabel: "counter: 0"

这个钩子显然主要用于开发，但在创建React组件或钩子库时也很有用。此外，你可以轻松地将其抽象出来，以便在生产构建中忽略标签。一个例子是在构建用于生产环境的代码时，导出一个默认使用useState()的钩子。