From 16747aa82ea05c3e24ccc79382ac10d20c119c9f Mon Sep 17 00:00:00 2001 From: Heorhii Shvab Date: Sun, 1 Sep 2024 12:09:07 +0300 Subject: [PATCH] Finished translation of Profiler page --- src/content/reference/react/Profiler.md | 56 ++++++++++++------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 188b2d1b2..d3071f780 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -4,7 +4,7 @@ title: -`` lets you measure rendering performance of a React tree programmatically. +`` дозволяє вам програмно вимірювати продуктивність рендеру React-дерева. ```js @@ -18,11 +18,11 @@ title: --- -## Reference {/*reference*/} +## Опис {/*reference*/} ### `` {/*profiler*/} -Wrap a component tree in a `` to measure its rendering performance. +Обгорніть дерево компонентів у ``, щоб виміряти продуктивність його рендеру. ```js @@ -30,43 +30,43 @@ Wrap a component tree in a `` to measure its rendering performance. ``` -#### 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) +* Профілювання створює додаткове навантаження, тому **воно вимкнене в продакшн-збірці за замовчуванням.** Щоб увімкнути продакшн-профілювання, потрібно скористатися [спеціальною продакшн-збіркою з профілюванням.](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 `` 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 `` 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 `` 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` проп дерева ``, яке щойно було закомічено. Він дозволяє вам визначити, яку частину дерева було закомічено, якщо ви використовуєте кілька профілювачів. +* `phase`: `"mount"`, `"update"` або `"nested-update"`. Дає змогу дізнатися, чи дерево було щойно змонтовано вперше, або ж перерендерено через зміни в стані, пропсах чи хуках. +* `actualDuration`: Кількість мілісекунд, витрачених на рендеринг компонента `` і його дочірніх компонентів під час поточного оновлення. Вказуєте на те, наскільки ефективно субдерево використовує мемоїзацію (наприклад, [`memo`](/reference/react/memo) і [`useMemo`](/reference/react/useMemo)). В ідеалі, це значення повинно значно зменшитися після першого монтування, оскільки багато з дочірніх компонентів будуть перерендерюватися лише за зміни пропсів. +* `baseDuration`: Кількість мілісекунд, яка відображає, скільки часу займе повторний рендер усього субдерева компонента `` без будь-якої оптимізації. Це значення розраховується як сума часу останніх рендерів кожного компонента в дереві. Воно показує найгірший сценарій рендерингу (наприклад, перше монтування або дерево без мемоїзації). Порівняйте `actualDuration` з ним, щоби перевірити, чи працює мемоїзація. +* `startTime`: Числове значення, яке вказує на момент часу, коли React почав рендеринг поточного оновлення. +* `commitTime`: Числове значення, яке вказує на момент часу, коли React закомітив поточне оновлення. Це значення однакове в усіх профілювачів у коміті, що дає змогу згрупувати їх за потреби. --- -## Usage {/*usage*/} +## Використання {/*usage*/} -### Measuring rendering performance programmatically {/*measuring-rendering-performance-programmatically*/} +### Програмне вимірювання продуктивності рендерингу {/*measuring-rendering-performance-programmatically*/} -Wrap the `` component around a React tree to measure its rendering performance. +Обгорніть компонент `` навколо React-дерева, щоб визначити продуктивність його рендеру. ```js {2,4} @@ -77,25 +77,25 @@ Wrap the `` component around a React tree to measure its rendering per ``` -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 викличе, коли будь-який компонент всередині дерева "закомітить" оновлення. -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) -`` 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 у [Інструментах React розробника](/learn/react-developer-tools). Вона надає подібний функціонал у вигляді розширення для браузера. --- -### Measuring different parts of the application {/*measuring-different-parts-of-the-application*/} +### Вимірювання продуктивності різних частин застосунку {/*measuring-different-parts-of-the-application*/} -You can use multiple `` components to measure different parts of your application: +Ви можете використовувати кілька компонентів ``, щоб виміряти продуктивність різних частин вашого застосунку: ```js {5,7} @@ -108,7 +108,7 @@ You can use multiple `` components to measure different parts of your ``` -You can also nest `` components: +Ви також можете вкладувати компоненти ``: ```js {5,7,9,12} @@ -126,7 +126,7 @@ You can also nest `` components: ``` -Although `` is a lightweight component, it should be used only when necessary. Each use adds some CPU and memory overhead to an application. +Хоча `` є легким компонентом, його слід використовувати лише за необхідності. Кожне його використання додає певне навантаження на CPU та пам’ять вашого застосунку. ---