Skip to content

Commit 0196431

Browse files
docs: translate Profiler.md to Русский
1 parent 2958f53 commit 0196431

1 file changed

Lines changed: 28 additions & 27 deletions

File tree

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
```md
12
---
23
title: <Profiler>
34
---
45

56
<Intro>
67

7-
`<Profiler>` lets you measure rendering performance of a React tree programmatically.
8+
`<Profiler>` позволяет программно измерять производительность рендеринга дерева React.
89

910
```js
1011
<Profiler id="App" onRender={onRender}>
@@ -18,11 +19,11 @@ title: <Profiler>
1819

1920
---
2021

21-
## Reference {/*reference*/}
22+
## Справочник {/*reference*/}
2223

2324
### `<Profiler>` {/*profiler*/}
2425

25-
Wrap a component tree in a `<Profiler>` to measure its rendering performance.
26+
Оберните дерево компонентов в `<Profiler>`, чтобы измерить его производительность рендеринга.
2627

2728
```js
2829
<Profiler id="App" onRender={onRender}>
@@ -32,41 +33,41 @@ Wrap a component tree in a `<Profiler>` to measure its rendering performance.
3233

3334
#### Props {/*props*/}
3435

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 вызывает каждый раз, когда компоненты внутри профилируемого дерева обновляются. Он получает информацию о том, что было отрисовано и сколько времени это заняло.
3738

38-
#### Caveats {/*caveats*/}
39+
#### Ограничения {/*caveats*/}
3940

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)
4142

4243
---
4344

4445
### `onRender` callback {/*onrender-callback*/}
4546

46-
React will call your `onRender` callback with information about what was rendered.
47+
React вызовет ваш `onRender` callback с информацией о том, что было отрисовано.
4748

4849
```js
4950
function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
50-
// Aggregate or log render timings...
51+
// Агрегируйте или записывайте время рендеринга...
5152
}
5253
```
5354

54-
#### Parameters {/*onrender-parameters*/}
55+
#### Параметры {/*onrender-parameters*/}
5556

56-
* `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 зафиксировал текущее обновление. Это значение совместно используется всеми профилировщиками в фиксации, что позволяет группировать их при необходимости.
6263

6364
---
6465

65-
## Usage {/*usage*/}
66+
## Использование {/*usage*/}
6667

67-
### Measuring rendering performance programmatically {/*measuring-rendering-performance-programmatically*/}
68+
### Программное измерение производительности рендеринга {/*measuring-rendering-performance-programmatically*/}
6869

69-
Wrap the `<Profiler>` component around a React tree to measure its rendering performance.
70+
Оберните компонент `<Profiler>` вокруг дерева React, чтобы измерить его производительность рендеринга.
7071

7172
```js {2,4}
7273
<App>
@@ -77,25 +78,25 @@ Wrap the `<Profiler>` component around a React tree to measure its rendering per
7778
</App>
7879
```
7980

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 вызывает всякий раз, когда компонент в дереве "фиксирует" обновление.
8182

8283
<Pitfall>
8384

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)
8586

8687
</Pitfall>
8788

8889
<Note>
8990

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). Она предоставляет аналогичную функциональность в виде расширения браузера.
9192

9293
</Note>
9394

9495
---
9596

96-
### Measuring different parts of the application {/*measuring-different-parts-of-the-application*/}
97+
### Измерение различных частей приложения {/*measuring-different-parts-of-the-application*/}
9798

98-
You can use multiple `<Profiler>` components to measure different parts of your application:
99+
Вы можете использовать несколько компонентов `<Profiler>` для измерения различных частей вашего приложения:
99100

100101
```js {5,7}
101102
<App>
@@ -108,7 +109,7 @@ You can use multiple `<Profiler>` components to measure different parts of your
108109
</App>
109110
```
110111

111-
You can also nest `<Profiler>` components:
112+
Вы также можете вкладывать компоненты `<Profiler>` друг в друга:
112113

113114
```js {5,7,9,12}
114115
<App>
@@ -126,7 +127,7 @@ You can also nest `<Profiler>` components:
126127
</App>
127128
```
128129

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>` является легковесным компонентом, его следует использовать только при необходимости. Каждое его использование добавляет некоторую нагрузку на процессор и память приложения.
130131

131132
---
132-
133+
```

0 commit comments

Comments
 (0)