DebugValueHook
一、DebugValueHook
useDebugValue:用于将自定义Hook的关联数据显示到调试栏
function useTest(){
const [students, ] = useState([])
return students;
}
export default function App() {
useState(0)
useState("abc")
useEffect(() => {
console.log("effect")
}, [])
useTest();
return (
<div>
</div>
)
}
当App调用useTest组件时,我们调试页面会发现:
这样的显示结果,并不具备很好的调试能力
如果我们使用了DebugValueHook的话
function useTest(){
const [students, ] = useState([])
useDebugValue("测试组件")
return students;
}
export default function App() {
useState(0)
useState("abc")
useEffect(() => {
console.log("effect")
}, [])
useTest();
return (
<div>
</div>
)
}
这样的话是不是很好理解了呢?
如果创建的自定义Hook通用性比较高,可以选择使用useDebugValue方便调试