React Quantum

React Quantum插件简介

React Quantum插件描述

React Quantum parses through your React application to create a colcoded tree model of its component hierarchy. On hover, each tree node will display two key component perfmance metrics—render time  rerender frequency—as well as memoized state  props to indicate what, specifically, initiated the render.

The beauty is in the heat map: Nodes will change col depending on the components rendering perfmance, making it easy to pinpoint possible bottlenecks at a glance. ?

How it wks 

*PLEASE NOTE*
 React Quantum utilizes the React Devtool to extract infmation about your React App.
 Please ensure your project is running on React 16.0+  that you have the React Devtool installed befe using React Quantum.
 Due to the minification of component names during bundling, React Quantum wks best with your project bundled in development mode.

1. Open Chrome Developer Tools (Inspect) on any page that uses React,  click on React Quantum at the top of the Developer Tools panel. Upon pressing ‘Start Quantum’, a persistent connection is open  sted on the background page. 

2. Refresh the page  set state to trigger a rerender. As the user interacts with the React application, the Mutation Observer listens f changes to the DOM  triggers a script injection to extract  parse the page’s fiber tree.

3. Hover over a node to view infmation like Component Name, Type, Commit Frequency, Render Time, Current State,  Props. 

4. React Quantum runs with heatmap values outofthebox, but users could opt to customize their heatmap with percentage inputs at the top of the tree.

                                

React Quantum插件离线安装方法

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.下载 React QuantumChrome插件v0.2.0版本到本地。

5.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

注意：最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息，参照这篇文章即可解决