第36节——useDebugValue+React Developer Tools——了解

一、概念

勾住"React开发调试工具中的自定义hook标签,让useDebugValue勾住的自定义hook可以显示额外的信息。useDebugValue的目的是"在react开发者工具自定义hook标签中显示额外信息",方便我们"一眼就能找到"对应的自定义hook。useDebugValue(value,formatterFn)函数第1个参数为我们要额外显示的内容变量。第2个参数是可选的,是对第1个参数值的数据化格式函数。

注意

1、react官网文档中明确表示,在普通项目开发中不推荐使用useDebugValue,默认的调试输出已经很清晰可用了。

2、除非你的自定义 hook 是作为共享库中的一部分才有价值。这样其他人更容易注意到你自定义的hook状态变化

3、useDebugValue应该在自定义hook中使用,如果直接在组件内使用是无效的,不会报错也不会有任何额外信息展示。

5、如果使用useDebugValue,最好设置第2个参数,向react开发调试工具讲清楚如何格式化展示第1个参数

二、React Developer Tools

1、安装

打开Chrome扩展程序商店https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

搜索React Developer Tools,并安装

安装成功后,在浏览器右上角可以出现

2、简单说明

如果该扩展程序安装成功,那么会有以下几种情况:

1、对于本机开发调试的项目网页,该插件图标会变成橘黄色,且图标中间有一个小虫子,表示可以进行react源码式的调试,当代码出现错误时会精准定位出错的代码位置。

2、对于别人开发的项目网页,该插件图标会变成蓝色,表示该网页由react开发,当代码出现错误时不能精准定位出错的代码位置。

例如阿里云后台、腾讯云后台、百度翻译这些网页都是用react开发,访问这些网页你就会看到 调试工具图光标为蓝色。 这些大厂都用react,所以虽然学习过程中很痛苦,但是是值得的。

3、对于没有使用react的网页,该插件图标会变成灰色。

三、基本使用

jsx 复制代码
import { useState, useDebugValue } from 'react'


export default function useTime() {
  const [num, setNum] = useState(1);


  useDebugValue(num, () => '我是针对自定义hooks额外输出的一些日志'); //请注意这一行代码


  return [num, setNum]
};

外输出的一些日志'); //请注意这一行代码

return [num, setNum]

};

复制代码
![img](https://img-blog.csdnimg.cn/img_convert/c7c473a76fdebced027d1c3d8bdd389c.png)
相关推荐
萌萌哒草头将军2 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
游离状态的猫13 小时前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
小彭努力中3 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊3 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿3 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj3 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝3 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3114 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion4 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜4 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf