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

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

React DevTools 以 chrome,firefox 插件形式提供 React 的开发辅助功能。

Profiler

更换主题

在控制台中与 React 对象 互动

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

调试生产环境状态下的 react

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

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

使用秘密的 React API

• useDebugValue

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 来分析性能问题(当前还未发布)