如何跟踪反应钩？

Question

在开发一个新的React项目之前，我想确定是否有(或将要)好的开发工具来支持它。

我喜欢的反应之一是谷歌Chrome的React开发者工具。它允许我检查每个组件的内部状态。

的问题：工具是否显示了React的钩子状态？

如果没有，我如何检查反应组件外的内部钩子状态(也称为效应)？

Answer 1

今天，Chrome开发人员对工具栏的反应能够显示钩子的状态。

见附图：

​

​

Answer 2

简单地说，不是，React没有按照您想要的方式显示组件的钩子状态。您可以跟踪其实现这里的进度。

很长的答案是肯定的，从技术上讲，React确实显示了钩子的状态，但并不是以您习惯的用户友好格式显示的。状态以其原始实现形式显示，类似于链接列表：

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

对于具有两个状态的简单组件，该工具将状态显示为一个对象，baseState字段作为'Mary'的第一个状态值，还有一个next字段指向另一个状态对象，该对象对应于第二个状态值，并且它具有10的baseState值。

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

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

​

​

Answer 3

您可以使用React.useState和Redux DevTools来检查

检查预览

  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.