01.useStateWithLabel

文章预览

在使用 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" 这个技巧的关键点包括： 创建一个自定 ………………………………