Skip to content

Commit

Permalink
minor fixes for Profiler page
Browse files Browse the repository at this point in the history
  • Loading branch information
IgorLesnevskiy committed Sep 4, 2019
1 parent f56445e commit fb4a98b
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 15 deletions.
4 changes: 2 additions & 2 deletions TRANSLATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -235,8 +235,8 @@ React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object).
| props | пропсы *(мн. ч.)* |
| production | продакшен |
| production mode | продакшен-режим |
| profiling | профайлинг, профилирование |
| Profiler | Profiler *(если имеется в виду компонент Profiler)*; профайлер *(если имеется в виду инструмент для профилирования)*
| profiling | профилирование |
| Profiler | Profiler *(если имеется в виду компонент Profiler)*; профилировщик *(если имеется в виду инструмент для профилирования)*
| React | React |
| React element | React-элемент, элемент React |
| reconciliation | согласование |
Expand Down
24 changes: 11 additions & 13 deletions content/docs/reference-profiler.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,21 @@ layout: docs
category: Reference
permalink: docs/profiler.html
---

`Profiler` измеряет то, как часто рендерится React-приложение и какова «стоимость» этого.
Его задача — помочь найти медленные части приложения, которые можно оптимизировать (например, через [мемоизацию](https://ru.reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations)).

> Примечание:
>
> Профайлинг добавляет накладные расходы, поэтому **он отключён в [продакшен-режиме](https://ru.reactjs.org/docs/optimizing-performance.html#use-the-production-build)**.
> Профилирование добавляет накладные расходы, поэтому **оно отключёно в [продакшен-режиме](https://ru.reactjs.org/docs/optimizing-performance.html#use-the-production-build)**.
>
> Для отладки на продакшене, React предоставляет специальную продакшен-сборку с включенным профайлингом.
> Для отладки на продакшене, React предоставляет специальную продакшен-сборку с включенным профилированием.
> Подробнее об использовании данной сборки можно узнать на [fb.me/react-profiling](https://fb.me/react-profiling).
## Использование {#usage}

`Profiler` может быть добавлен в любую часть React-дерева для измерения стоимости рендеринга этой части.
Он принимает два пропа: `id` (string) и колбэк `onRender` (function), который React вызывает каждый раз, когда
компонент внутри дерева «фиксирует» обновление.
Он принимает два пропа: `id` (string) и колбэк `onRender` (function), который React вызывает каждый раз, когда компонент внутри дерева «фиксирует» обновление.

Например, так выглядит процесс профилирования компонента `Navigation` и его дочерних компонентов:

Expand Down Expand Up @@ -68,8 +68,7 @@ render(

> Примечание:
>
> Несмотря на то, что компонент `Profiler` достаточно легковесный, его следует использовать только при необходимости; каждое
> его использование увеличивает нагрузку на CPU и память.
> Несмотря на то, что компонент `Profiler` достаточно легковесный, его следует использовать только при необходимости; каждое его использование увеличивает нагрузку на CPU и память.
## Колбэк `onRender` {#onrender-callback}

Expand All @@ -85,34 +84,33 @@ function onRenderCallback(
baseDuration, // предполагаемое время рендера всего поддерева без кеширования
startTime, // когда React начал рендерить это обновление
commitTime, // когда React зафиксировал это обновление
interactions // Set-набор взаимодействий для данного обновления
interactions // Множество «взаимодействий» для данного обновления
) {
// Обработка или логирование результатов...
}
```

Давайте поближе рассмотрим каждый из пропсов:

* **`id: string`** -
Проп `id` из дерева компонента `Profiler`, для которого было зафиксировано изменение.
Может использоваться для определения той части дерева, которое было зафиксировано, если вы используете несколько профайлеров.
Может использоваться для определения той части дерева, которое было зафиксировано, если вы используете несколько профилировщиков.
* **`phase: "mount" | "update"`** -
Показывает, было ли дерево только что смонтировано в первый раз или повторно отрендерено в результате изменения пропсов, состояния или хуков.
* **`actualDuration: number`** -
Время, затраченное на рендеринг компонента `Profiler` и его дочерних компонентов для текущего обновления.
Показывает насколько хорошо поддерево использует мемоизацию (например, [`React.memo`](/docs/react-api.html#reactmemo), [`useMemo`](/docs/hooks-reference.html#usememo), [`shouldComponentUpdate`](/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate)).
В идеальном случае это значение должно существенно снизиться после монтирования, так как многим из дочерних компонентов
нужно будет перерендериваться только в случае, если изменяются их специфичные пропсы.
В идеальном случае это значение должно существенно снизиться после монтирования, так как многим из дочерних компонентов нужно будет перерендериваться только в случае, если изменяются их специфичные пропсы.
* **`baseDuration: number`** -
Длительность самого последнего рендеринга для каждого отдельного компонента внутри дерева компонента `Profiler`.
Это значение оценивает стоимость рендера в наихудшем случае (например, изначальное монтирование или дерево без мемоизации).
* **`startTime: number`** -
Временная метка, когда React начал рендерить текущее обновление.
* **`commitTime: number`** -
Временная метка, когда React зафиксировал текущее обновление.
Это значение доступно для всех профайлеров при фиксации, позволяя группировать их, если в этом есть необходимость.
Это значение доступно для всех профилировщиков при фиксации, позволяя группировать их, если в этом есть необходимость.
* **`interactions: Set`** -
Множество ["взаимодействий"](http://fb.me/react-interaction-tracing), которые были зафиксированы во время подготовки изменения
(например, когда `render` или `setState` были вызваны).
Множество [«взаимодействий»](http://fb.me/react-interaction-tracing), которые были зафиксированы во время подготовки изменения (например, когда `render` или `setState` были вызваны).

> Примечание:
>
Expand Down

0 comments on commit fb4a98b

Please sign in to comment.