gpt4 book ai didi

javascript - 如何跟踪 React 钩子(Hook)?

转载 作者:可可西里 更新时间:2023-11-01 02:21:58 28 4
gpt4 key购买 nike

在开始一个新的 React 项目之前,我想确保有(或将会有)好的开发工具来支持它。

我喜欢 React 的其中一个原因是用于 Google Chrome 的 React Developer 工具。它让我可以检查每个组件的内部状态。

问题:React Developer 工具是否显示 React 组件的 Hook 状态?

如果没有,我如何检查 React 组件外部的内部钩子(Hook)状态(又称效果)?

最佳答案

简短的回答是否定的,React Devtool 并不完全显示组件的 Hook 状态您希望的方式。您可以跟踪其实现进度 here .

长答案是肯定的,React Devtool 在技术上确实显示了 Hook 的状态,但不是以您习惯的用户友好格式显示。状态以其原始实现形式显示,类似于链表:

{
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>
);
}

enter image description here

关于javascript - 如何跟踪 React 钩子(Hook)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53379392/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com