<Profiler>

Довідник

<Profiler>

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

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

Пропси

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

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

• Профілювання додає додаткових накладних витрат, тому його вимкнено у виробничій збірці за замовчуванням. Щоб увімкнути виробниче профілювання, вам слід увімкнути спеціальну виробничу збірку з увімкненим профілюванням.

onRender зворотний виклик

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

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

Параметри

• id: Рядок id реквізиту дерева <Profiler>, який щойно було зафіксовано. Це дозволить вам визначити, яку частину дерева було зафіксовано, якщо ви використовуєте декілька профайлерів.
• 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 callback (функція), яку 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> є легким компонентом, його слід використовувати лише за необхідності. Кожне його використання збільшує навантаження на процесор та пам'ять програми.