第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)
相关推荐
脑袋大大的11 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0120 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui