ReactJS -效能分析器API

---

---

效能分析是一種重要的技術，用於收集和顯示特定函式在即時環境中執行所需的時間。效能分析通常用於查詢應用程式中的效能瓶頸。React 提供了兩種效能分析React應用程式的方法。

• Profiler元件

• Profiler DevTools

Profiler元件

React Profiler元件只是另一個React元件，用於記錄React元件的效能資訊。Profiler元件可以用於React元素樹中的任何位置。React接受多個Profiler以及Profiler的多級巢狀。本章我們將檢查簽名以及如何在React應用程式中應用Profiler。

Profiler元件的簽名

Profiler元件可以巢狀任何React元件，並需要兩個props：

• id

• Profiler元件的識別符號

• onRender回撥函式

• 在元件渲染的每個階段呼叫的回撥函式

回撥函式的簽名如下：

function onRenderCallback(
   id,
   phase,
   actualDuration,
   baseDuration,
   startTime,
   commitTime,
   interactions
){
   // Do anything with the profiler information
}

一個示例回撥函式實現，用於將效能分析資料記錄到控制檯，如下所示：

const logProfilerData = (id, phase, actualTime, baseTime, startTime, commitTime) => {
   console.log(`${id}'s ${phase} phase:`);
   console.log(`Actual time: ${actualTime}`);
   console.log(`Base time: ${baseTime}`);
   console.log(`Start time: ${startTime}`);
   console.log(`Commit time: ${commitTime}`);
};

應用Profiler

在本節中，我們將建立一個新的React應用程式來學習如何在其中應用Profiler元件。

首先，使用以下命令建立一個新的React應用程式並啟動它。

create-react-app myapp
cd myapp
npm start

接下來，開啟App.css (src/App.css)並刪除所有CSS類。

// remove all css classes

接下來，建立一個簡單的Hello元件，Hello (src/Components/Hello.js)，並渲染一條簡單的訊息，如下所示：

import React from "react";
class Hello extends React.Component {
   constructor(props) {
      super(props)
   }
   render() {
      return (
         <div>Hello, {this.props.name}</div>
      );
   }
}
export default Hello;

這裡：

• 使用name props來使用給定的名稱渲染Hello訊息

接下來，開啟App元件 (src/App.js)，並使用Profiler元件，如下所示：

import './App.css'
import React, { Profiler } from 'react';
import Hello from './Components/Hello'
const logProfilerData = (id, phase, actualTime, baseTime, startTime, commitTime) => {
   console.log(`${id}'s ${phase} phase:`);
   console.log(`Actual time: ${actualTime}`);
   console.log(`Base time: ${baseTime}`);
   console.log(`Start time: ${startTime}`);
   console.log(`Commit time: ${commitTime}`);
};
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <Profiler id="helloWorld" onRender={logProfilerData}>
                  <Hello name="World" />
               </Profiler>
            </div>
         </div>
      </div>
   );
}
export default App;

這裡：

• 從react包中匯入了Profiler元件

• 使用Hello元件，並用Profiler元件將其包裝起來

• 建立了一個回撥函式，logProfilerData，並將所有Profiler資料輸出到控制檯

• 在Profiler元件的onRender props中設定了logProfilerData回撥函式

最後，在瀏覽器中開啟應用程式並檢查最終結果。它將渲染Hello元件，如下所示：

開啟控制檯，您可以看到效能分析資訊，如下所示：

helloWorld's mount phase:
App.js:7 Actual time: 4.900000000372529
App.js:8 Base time: 1.800000000745058
App.js:9 Start time: 515.7999999988824
App.js:10 Commit time: 525.9000000003725
...
App.js:6 helloWorld's update phase:
App.js:7 Actual time: 1
App.js:8 Base time: 0.6999999992549419
App.js:9 Start time: 19836.900000000373
App.js:10 Commit time: 19838.400000000373

Profiler React DevTools

React DevTools外掛為Profiler引入了一個單獨的部分。開發者可以開啟Profiler選項卡，並獲得許多關於應用程式的有用見解。Profiler DevTools中提供的一些功能如下：

• 瀏覽提交

• 過濾提交

• 火焰圖

• 排名圖

• 元件圖

結論

React Profiler元件和Profiler DevTools是不可或缺且強大的工具，用於分析和最佳化React應用程式。