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
`<Profiler>`lets you measure rendering performance of a React tree programmatically.
8
+
`<Profiler>`позволяет программно измерять производительность рендеринга дерева React.
8
9
9
10
```js
10
11
<Profiler id="App" onRender={onRender}>
@@ -18,11 +19,11 @@ title: <Profiler>
18
19
19
20
---
20
21
21
-
## Reference {/*reference*/}
22
+
## Справочник {/*reference*/}
22
23
23
24
### `<Profiler>` {/*profiler*/}
24
25
25
-
Wrap a component tree in a `<Profiler>` to measure its rendering performance.
26
+
Оберните дерево компонентов в `<Profiler>`, чтобы измерить его производительность рендеринга.
26
27
27
28
```js
28
29
<Profiler id="App" onRender={onRender}>
@@ -32,41 +33,41 @@ Wrap a component tree in a `<Profiler>` to measure its rendering performance.
32
33
33
34
#### Props {/*props*/}
34
35
35
-
*`id`: A string identifying the part of the UI you are measuring.
36
-
*`onRender`: An [`onRender` callback](#onrender-callback) that React calls every time components within the profiled tree update. It receives information about what was rendered and how much time it took.
36
+
*`id`: Строка, идентифицирующая измеряемую часть пользовательского интерфейса.
37
+
*`onRender`: [`onRender` callback](#onrender-callback), который React вызывает каждый раз, когда компоненты внутри профилируемого дерева обновляются. Он получает информацию о том, что было отрисовано и сколько времени это заняло.
37
38
38
-
#### Caveats {/*caveats*/}
39
+
#### Ограничения {/*caveats*/}
39
40
40
-
*Profiling adds some additional overhead, so**it is disabled in the production build by default.**To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling)
41
+
*Профилирование добавляет некоторую дополнительную нагрузку, поэтому**по умолчанию оно отключено в продакшен-сборке.**Чтобы включить профилирование в продакшен-сборке, вам нужно включить [специальную продакшен-сборку с включенным профилированием.](https://fb.me/react-profiling)
41
42
42
43
---
43
44
44
45
### `onRender` callback {/*onrender-callback*/}
45
46
46
-
React will call your `onRender` callback with information about what was rendered.
47
+
React вызовет ваш `onRender` callback с информацией о том, что было отрисовано.
*`id`: The string `id`prop of the `<Profiler>` tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers.
57
-
*`phase`: `"mount"`, `"update"`or`"nested-update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or Hooks.
58
-
*`actualDuration`: The number of milliseconds spent rendering the `<Profiler>`and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g.[`memo`](/reference/react/memo)and[`useMemo`](/reference/react/useMemo)). 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.
59
-
*`baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `<Profiler>`subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare`actualDuration`against it to see if memoization is working.
60
-
*`startTime`: A numeric timestamp for when React began rendering the current update.
61
-
*`commitTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
57
+
*`id`: Строковое значение пропса `id`дерева `<Profiler>`, которое только что зафиксировалось. Это позволяет вам определить, какая часть дерева была зафиксирована, если вы используете несколько профилировщиков.
58
+
*`phase`: `"mount"`, `"update"`или`"nested-update"`. Это позволяет узнать, было ли дерево смонтировано впервые или перерисовано из-за изменения пропсов, состояния или хуков.
59
+
*`actualDuration`: Количество миллисекунд, потраченное на рендеринг `<Profiler>`и его потомков для текущего обновления. Это показывает, насколько эффективно поддерево использует мемоизацию (например,[`memo`](/reference/react/memo)и[`useMemo`](/reference/react/useMemo)). В идеале это значение должно значительно уменьшиться после первоначального монтирования, поскольку многие потомки будут перерисовываться только в том случае, если их конкретные пропсы изменятся.
60
+
*`baseDuration`: Количество миллисекунд, оценивающее, сколько времени потребуется для повторного рендеринга всего поддерева `<Profiler>`без каких-либо оптимизаций. Оно рассчитывается путем суммирования последних длительностей рендеринга каждого компонента в дереве. Это значение оценивает наихудшую стоимость рендеринга (например, первоначальное монтирование или дерево без мемоизации). Сравните`actualDuration`с ним, чтобы увидеть, работает ли мемоизация.
61
+
*`startTime`: Числовой временной штамп, когда React начал рендеринг текущего обновления.
62
+
*`commitTime`: Числовой временной штамп, когда React зафиксировал текущее обновление. Это значение совместно используется всеми профилировщиками в фиксации, что позволяет группировать их при необходимости.
Wrap the`<Profiler>`component around a React tree to measure its rendering performance.
70
+
Оберните компонент`<Profiler>`вокруг дерева React, чтобы измерить его производительность рендеринга.
70
71
71
72
```js {2,4}
72
73
<App>
@@ -77,25 +78,25 @@ Wrap the `<Profiler>` component around a React tree to measure its rendering per
77
78
</App>
78
79
```
79
80
80
-
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.
81
+
Он требует два пропса: `id` (строка) и `onRender` callback (функция), который React вызывает всякий раз, когда компонент в дереве "фиксирует" обновление.
81
82
82
83
<Pitfall>
83
84
84
-
Profiling adds some additional overhead, so**it is disabled in the production build by default.**To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling)
85
+
Профилирование добавляет некоторую дополнительную нагрузку, поэтому**по умолчанию оно отключено в продакшен-сборке.**Чтобы включить профилирование в продакшен-сборке, вам нужно включить [специальную продакшен-сборку с включенным профилированием.](https://fb.me/react-profiling)
85
86
86
87
</Pitfall>
87
88
88
89
<Note>
89
90
90
-
`<Profiler>`lets you gather measurements programmatically. If you're looking for an interactive profiler, try the Profiler tab in [React Developer Tools](/learn/react-developer-tools). It exposes similar functionality as a browser extension.
91
+
`<Profiler>`позволяет собирать измерения программно. Если вы ищете интерактивный профилировщик, попробуйте вкладку Profiler в [React Developer Tools](/learn/react-developer-tools). Она предоставляет аналогичную функциональность в виде расширения браузера.
91
92
92
93
</Note>
93
94
94
95
---
95
96
96
-
### Measuring different parts of the application {/*measuring-different-parts-of-the-application*/}
97
+
### Измерение различных частей приложения {/*measuring-different-parts-of-the-application*/}
97
98
98
-
You can use multiple `<Profiler>`components to measure different parts of your application:
99
+
Вы можете использовать несколько компонентов `<Profiler>`для измерения различных частей вашего приложения:
99
100
100
101
```js {5,7}
101
102
<App>
@@ -108,7 +109,7 @@ You can use multiple `<Profiler>` components to measure different parts of your
108
109
</App>
109
110
```
110
111
111
-
You can also nest `<Profiler>`components:
112
+
Вы также можете вкладывать компоненты `<Profiler>`друг в друга:
112
113
113
114
```js {5,7,9,12}
114
115
<App>
@@ -126,7 +127,7 @@ You can also nest `<Profiler>` components:
126
127
</App>
127
128
```
128
129
129
-
Although`<Profiler>`is a lightweight component, it should be used only when necessary. Each use adds some CPU and memory overhead to an application.
130
+
Хотя`<Profiler>`является легковесным компонентом, его следует использовать только при необходимости. Каждое его использование добавляет некоторую нагрузку на процессор и память приложения.
0 commit comments