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