Comment suivre React hooks?
Avant de travailler sur un nouveau projet React, je veux être sûr qu'il existe (ou qu'il y aura) de bons outils de développement pour le supporter.
L'une des choses que j'aime avec React est l'outil de développeur React pour Google Chrome. Il me permet d'inspecter l'état interne de chaque composant).
La question: Est-ce que React Developer tool affiche l'état des crochets d'un composant React?
Sinon, comment puis-je inspecter l'état des crochets internes (effet Aka), en dehors du composant React?
Aujourd'hui, la Chrome Developers React toolbar est capable d'afficher l'état des hooks.
Voir l'image ci-jointe:
La réponse courte est non, React Devtool n'affiche pas exactement l'état des crochets des composants comme vous le souhaitez Vous pouvez suivre les progrès de sa mise en œuvre ici .
La réponse longue est oui, le React Devtool affiche techniquement l'état des hooks, mais pas dans un format convivial auquel vous êtes habitué. L'état est affiché dans sa forme d'implémentation brute, qui ressemble à une liste chaînée:
{
baseState: ...,
baseUpdate: ...,
memoizedState: ...,
next: {
baseState: ...,
baseUpdate: ...,
memoizedState: ...,
next: ..., // The list goes on
queue: ...,
},
queue: ...
}
Pour un composant simple avec deux états, Devtool affiche l'état comme un objet avec le champ baseState comme première valeur d'état de 'Mary' et il y a un champ next qui pointe vers un autre objet d'état qui correspond à la deuxième valeur d'état, et il a la valeur baseState de 10.
function App() {
const [name, setName] = useState('Mary');
const [age, setAge] = useState(10);
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}
