React Quantum

提供方:React Quantum
2020年03月30日
224 个用户
版本:0.2.0
更新时间:2019年3月8日
大小:828KiB
               

简介

React Quantum通过您的React应用程序进行解析,以创建其组件层次结构的颜色编码树模型。悬停时,每个树节点将显示两个关键组件性能指标-渲染时间和重新渲染频率-以及记录的状态和道具,以指示具体启动了渲染的内容。

美观之处在于热图:节点将根据组件的渲染性能而改变颜色,从而一目了然地轻松确定可能的瓶颈。 ?

怎么运行的

*请注意*
-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开箱即用的热图值运行,但是用户可以选择在树的顶部输入百分比来自定义热图。