Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Finished translation of Profiler page #564

Merged
merged 2 commits into from
Sep 29, 2024
Merged

Finished translation of Profiler page #564

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2dacc43
Finished translatio of Profiler page
GeorgeShvab Sep 1, 2024
cd46f61
Update src/content/reference/react/Profiler.md
alinkedd Sep 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 28 additions & 28 deletions src/content/reference/react/Profiler.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: <Profiler>

<Intro>

`<Profiler>` lets you measure rendering performance of a React tree programmatically.
`<Profiler>` дає вам змогу програмно вимірювати продуктивність рендеру React-дерева.

```js
<Profiler id="App" onRender={onRender}>
Expand All @@ -18,55 +18,55 @@ title: <Profiler>

---

## Reference {/*reference*/}
## Опис {/*reference*/}

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

Wrap a component tree in a `<Profiler>` to measure its rendering performance.
Обгорніть дерево компонентів у `<Profiler>`, щоб виміряти продуктивність його рендеру.

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

#### Props {/*props*/}
#### Пропси {/*props*/}

* `id`: A string identifying the part of the UI you are measuring.
* `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.
* `id`: Стрічковий ідентифікатор тієї частини UI, продуктивність якої ви вимірюєте.
* `onRender`: [Функція зворотного виклику `onRender`](#onrender-callback), яку React викликає щоразу, коли компоненти всередині профільованого дерева оновлюються. Вона отримує інформацію про те, що було відрендерено і скільки часу це зайняло.

#### Caveats {/*caveats*/}
#### Застереження {/*caveats*/}

* 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)
* Профілювання створює додаткове навантаження, тому **початково воно вимкнене у збірці для впровадження (production).** Щоб профілювати у публічному середовищі, потрібно скористатися [спеціальною збіркою для впровадження з увімкненим профілюванням.](https://fb.me/react-profiling)

---

### `onRender` callback {/*onrender-callback*/}
### Функція зворотного виклику `onRender` {/*onrender-callback*/}

React will call your `onRender` callback with information about what was rendered.
React викличе вашу функцію зворотного виклику `onRender` з інформацією про те, що було відрендерено.

```js
function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
// Aggregate or log render timings...
// Зберіть або виведіть дані про тривалість рендеру...
}
```

#### Parameters {/*onrender-parameters*/}
#### Параметри {/*onrender-parameters*/}

* `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.
* `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.
* `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.
* `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.
* `startTime`: A numeric timestamp for when React began rendering the current update.
* `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.
* `id`: Стрічковий проп `id` дерева `<Profiler>`, яке щойно було внесено (committed). Він дає вам змогу визначити, яку саме частину дерева було внесено, якщо ви використовуєте кілька профілювачів.
* `phase`: `"mount"`, `"update"` або `"nested-update"`. Дає змогу дізнатися, чи дерево було щойно змонтовано вперше або ж рендерено повторно через зміни в стані, пропсах чи хуках.
* `actualDuration`: Кількість мілісекунд, витрачених на рендеринг компонента `<Profiler>` і його дочірніх компонентів під час поточного оновлення. Вказує на те, наскільки ефективно піддерево використовує мемоїзацію (наприклад, [`memo`](/reference/react/memo) і [`useMemo`](/reference/react/useMemo)). В ідеалі, це значення повинно значно зменшитися після першого монтування, оскільки багато з дочірніх компонентів буде перерендерюватися лише за зміни пропсів.
* `baseDuration`: Кількість мілісекунд, яка відображає, скільки часу займе повторний рендер усього піддерева компонента `<Profiler>` без будь-якої оптимізації. Це значення розраховується як сума часу останніх рендерів кожного компонента в дереві. Воно показує найгірший сценарій рендерингу (наприклад, перше монтування або дерево без мемоїзації). Порівняйте `actualDuration` з ним, щоби перевірити, чи працює мемоїзація.
* `startTime`: Числове значення, яке вказує на момент часу, коли React почав рендеринг поточного оновлення.
* `commitTime`: Числове значення, яке вказує на момент часу, коли React вніс поточне оновлення. Це значення однакове в усіх профілювачів у коміті, що дає змогу згрупувати їх за потреби.

---

## Usage {/*usage*/}
## Використання {/*usage*/}

### Measuring rendering performance programmatically {/*measuring-rendering-performance-programmatically*/}
### Програмне вимірювання продуктивності рендерингу {/*measuring-rendering-performance-programmatically*/}

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

```js {2,4}
<App>
Expand All @@ -77,25 +77,25 @@ Wrap the `<Profiler>` component around a React tree to measure its rendering per
</App>
```

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.
Він потребує двох пропсів: `id` (стрічка) і функцію зворотного виклику `onRender`, яку React викличе, коли будь-який компонент всередині дерева "закомітить" (внесе) оновлення.

<Pitfall>

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)
* Профілювання створює додаткове навантаження, тому **початково воно вимкнене у збірці для впровадження (production).** Щоб профілювати у публічному середовищі, потрібно скористатися [спеціальною збіркою для впровадження з увімкненим профілюванням.](https://fb.me/react-profiling)

</Pitfall>

<Note>

`<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.
`<Profiler>` дає вам змогу збирати показники програмно. Якщо ви шукаєте інтерактивний профілювач, спробуйте вкладку Profiler в [Інструментах React розробника](/learn/react-developer-tools). Вона надає подібний функціонал як розширення для браузера.

</Note>

---

### Measuring different parts of the application {/*measuring-different-parts-of-the-application*/}
### Вимірювання продуктивності різних частин застосунку {/*measuring-different-parts-of-the-application*/}

You can use multiple `<Profiler>` components to measure different parts of your application:
Ви можете використовувати кілька компонентів `<Profiler>`, щоб виміряти продуктивність різних частин вашого застосунку:

```js {5,7}
<App>
Expand All @@ -108,7 +108,7 @@ You can use multiple `<Profiler>` components to measure different parts of your
</App>
```

You can also nest `<Profiler>` components:
Ви також можете вкладувати компоненти `<Profiler>`:

```js {5,7,9,12}
<App>
Expand All @@ -126,7 +126,7 @@ You can also nest `<Profiler>` components:
</App>
```

Although `<Profiler>` is a lightweight component, it should be used only when necessary. Each use adds some CPU and memory overhead to an application.
Хоча `<Profiler>` є легким компонентом, його слід використовувати лише за необхідності. Кожне його використання додає певне навантаження на CPU та пам'ять вашого застосунку.

---

Loading