<Profiler> дає вам змогу програмно вимірювати продуктивність рендеру React-дерева.

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

Опис

<Profiler>

Обгорніть дерево компонентів у <Profiler>, щоб виміряти продуктивність його рендеру.

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

Пропси

  • id: Стрічковий ідентифікатор тієї частини UI, продуктивність якої ви вимірюєте.
  • onRender: Функція зворотного виклику onRender, яку React викликає щоразу, коли компоненти всередині профільованого дерева оновлюються. Вона отримує інформацію про те, що було відрендерено і скільки часу це зайняло.

Застереження

Функція зворотного виклику onRender

React викличе вашу функцію зворотного виклику onRender з інформацією про те, що було відрендерено.

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // Зберіть або виведіть дані про тривалість рендеру...
}

Параметри

  • id: Стрічковий проп id дерева <Profiler>, яке щойно було внесено (committed). Він дає вам змогу визначити, яку саме частину дерева було внесено, якщо ви використовуєте кілька профілювачів.
  • phase: "mount", "update" або "nested-update". Дає змогу дізнатися, чи дерево було щойно змонтовано вперше або ж рендерено повторно через зміни в стані, пропсах чи хуках.
  • actualDuration: Кількість мілісекунд, витрачених на рендеринг компонента <Profiler> і його дочірніх компонентів під час поточного оновлення. Вказує на те, наскільки ефективно піддерево використовує мемоїзацію (наприклад, memo і useMemo). В ідеалі, це значення повинно значно зменшитися після першого монтування, оскільки багато з дочірніх компонентів буде перерендерюватися лише за зміни пропсів.
  • baseDuration: Кількість мілісекунд, яка відображає, скільки часу займе повторний рендер усього піддерева компонента <Profiler> без будь-якої оптимізації. Це значення розраховується як сума часу останніх рендерів кожного компонента в дереві. Воно показує найгірший сценарій рендерингу (наприклад, перше монтування або дерево без мемоїзації). Порівняйте actualDuration з ним, щоби перевірити, чи працює мемоїзація.
  • startTime: Числове значення, яке вказує на момент часу, коли React почав рендеринг поточного оновлення.
  • commitTime: Числове значення, яке вказує на момент часу, коли React вніс поточне оновлення. Це значення однакове в усіх профілювачів у коміті, що дає змогу згрупувати їх за потреби.

Використання

Програмне вимірювання продуктивності рендерингу

Обгорніть компонент <Profiler> навколо React-дерева, щоб визначити продуктивність його рендеру.

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

Він потребує двох пропсів: id (стрічка) і функцію зворотного виклику onRender, яку React викличе, коли будь-який компонент всередині дерева “закомітить” (внесе) оновлення.

Будьте обачні

Примітка

<Profiler> дає вам змогу збирати показники програмно. Якщо ви шукаєте інтерактивний профілювач, спробуйте вкладку Profiler в Інструментах React розробника. Вона надає подібну функціональність як розширення для браузера.

Компоненти, обгорнуті компонентом <Profiler>, будуть також промарковані в доріжках компонентів (Component tracks) серед доріжок продуктивності React у збірці з увімкненим профілюванням. Для збірок розробника (development builds) усі компоненти будуть промарковані в доріжках компонентів незалежно від того, чи вони обгорнуті в <Profiler>.

Вимірювання продуктивності різних частин застосунку

Ви можете використовувати кілька компонентів <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>