-
Notifications
You must be signed in to change notification settings - Fork 116
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.
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
Finished translation of Profiler page #564
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -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}> | ||||||
|
@@ -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, продуктивність якої ви вимірюєте. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
* `onRender`: [Функція зворотного виклику `onRender`](#onrender-callback), яку React викликає кожного разу, коли компоненти всередині профільованого дерева оновлюються. Вона отримує інформацію про те, що було відрендерено і скільки часу це зайняло. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
#### 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) | ||||||
* Профілювання створює додаткове навантаження, тому **воно вимкнене в продакшн-збірці за замовчуванням.** Щоб увімкнути продакшн-профілювання, потрібно скористатися [спеціальною продакшн-збіркою з профілюванням.](https://fb.me/react-profiling) | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
--- | ||||||
|
||||||
### `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>`, яке щойно було закомічено. Він дозволяє вам визначити, яку частину дерева було закомічено, якщо ви використовуєте кілька профілювачів. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
* `phase`: `"mount"`, `"update"` або `"nested-update"`. Дає змогу дізнатися, чи дерево було щойно змонтовано вперше, або ж перерендерено через зміни в стані, пропсах чи хуках. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
* `actualDuration`: Кількість мілісекунд, витрачених на рендеринг компонента `<Profiler>` і його дочірніх компонентів під час поточного оновлення. Вказуєте на те, наскільки ефективно субдерево використовує мемоїзацію (наприклад, [`memo`](/reference/react/memo) і [`useMemo`](/reference/react/useMemo)). В ідеалі, це значення повинно значно зменшитися після першого монтування, оскільки багато з дочірніх компонентів будуть перерендерюватися лише за зміни пропсів. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
якщо підмет - це збірне слово з додатками, то присудок узгоджується саме з підметом, а не з додатками: багато буде, а не багато будуть |
||||||
* `baseDuration`: Кількість мілісекунд, яка відображає, скільки часу займе повторний рендер усього субдерева компонента `<Profiler>` без будь-якої оптимізації. Це значення розраховується як сума часу останніх рендерів кожного компонента в дереві. Воно показує найгірший сценарій рендерингу (наприклад, перше монтування або дерево без мемоїзації). Порівняйте `actualDuration` з ним, щоби перевірити, чи працює мемоїзація. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
* `startTime`: Числове значення, яке вказує на момент часу, коли React почав рендеринг поточного оновлення. | ||||||
* `commitTime`: Числове значення, яке вказує на момент часу, коли React закомітив поточне оновлення. Це значення однакове в усіх профілювачів у коміті, що дає змогу згрупувати їх за потреби. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
--- | ||||||
|
||||||
## 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> | ||||||
|
@@ -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 викличе, коли будь-який компонент всередині дерева "закомітить" оновлення. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
<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) | ||||||
* Профілювання створює додаткове навантаження, тому **воно вимкнене в продакшн-збірці за замовчуванням.** Щоб увімкнути продакшн-профілювання, потрібно скористатися [спеціальною продакшн-збіркою з профілюванням.](https://fb.me/react-profiling) | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
</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). Вона надає подібний функціонал у вигляді розширення для браузера. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
</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> | ||||||
|
@@ -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> | ||||||
|
@@ -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 та пам’ять вашого застосунку. | ||||||
|
||||||
--- | ||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
https://onlinecorrector.com.ua/uk/%D0%B4%D0%B0%D0%B2%D0%B0%D1%82%D0%B8-%D0%B7%D0%BC%D0%BE%D0%B3%D1%83-%D0%BD%D0%B0%D0%B3%D0%BE%D0%B4%D1%83/