react perf devtool
vtool
寻找维护者
用于检查React组件性能的DevTool
介绍
演示
用途
安装
用法
描述
阶段
执行
贡献
执照
React Performance DevTool是用于检查React组件性能的浏览器扩展。从统计上，它根据使用window.performance api收集的措施来检查反应组件的性能。
除浏览器扩展外，还可以在控制台中检查措施。有关更多详细信息，请参见“使用”部分。
该项目的目的是扩展Will Chen在React绩效表的提案中所做的工作。您可以在这里阅读更多有关它的信息。
用于检查我网站上的React组件性能的扩展的演示。
性能指标也可以记录到控制台。每次重新渲染，都会更新措施并记录到控制台。
删除或卸载未使用的组件实例。
检查开始操作后阻止或花费更多的时间。
检查表并查看哪些组件，您需要编写应该componentupdate的生命周期挂钩。
检查哪些组件花费更多的时间来加载。
要使用此DevTool，您需要安装一个NPM模块，该模块将注册一个侦听器（在用法部分中阅读更多有关此的信息）和浏览器扩展程序。
安装扩展名
以下扩展代表当前稳定版本。
安装NPM模块
npm install react-perf-devtool
也可以通过UNPKG获得umd构建
< script crossorigin src = "https://unpkg.com/[email protected]/lib/npm/hook.js" > </ script >此扩展程序和软件包也取决于React。请确保您也安装了这些安装。
注意 - NPM模块很重要，需要使用DevTool。因此，在使用浏览器扩展程序之前，请确保已安装它。
文档的这一部分说明了DevTool和API在React应用中注册观察者的用法。
react-perf-devtool依赖于本机window.PerformanceObserver 。在Chrome V52和Firefox V57中添加的PerformanceObserver API。有关更多信息，请参阅此处的Mozilla官方文档。
要使用此DevTool扩展程序，您需要在应用程序中注册一个观察者，该观察者将在一次观察数据集合（性能度量）。
注册观察者
注册观察者非常简单，只有一个函数呼叫。让我们看看如何！
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( )您可以将此代码放入您的index.js文件（推荐）或应用程序中的任何其他文件中。
注意 - 仅当您需要检查React组件的性能时，才应在开发模式下使用。确保在构建生产时将其删除。
注册观察者将一个对象挂钩，该对象包含有关窗口对象的事件和性能度量的信息，然后可以使用eval（）在检查的窗口内访问该对象。
每次重新渲染，此对象都会使用新的措施和事件数量进行更新。该扩展名处理清除内存以及缓存。
您还可以通过option对象和可选callback ，该回调接收包含分析和汇总度量的参数
使用回调
可选的回调也可以传递给registerObserver该登记措施将被解析的措施作为其参数。
您可以使用此回调来检查解析和汇总的措施，也可以将其与任何其他用例集成在一起。您还可以通过Google Analytics（分析）将这些措施发送给分析仪表板来利用这些绩效指标。此过程在此处记录。
例子 -
const { registerObserver } = require ( 'react-perf-devtool' )
function callback ( measures ) {
// do something with the measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( { } , callback )注册观察者后，启动本地开发服务器，然后访问http://localhost:3000/ 。
注意 - 此扩展仅适用于16或更高版本的版本。
成功安装扩展程序后，您将在Chrome Developer工具中看到一个名为React性能的选项卡。
性能措施也可以记录到控制台。但是，打印措施的过程不是直接的。您需要设置一个将要收听措施的服务器。为此，您可以使用Zeit使用Micro，即HTTP微服务。
npm install --save micro
您可以将选项对象作为参数传递给registerObserver ，以启用记录和设置端口号。
使用选项对象
{
shouldLog : boolean , // default value: false
port : number // default value: 8080
timeout : number // default value: 2000
}您可以将三个属性传递到option对象， shouldLog和port 。
shouldLog它需要一个布尔值。如果设置为真，则将记录到控制台。
port - 将发送措施的服务器的端口号
timeout - 推迟扩展的初始化的超时值。
如果您的应用程序需要时间来加载，则最好通过通过timeout属性指定超时值来推迟扩展的初始化。这样可以确保仅在应用程序正确加载到浏览器中后才加载扩展名，从而可以渲染更新的措施。但是，如果您的应用程序尺寸很小，则可以跳过此属性。
例子
// index.js file in your React App
const React = require ( 'react' )
const ReactDOM = require ( 'react-dom' )
const { registerObserver } = require ( 'react-perf-devtool' )
const Component = require ( './Component' ) // Some React Component
const options = {
shouldLog : true ,
port : 8080 ,
timeout : 12000 // Load the extension after 12 sec.
}
function callback ( measures ) {
// do something with the measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback )
ReactDOM . render ( < Component /> , document . getElementById ( 'root' ) ) // server.js
const { json } = require ( 'micro' )
module . exports = async req => {
console . log ( await json ( req ) )
return 200
} // package.json
{
"main" : "server.js" ,
"scripts" : {
"start-micro" : "micro -p 8080"
}
}措施模式
以下是记录到控制台的性能度量的模式。
{
componentName ,
mount : { // Mount time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
render : { // Render time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
update : { // Update time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
unmount : { // Unmount time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
totalTimeSpent , // Total time taken by the component combining all the phases
percentTimeSpent , // Percent time
numberOfInstances , // Number of instances of the component
// Time taken in lifecycle hooks
componentWillMount : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
componentDidMount: {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
componentWillReceiveProps : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
shouldComponentUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentWillUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentDidUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentWillUnmount : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
}成分
您还可以使用选项通过components属性来检查特定组件的性能。
例子 -
const options = {
shouldLog : true ,
port : 3000 ,
components : [ 'App' , 'Main' ] // Assuming you've these components in your project
}
function callback ( measures ) {
// do something with measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback ) 概述部分表示您应用程序中所有组件所需的总时间（％）概述。
所有组件所需的时间 - 显示所有组件所花费的时间（结合了所有阶段）。
进行更改的时间持续时间 - 显示进行更改的时间。在这里阅读更多有关此的信息
进行主机效果的时间持续时间 - 显示插入新树（更新）和否时所花费的时间。宿主效应（在提交中的效果计数）。
调用生命周期方法的时间持续时间 - 报告呼叫生命周期钩的时间持续时间，而当生命周挂钩计划级联更新时，调用的方法持续时间持续时间。
总时间
清除- 清除按钮清除表中的措施，并擦除结果。
重新加载检查的窗口- 此按钮重新加载检查的窗口并显示新措施。
待处理事件- 这表示待处理的措施（反应性能数据）。
本节显示了组件在阶段中所花费的时间，组件的实例数量和总时间结合了MS和％的所有阶段
下面给出的是反应衡量性能的不同阶段：
React树对帐- 在此阶段，React呈现根节点并创建了在进行纤维中的工作。如果在核对时有一些级联更新，它将暂停任何有效的测量结果，并将它们恢复到递延循环中。这是当顶级更新中断以前的渲染时引起的。如果在渲染阶段施加错误，则它通过查找最近的错误边界来捕获错误，或者如果没有错误边界，则使用根。
提交更改- 在此阶段，完成的工作是从事的。另外，它检查根节点是否具有任何副作用。如果有效果，请将其添加到列表中（在此处阅读更多此列表数据结构）或提交树中的所有副作用。如果当前提交中有计划的更新，则会发出有关生命周期钩中级联更新的警告。在提交阶段，在当前提交中安排了更新。另外，如果阶段/阶段不是componentWillmount或组件WillReceiveProps，则计划更新。
提交主机效果- 每当插入一棵新树时就会产生主机效应。随着计划进行的所有新更新，计算总体效果。此过程分为两个阶段，第一阶段执行所有主机节点插入，删除，更新和ref Unmounts，而另一阶段则执行所有生命周期和参考回调。
提交生命周期- 当第一次通过时，在实施宿主效应时完成了工作时，正在进行的工作成为当前的树。因此，正在进行中的工作是在componentdidmount/更新期间当前的工作。在此阶段，所有生命周期和参考回调都是投入的。犯下生命周期是作为单独的通行证发生的，因此已经调用了整棵树中的所有位置，更新和删除。
在此DevTool的先前版本中，正在查询性能指标，而不是收听事件类型。这需要评论react-dom软件包（ react-dom.development.js ）中的行，以便可以通过此工具捕获这些指标。
但是现在，在Performance Observer API的帮助下，观察者可以注册以收听特定类型的事件并获取条目（性能测量）。 react-perf-devtool在性能观察者的顶部提供了一个API，这是一个注册观察者的函数。
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( )该观察者倾听反应性能测量事件。它挂钩一个对象，该对象包含有关窗口对象的React组件的事件和性能度量的信息，然后可以使用Eval（）在检查窗口内访问该对象。
每次重新渲染，此对象都会使用新的措施和事件数量进行更新。该扩展名处理清除内存以及缓存。
option对象和可选callback也可以传递给registerObserver 。当要记录到控制台时， option对象很有用。该callback将被解析和汇总结果（指标）作为其参数，然后可以用于分析。
计算和汇总结果发生在应用程序框架内，而不是在DevTool中。它有自己的好处。
阅读贡献指南
麻省理工学院
