You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The `Profiler`measures how often a React application renders and what the "cost" of rendering is.
10
-
Its purpose is to help identify parts of an application that are slow and may benefit from [optimizations such as memoization](https://reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations).
9
+
`Profiler`измеряет то, как часто рендерится React-приложение и какова «стоимость» этого.
10
+
Его задача — помочь найти медленные части приложения, которые можно оптимизировать (например, через [мемоизацию](https://ru.reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations)).
11
11
12
-
> Note:
12
+
> Примечание:
13
13
>
14
-
> Profiling adds some additional overhead, so**it is disabled in [the production build](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build)**.
15
-
>
16
-
> To opt into production profiling, React provides a special production build with profiling enabled.
17
-
> Read more about how to use this build at [fb.me/react-profiling](https://fb.me/react-profiling)
14
+
> Профилирование добавляет накладные расходы, поэтому**оно отключёно в [продакшен-режиме](https://ru.reactjs.org/docs/optimizing-performance.html#use-the-production-build)**.
15
+
>
16
+
> Для отладки на продакшене, React предоставляет специальную продакшен-сборку с включенным профилированием.
17
+
> Подробнее об использовании данной сборки можно узнать на [fb.me/react-profiling](https://fb.me/react-profiling).
18
18
19
-
## Usage
19
+
## Использование {#usage}
20
20
21
-
A `Profiler`can be added anywhere in a React tree to measure the cost of rendering that part of the tree.
22
-
It requires two props: an `id` (string) and an`onRender`callback (function) which React calls any time a component within the tree "commits" an update.
21
+
`Profiler`может быть добавлен в любую часть React-дерева для измерения стоимости рендеринга этой части.
22
+
Он принимает два пропа: `id` (string) и колбэк`onRender` (function), который React вызывает каждый раз, когда компонент внутри дерева «фиксирует» обновление.
23
23
24
-
For example, to profile a `Navigation`component and its descendants:
24
+
Например, так выглядит процесс профилирования компонента `Navigation`и его дочерних компонентов:
25
25
26
26
```js{3}
27
27
render(
@@ -34,7 +34,7 @@ render(
34
34
);
35
35
```
36
36
37
-
Multiple `Profiler` components can be used to measure different parts of an application:
37
+
Для замера разных частей приложения могут быть использованы несколько компонентов `Profiler`:
38
38
```js{3,6}
39
39
render(
40
40
<App>
@@ -48,7 +48,7 @@ render(
48
48
);
49
49
```
50
50
51
-
`Profiler`components can also be nested to measure different components within the same subtree:
51
+
Также `Profiler`может быть вложенным, с целью замера разных компонентов внутри поддерева:
52
52
```js{2,6,8}
53
53
render(
54
54
<App>
@@ -66,54 +66,54 @@ render(
66
66
);
67
67
```
68
68
69
-
> Note
69
+
> Примечание:
70
70
>
71
-
> Although `Profiler`is a light-weight component, it should be used only when necessary; each use adds some CPU and memory overhead to an application.
71
+
> Несмотря на то, что компонент `Profiler`достаточно легковесный, его следует использовать только при необходимости; каждое его использование увеличивает нагрузку на CPU и память.
72
72
73
-
## `onRender`Callback
73
+
## Колбэк `onRender`{#onrender-callback}
74
74
75
-
The `Profiler`requires an`onRender`function as a prop.
76
-
React calls this function any time a component within the profiled tree "commits" an update.
77
-
It receives parameters describing what was rendered and how long it took.
75
+
`Profiler`принимает функцию`onRender`в качестве пропа.
76
+
React вызывает эту функцию каждый раз, когда компонент внутри профилируемого дерева «фиксирует» изменение.
77
+
Эта функция принимает параметры, которые описывают что было отрендерено и сколько времени это заняло.
78
78
79
79
```js
80
80
functiononRenderCallback(
81
-
id, //the "id" prop of the Profiler tree that has just committed
82
-
phase, //either "mount" (if the tree just mounted) or "update" (if it re-rendered)
83
-
actualDuration, //time spent rendering the committed update
84
-
baseDuration, //estimated time to render the entire subtree without memoization
85
-
startTime, //when React began rendering this update
86
-
commitTime, //when React committed this update
87
-
interactions//the Set of interactions belonging to this update
81
+
id, //проп "id" из дерева компонента Profiler, для которого было зафиксировано изменение
82
+
phase, //либо "mount" (если дерево было смонтировано), либо "update" (если дерево было повторно отрендерено)
83
+
actualDuration, //время, затраченное на рендер зафиксированного обновления
84
+
baseDuration, //предполагаемое время рендера всего поддерева без кеширования
85
+
startTime, //когда React начал рендерить это обновление
86
+
commitTime, //когда React зафиксировал это обновление
87
+
interactions//Множество «взаимодействий» для данного обновления
88
88
) {
89
-
//Aggregate or log render timings...
89
+
//Обработка или логирование результатов...
90
90
}
91
91
```
92
92
93
-
Let's take a closer look at each of the props:
93
+
Давайте поближе рассмотрим каждый из пропсов:
94
94
95
95
***`id: string`** -
96
-
The`id`prop of the`Profiler` tree that has just committed.
97
-
This can be used to identify which part of the tree was committed if you are using multiple profilers.
96
+
Проп`id`из дерева компонента`Profiler`, для которого было зафиксировано изменение.
97
+
Может использоваться для определения той части дерева, которое было зафиксировано, если вы используете несколько профилировщиков.
98
98
***`phase: "mount" | "update"`** -
99
-
Identifies whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
99
+
Показывает, было ли дерево только что смонтировано в первый раз или повторно отрендерено в результате изменения пропсов, состояния или хуков.
100
100
***`actualDuration: number`** -
101
-
Time spent rendering the `Profiler`and its descendants for the current update.
102
-
This indicates how well the subtree makes use of memoization (e.g.[`React.memo`](/docs/react-api.html#reactmemo), [`useMemo`](/docs/hooks-reference.html#usememo), [`shouldComponentUpdate`](/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate)).
103
-
Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
101
+
Время, затраченное на рендеринг компонента `Profiler`и его дочерних компонентов для текущего обновления.
102
+
Показывает насколько хорошо поддерево использует мемоизацию (например,[`React.memo`](/docs/react-api.html#reactmemo), [`useMemo`](/docs/hooks-reference.html#usememo), [`shouldComponentUpdate`](/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate)).
103
+
В идеальном случае это значение должно существенно снизиться после монтирования, так как многим из дочерних компонентов нужно будет перерендериваться только в случае, если изменяются их специфичные пропсы.
104
104
***`baseDuration: number`** -
105
-
Duration of the most recent `render` time for each individual component within the `Profiler` tree.
106
-
This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization).
105
+
Длительность самого последнего рендеринга для каждого отдельного компонента внутри дерева компонента `Profiler`.
106
+
Это значение оценивает стоимость рендера в наихудшем случае (например, изначальное монтирование или дерево без мемоизации).
107
107
***`startTime: number`** -
108
-
Timestamp when React began rendering the current update.
108
+
Временная метка, когда React начал рендерить текущее обновление.
109
109
***`commitTime: number`** -
110
-
Timestamp when React committed the current update.
111
-
This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
110
+
Временная метка, когда React зафиксировал текущее обновление.
111
+
Это значение доступно для всех профилировщиков при фиксации, позволяя группировать их, если в этом есть необходимость.
112
112
***`interactions: Set`** -
113
-
Set of ["interactions"](http://fb.me/react-interaction-tracing) that were being traced the update was scheduled (e.g. when`render`or`setState`were called).
113
+
Множество [«взаимодействий»](http://fb.me/react-interaction-tracing), которые были зафиксированы во время подготовки изменения (например, когда`render`или`setState`были вызваны).
114
114
115
-
> Note
115
+
> Примечание:
116
116
>
117
-
> Interactions can be used to identify the cause of an update, although the API for tracing them is still experimental.
117
+
> Взаимодействия могут быть использованы для установки причины обновления, хотя API для их отслеживания все еще экспериментальное.
118
118
>
119
-
> Learn more about it at[fb.me/react-interaction-tracing](http://fb.me/react-interaction-tracing)
119
+
> Вы можете узнать подробнее на[fb.me/react-interaction-tracing](http://fb.me/react-interaction-tracing).
0 commit comments