你所不知道的关于React DevTools的5个秘技

栏目: 服务器 · 发布时间: 5年前

内容简介:本文主要内容来自

本文主要内容来自 5 things you didn’t know about React DevTools

你所不知道的关于React DevTools的5个秘技 React DevTools 以 chrome,firefox 插件形式提供 React 的开发辅助功能。

Profiler

你所不知道的关于React DevTools的5个秘技

更换主题

你所不知道的关于React DevTools的5个秘技

在控制台中与 React 对象 互动

选中一个元素后,打开控制台,输入$r 即是选中元素的实例。

你所不知道的关于React DevTools的5个秘技

调试生产环境状态下的 react

实际还是在本地调试 production 状态下 编译的 react。

使用 babel 插件 babel-plugin-transform-react-jsx-source 更容易的看懂源码

使用秘密的 React API

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // ...

  // Show a label in DevTools next to this Hook
  // e.g. "FriendStatus: Online"
  useDebugValue(isOnline ? 'Online' : 'Offline');

  return isOnline;
}
  • 在事件中放置 label 来分析性能问题(当前还未发布)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Building Web Reputation Systems

Building Web Reputation Systems

Randy Farmer、Bryce Glass / Yahoo Press / 2010 / GBP 31.99

What do Amazon's product reviews, eBay's feedback score system, Slashdot's Karma System, and Xbox Live's Achievements have in common? They're all examples of successful reputation systems that enable ......一起来看看 《Building Web Reputation Systems》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具