web-dev-qa-db-ja.com

Reactフックを追跡するには？

新しいReactプロジェクトで作業する前に、それをサポートする優れた開発者ツールがある（またはそうなる）ことを確認したいと思います。

Reactで気に入っているものの1つは、React Google Chromeの開発者ツールです。各コンポーネントの内部状態を検査できます。

質問： React Developerツールは、Reactコンポーネントのフック状態を表示しますか？

そうでない場合は、Reactコンポーネントの外側で、内部フック状態（別名効果）をどのように検査できますか？

javascriptreactjsreact-hooks
11
Aminadav Glickshtein

現在、 Chrome Developers React toolbar はフックの状態を表示できます。

添付の画像をご覧ください。

enter image description here

1
Aminadav Glickshtein

短い答えはノーです。React Devtoolはコンポーネントのフック状態を正確に表示しません希望どおりに 。実装の進行状況を追跡できます here 。

長い答えはイエスです。React Devtoolは技術的にはフックの状態を表示しますが、使い慣れた形式ではありません。状態は未加工の実装形式で表示されています。リンクされたリストに似ています：

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

2つの状態を持つ単純なコンポーネントの場合、Devtoolは'Mary'の最初の状態値としてbaseStateフィールドを持つオブジェクトとして状態を表示し、別の状態オブジェクトを指すnextフィールドがありますこれは2番目の状態値に対応し、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>
  );
}

enter image description here

13
Yangshun Tay