javascript - 如何跟踪 React 钩子?
问题描述
在开始一个新的 React 项目之前,我想确保有(或将会有)好的开发人员工具来支持它。
我喜欢 React 的一件事是用于 Google Chrome 的 React Developer 工具。它让我可以检查每个组件的内部状态。
问题: React Developer 工具是否显示 React 组件的钩子状态?
如果不是,我如何检查 React 组件之外的内部钩子状态(Aka 效果)?
解决方案
简短的回答是否定的,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>
);
}
推荐阅读
- scala - 结果类型是泛型类型上的类型投影的隐式转换
- html - Bootstrap导航栏:菜单如何保持标签突出显示?
- celery - 芹菜日志说任务完成但实际上没有
- sql - 我应该在delphi中外包我的数据库连接吗?
- typescript - 打字稿是否允许向现有的对象数组添加“特征”?
- node.js - 为什么这个 Jimp gif 生成器不起作用?
- html - 将关闭按钮/“x”明文图标添加到 Bootstrap5 表单浮动和表单控制输入字段
- linux - getppid 是指父母还是真正的父母?
- android - Rangeerror (index) : index out of range :index 应该小于 30: 30
- python - Pandas 添加多个空数据框