react perf devtool下載 - react perf devtool源代碼下載

react perf devtool

網站數據

vtool

下載

尋找維護者

React Performance DevTool

用於檢查React組件性能的DevTool

介紹

React Performance DevTool是用於檢查React組件性能的瀏覽器擴展。從統計上，它根據使用window.performance api收集的措施來檢查反應組件的性能。

除瀏覽器擴展外，還可以在控制台中檢查措施。有關更多詳細信息，請參見“使用”部分。

該項目的目的是擴展Will Chen在React績效表的提案中所做的工作。您可以在這裡閱讀更多有關它的信息。

演示

瀏覽器擴展

用於檢查我網站上的React組件性能的擴展的演示。

將措施記錄到控制台

性能指標也可以記錄到控制台。每次重新渲染，都會更新措施並記錄到控制台。

用途

刪除或卸載未使用的組件實例。
檢查開始操作後阻止或花費更多的時間。
檢查表並查看哪些組件，您需要編寫應該componentupdate的生命週期掛鉤。
檢查哪些組件花費更多的時間來加載。

安裝

要使用此DevTool，您需要安裝一個NPM模塊，該模塊將註冊一個偵聽器（在用法部分中閱讀更多有關此的信息）和瀏覽器擴展程序。

安裝擴展名

以下擴展代表當前穩定版本。

鉻擴展
Firefox擴展
獨立應用程序即將推出

安裝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 ）中的行，以便可以通過此工具捕獲這些指標。

權衡

需要更新Commonjs React-Dom開發捆綁包（評論行）
無法將措施從應用程序框架發送到控制台
需要查詢措施，而不是一次聽事件
無法控制如何檢查特定用例的措施（例如，僅記錄組件的渲染和更新性能）

但是現在，在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 ( )