<Profiler>

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

• Справочник
  • <Profiler>
  • onRender обратный вызов
• Использование
  • Программно измерять производительность отрисовки
  • Измерение различных частей приложения

Справочник

<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 обратный вызов (функция), который 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> — это лёгкий компонент, его следует использовать только при необходимости. Каждое использование добавляет некоторую дополнительную нагрузку на ЦП и память приложения.