Как отследить крючки React?

Прежде чем приступить к работе над новым проектом React, я хочу быть уверенным, что есть (или будут) хорошие инструменты разработчика для его поддержки.

В React мне нравится инструмент React Developer для Google Chrome. Это позволяет мне проверять внутреннее состояние каждого компонента.

Вопрос: показывает ли инструмент React Developer состояние хуков компонента React?

Если нет, как я могу проверить состояние внутренних перехватов (эффект Aka) вне компонента React?

Ответ 1

Сегодня панель инструментов Chrome Developers React может отображать состояние хуков.

Смотрите прикрепленное изображение:

Ответ 2

Короткий ответ - нет, 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>
  );
}