React Quantum通过您的React应用程序进行解析,以创建其组件层次结构的颜色编码树模型 悬停时,每个... React Quantum通过您的React应用程序进行解析,以创建其组件层次结构的颜色编码树模型。 悬停时,每个树节点将显示两个关键组件性能指标-渲染时间和重新渲染频率-以及记住的状态和道具,以指示具体启动了渲染的内容。 美观之处在于热图:节点将根据组件的渲染性能改变颜色,从而一目了然地轻松确定可能的瓶颈。 :fire:工作原理*请注意*-React Quantum利用React Devtool提取有关您的React App的信息。 -在使用React Quantum之前,请确保您的项目在React 16.0+上运行,并且已经安装了React Devtool。 -由于捆绑过程中组件名称的最小化,React Quantum最适合在开发模式下捆绑的项目。 1.在使用React的任何页面上打开Chrome Developer Tools(检查),然后单击Developer Tools面板顶部的React Quantum。 按下“启动Quantum”后,一个持久连接将打开并存储在后台页面上。 2.刷新页面或设置状态以触发重新渲染。 当用户与React应用程序交互时,“突变观察者”侦听DOM的更改,并触发脚本注入以提取和解析页面的纤维树。 3.将鼠标悬停在节点上可以查看诸如组件名称,类型,提交频率,渲染时间,当前状态和属性之类的信息。 4. React Quantum开箱即用的热图值运行,但是用户可以选择在树的顶部输入百分比来自定义热图。 支持语言:English