19

在开始一个新的 React 项目之前,我想确保有(或将会有)好的开发人员工具来支持它。

我喜欢 React 的一件事是用于 Google Chrome 的 React Developer 工具。它让我可以检查每个组件的内部状态。

问题: React Developer 工具是否显示 React 组件的钩子状态?

如果不是,我如何检查 React 组件之外的内部钩子状态(Aka 效果)?

4

3 回答 3

15

简短的回答是否定的,React Devtool 并没有按照你想要的方式准确地显示组件的钩子状态。您可以在此处跟踪其实施进度。

长答案是肯定的,React Devtool 在技术上确实显示了钩子的状态,但不是以您习惯的用户友好格式。状态以其原始实现形式显示,类似于链表:

{
  baseState: ...,
  baseUpdate: ...,
  memoizedState: ...,
  next: {
    baseState: ...,
    baseUpdate: ...,
    memoizedState: ...,
    next: ..., // The list goes on
    queue: ...,
  },
  queue: ...
}

对于具有两个状态的简单组件,Devtool 将状态显示为一个对象,其中baseState字段作为第一个状态值,'Mary'并且有一个next字段指向与第二个状态值对应的另一个状态对象,它的baseState值为10

function App() {
  const [name, setName] = useState('Mary');
  const [age, setAge] = useState(10);

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

在此处输入图像描述

于 2018-11-20T05:19:01.033 回答
5

今天,Chrome Developers React 工具栏能够显示钩子的状态。

见附图:

在此处输入图像描述

于 2019-08-14T10:53:57.863 回答
2

你可以使用react-debug-hooksRedux DevTools 检查 React.useState

检查预览

  const [state, setState] = React.useState({
    loading: false,
    users: [],
    error: null
  }, 'users')  // you need to set a second parameter 'string' that will be shown on Redux devTools. 
于 2020-04-03T20:34:19.163 回答