如何跟蹤 React 鈎子？

Question

在着手一個新的 React 項目之前，我想確保有（或將會有）好的開發工具來支持它。

我喜歡 React 的一件事是 Google Chrome 的 React Developer 工具。 它讓我檢查每個組件的內部狀態。

問題： React Developer 工具是否顯示 React 組件的鈎子狀態？

如果沒有，我如何檢查 React 組件之外的內部鈎子狀態（Aka 效果）？

Answer 1

簡短的回答是否定的，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>
  );
}

Answer 2

今天， Chrome Developers React 工具欄能夠顯示鈎子的狀態。

見附圖：

Answer 3

你可以使用react-debug-hooks和Redux 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.