<Profiler> 可讓您以程式化方式測量 React 樹狀結構的渲染效能。

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

參考

<Profiler>

將元件樹狀結構包裝在 <Profiler> 中以測量其渲染效能。

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

屬性

  • id：識別您正在測量的 UI 部分的字串。
  • onRender：React 每次分析樹狀結構中的元件更新時都會呼叫的 onRender 回呼函式。它會接收關於渲染內容和花費時間的資訊。

注意事項

onRender 回呼函式

React 將使用關於渲染內容的資訊呼叫您的 onRender 回呼函式。

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // Aggregate or log render timings...
}

參數
  • id：剛完成提交的 <Profiler> 樹狀結構的字串 id 屬性。如果您使用多個效能分析器，這可以讓您識別提交的是樹狀結構的哪一部分。
  • phase："mount"、"update" 或 "nested-update"。這讓您知道樹狀結構是第一次掛載，還是因為 props、state 或 Hooks 的更改而重新渲染。
  • actualDuration：為目前的更新渲染 <Profiler> 及其子代所花費的毫秒數。這表示子樹狀結構對記憶體使用（例如 memo 和 useMemo）的利用程度。理想情況下，在初始掛載後，此值應顯著降低，因為許多子代僅在其特定 props 更改時才需要重新渲染。
  • baseDuration：估計在沒有任何優化的情況下重新渲染整個 <Profiler> 子樹狀結構所需時間的毫秒數。它是通過將樹狀結構中每個組件最近的渲染持續時間加總來計算的。此值估計渲染的最壞情況成本（例如初始掛載或沒有記憶體的樹狀結構）。將 actualDuration 與之比較，以查看記憶體是否有效。
  • startTime：React 開始渲染目前更新的數值時間戳記。
  • commitTime：React 提交目前更新的數值時間戳記。此值在一次提交中所有效能分析器之間共享，如果需要，可以將它們分組。

    • 用法

    以程式設計方式測量渲染效能

    將 <Profiler> 組件包裹在 React 樹狀結構周圍，以測量其渲染效能。

    <App>
      <Profiler id="Sidebar" onRender={onRender}>
        <Sidebar />
      </Profiler>
      <PageContent />
    </App>

    它需要兩個 props：一個 id（字串）和一個 onRender 回調（函式），React 會在樹狀結構中的任何組件「提交」更新時呼叫它。

    陷阱

    效能分析會增加一些額外負擔，因此預設情況下在正式版建置中會停用它。 若要選擇加入正式版效能分析，您需要啟用 啟用效能分析的特殊正式版建置。

    注意事項

    <Profiler> 可讓您以程式設計方式收集測量值。如果您正在尋找互動式效能分析器，請嘗試 React 開發者工具中的「效能分析器」標籤頁。它以瀏覽器擴充功能的形式提供類似的功能。

    測量應用程式的不同部分

    您可以使用多個 <Profiler> 組件來測量應用程式的不同部分。

    <App>
      <Profiler id="Sidebar" onRender={onRender}>
        <Sidebar />
      </Profiler>
      <Profiler id="Content" onRender={onRender}>
        <Content />
      </Profiler>
    </App>

    您也可以巢狀 <Profiler> 組件。

    <App>
      <Profiler id="Sidebar" onRender={onRender}>
        <Sidebar />
      </Profiler>
      <Profiler id="Content" onRender={onRender}>
        <Content>
          <Profiler id="Editor" onRender={onRender}>
            <Editor />
          </Profiler>
          <Preview />
        </Content>
      </Profiler>
    </App>

    雖然 <Profiler> 是一個輕量級組件，但應僅在必要時使用。每次使用都會增加應用程式的 CPU 和記憶體開銷。

    上一篇：<Fragment> (<>) 下一篇：<StrictMode>