一、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方便调试

react学习—DebugValueHook相关推荐

react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
2019 年 React 学习路线图
作者 | javinpaul 译者 | 无明之前我们已经介绍了 2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发 ...
React 学习第二天 2018-07-21
React 学习第二天我这个React 学习存在以下毛病 1.不报错, 2.不能自动热加载,不能自动刷新 3.不能修改props 属性的值,但是这个却能够修改. 1.Vue 和React的关于 k ...
React 学习第一天-2018-07-21
React 学习第一天 1.Dom 和虚拟Dom Dom 是浏览器中实际存在的,虚拟Dom是框架中的,是利用JS代码来模拟DOM. 虚拟Dom 是实现页面的实时更新. Dom树,一个网页的呈现过程, ...
React学习：路由定义及传参、数据复用-学习笔记
文章目录 React学习:路由定义及传参.数据复用-学习笔记在React中使用react-router-dom路由简单例子路由定义及传参 React学习:路由定义及传参.数据复用-学习笔记在R ...
React学习：脚手架搭建、antd引入-学习笔记
文章目录 React学习:脚手架搭建.antd引入-学习笔记脚手架搭建项目目录结构 antd引入 antd附加:数据可放置的三个位置 React学习:脚手架搭建.antd引入-学习笔记脚手架搭建 ...
React学习：ref调用、组件封装调用-学习笔记
文章目录 React学习:ref调用.组件封装调用-学习笔记 ref调用-string形式 ref调用-回调形式(官方推荐) ref调用-父调子组件封装调用demo(全选) demo1(单组件) d ...
React学习：生命周期、过滤器、event、axios-学习笔记
文章目录 React学习:生命周期.过滤器.event.axios-学习笔记生命周期过滤器 webapp小例子: event - 和原生JavaScript写法一样的 axios React学习: ...

react学习—DebugValueHook

DebugValueHook

一、DebugValueHook

react学习—DebugValueHook相关推荐

最新文章

热门文章