如何跟踪React钩子？

Question

在进行新的React项目之前，我想确保有（或将有）好的开发人员工具来支持它。

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

问题： React Developer工具是否显示React组件的挂钩状态？

如果没有，我如何检查React组件外部的内部挂钩状态（又称Aka效果）？

Answer 1

简短的回答是“否”，React Devtool不能完全按照您希望的方式显示组件的挂钩状态。您可以跟踪其实施here的进度。

长答案是肯定的，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>
  );
}

Answer 2

今天，Chrome Developers React toolbar能够显示挂钩的状态。

查看所附图片：

Answer 3

您可以使用react-debug-hooks和Redux DevTools

检查React.useState

inspect preview

  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.