Прежде чем приступить к работе над новым проектом React, я хочу быть уверенным, что есть (или будут) хорошие инструменты разработчика для его поддержки.
В React мне нравится инструмент React Developer для Google Chrome. Это позволяет мне проверять внутреннее состояние каждого компонента.
Вопрос: показывает ли инструмент React Developer состояние хуков компонента React?
Если нет, как я могу проверить состояние внутренних перехватов (эффект Aka) вне компонента React?
Сегодня панель инструментов Chrome Developers React может отображать состояние хуков.
Смотрите прикрепленное изображение:
Короткий ответ - нет, 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>
);
}
