如何跟踪反应钩?

你想要的方式 . 你可以跟踪它的执行进度 here

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

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

对于具有两种状态的简单组件,Devtool将状态显示为 baseState 字段作为的第一个状态值 'Mary' 还有一个 next 基态 价值 10 .

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

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

今天 Chrome Developers React toolbar

见附图:

react-debug-hooks Redux DevTools

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.