在這篇文章中，將會介紹 React 提供的 Profiler API。

介紹 React Profiler

這個 API 會去收集每個元件在渲染時花費的時間，透過收集結果找到效能瓶頸（花最多時間進行渲染的元件）便可以進行優化。只要下載 React Developer Tools，就可以使用 profiler 並且拿到收集的結果了。

使用範例

1. 下載 React Developer Tools 並打開開發人員工具
2. 找到 Profiler 的 tab 後，要確認一下它是在可以執行的環境，可看下圖

注意: Profiler 只能在開發者環境使用。

3. 點擊 record，然後在網頁做一些想檢測的操作，結束後按下 stop
4. 最後就會出現檢測的結果，以下執行一個小範例做示範

右上角的長條圖數量代表的是 React 總共更新了幾次 DOM 元素(Commit 次數)，而每一個直條就代表一次更新，然後直條的顏色/長度代表該次更新花費的時間，越長/黃的直條表示該次更新花費的時間越長，越短/藍的則相反。

而下方多個橫條圖的區塊稱作"火焰圖"，每一個橫條為一個元件，若為灰色表示這個元件在該次更新沒有重新渲染，若不是灰色則表示有重新渲染，越接近黃色代表重新渲染所花費的時間越久，越接近藍色則反之。橫條由上而下的排序方式是從父元件到子元件一層層排下來。

點擊上述的長條都可以在右側欄看到詳細的資訊。

在 devtools 的火焰圖 icon 旁邊有一個 rank 的圖示，點進去可以切換成"排行圖"，橫條由上而下的排序方式是從花費越多時間渲染的元件到花越少時間的元件。

而點擊右上的齒輪(紅圈)還可以進行其他的設定，有興趣可以自行深入研究。

若要瞭解檢測後要如何針對耗時比較多的元件去做優化，這裡推薦一個 youtube 影片，教你如何用 React Profiler 去優化效能:

How to use the React Profiler to find and fix Performance Problems

Profiler 元件介紹

除了上面提到在 React Developer Tools 裡的 Profiler，React 官網也介紹了另一個測量元件渲染的 Profiler 元件，這個元件用來測量指定部分元件渲染時消耗的時間，會接收兩個 prop，一個是 id，另一個 onRender 是指定觀測的元件更新時會被調用的 callback function。

範例:

// import
import React, { Profiler } from "react";

// 包覆住想要觀測的元件
return (
  <App>
    <Profiler id="Main" onRender={onRenderCallback}>
      <Main {...props} />
    </Profiler>
  </App>
);

當測量的元件完成渲染時，會呼叫 onRender 的 callback function 並得到許多的資訊，詳細結果範例如下，這些在官網文件也能找到:

const onRenderCallback = (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}`);
};

// Main's mount phase:
// Actual time: 7.499999995867256
// Base time: 7.1249999981955625
// Start time: 384888.51500000054
// Commit time: 384897.5449999998

// Main's update phase:
// Actual time: 0.3500000038766302
// Base time: 7.075000001175795
// Start time: 385115.2050000001
// Commit time: 385116.22499999974

補充: Profiler 一樣不能在 production 環境使用。

參考資料

如何優化你的 React App

Profiling Performance of React Apps using React Profiler