From fb4a98b56537e83cab77a2a085c3e3b91697397b Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy Date: Wed, 4 Sep 2019 07:01:46 +0300 Subject: [PATCH] minor fixes for Profiler page --- TRANSLATION.md | 4 ++-- content/docs/reference-profiler.md | 24 +++++++++++------------- 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/TRANSLATION.md b/TRANSLATION.md index e44267851..184ae3790 100644 --- a/TRANSLATION.md +++ b/TRANSLATION.md @@ -235,8 +235,8 @@ React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). | props | пропсы *(мн. ч.)* | | production | продакшен | | production mode | продакшен-режим | -| profiling | профайлинг, профилирование | -| Profiler | Profiler *(если имеется в виду компонент Profiler)*; профайлер *(если имеется в виду инструмент для профилирования)* +| profiling | профилирование | +| Profiler | Profiler *(если имеется в виду компонент Profiler)*; профилировщик *(если имеется в виду инструмент для профилирования)* | React | React | | React element | React-элемент, элемент React | | reconciliation | согласование | diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index 47567d0bf..fe7cffb01 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -5,21 +5,21 @@ layout: docs category: Reference permalink: docs/profiler.html --- + `Profiler` измеряет то, как часто рендерится React-приложение и какова «стоимость» этого. Его задача — помочь найти медленные части приложения, которые можно оптимизировать (например, через [мемоизацию](https://ru.reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations)). > Примечание: > -> Профайлинг добавляет накладные расходы, поэтому **он отключён в [продакшен-режиме](https://ru.reactjs.org/docs/optimizing-performance.html#use-the-production-build)**. +> Профилирование добавляет накладные расходы, поэтому **оно отключёно в [продакшен-режиме](https://ru.reactjs.org/docs/optimizing-performance.html#use-the-production-build)**. > -> Для отладки на продакшене, React предоставляет специальную продакшен-сборку с включенным профайлингом. +> Для отладки на продакшене, React предоставляет специальную продакшен-сборку с включенным профилированием. > Подробнее об использовании данной сборки можно узнать на [fb.me/react-profiling](https://fb.me/react-profiling). ## Использование {#usage} `Profiler` может быть добавлен в любую часть React-дерева для измерения стоимости рендеринга этой части. -Он принимает два пропа: `id` (string) и колбэк `onRender` (function), который React вызывает каждый раз, когда -компонент внутри дерева «фиксирует» обновление. +Он принимает два пропа: `id` (string) и колбэк `onRender` (function), который React вызывает каждый раз, когда компонент внутри дерева «фиксирует» обновление. Например, так выглядит процесс профилирования компонента `Navigation` и его дочерних компонентов: @@ -68,8 +68,7 @@ render( > Примечание: > -> Несмотря на то, что компонент `Profiler` достаточно легковесный, его следует использовать только при необходимости; каждое -> его использование увеличивает нагрузку на CPU и память. +> Несмотря на то, что компонент `Profiler` достаточно легковесный, его следует использовать только при необходимости; каждое его использование увеличивает нагрузку на CPU и память. ## Колбэк `onRender` {#onrender-callback} @@ -85,23 +84,23 @@ function onRenderCallback( baseDuration, // предполагаемое время рендера всего поддерева без кеширования startTime, // когда React начал рендерить это обновление commitTime, // когда React зафиксировал это обновление - interactions // Set-набор взаимодействий для данного обновления + interactions // Множество «взаимодействий» для данного обновления ) { // Обработка или логирование результатов... } ``` + Давайте поближе рассмотрим каждый из пропсов: * **`id: string`** - Проп `id` из дерева компонента `Profiler`, для которого было зафиксировано изменение. -Может использоваться для определения той части дерева, которое было зафиксировано, если вы используете несколько профайлеров. +Может использоваться для определения той части дерева, которое было зафиксировано, если вы используете несколько профилировщиков. * **`phase: "mount" | "update"`** - Показывает, было ли дерево только что смонтировано в первый раз или повторно отрендерено в результате изменения пропсов, состояния или хуков. * **`actualDuration: number`** - Время, затраченное на рендеринг компонента `Profiler` и его дочерних компонентов для текущего обновления. Показывает насколько хорошо поддерево использует мемоизацию (например, [`React.memo`](/docs/react-api.html#reactmemo), [`useMemo`](/docs/hooks-reference.html#usememo), [`shouldComponentUpdate`](/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate)). -В идеальном случае это значение должно существенно снизиться после монтирования, так как многим из дочерних компонентов -нужно будет перерендериваться только в случае, если изменяются их специфичные пропсы. +В идеальном случае это значение должно существенно снизиться после монтирования, так как многим из дочерних компонентов нужно будет перерендериваться только в случае, если изменяются их специфичные пропсы. * **`baseDuration: number`** - Длительность самого последнего рендеринга для каждого отдельного компонента внутри дерева компонента `Profiler`. Это значение оценивает стоимость рендера в наихудшем случае (например, изначальное монтирование или дерево без мемоизации). @@ -109,10 +108,9 @@ function onRenderCallback( Временная метка, когда React начал рендерить текущее обновление. * **`commitTime: number`** - Временная метка, когда React зафиксировал текущее обновление. -Это значение доступно для всех профайлеров при фиксации, позволяя группировать их, если в этом есть необходимость. +Это значение доступно для всех профилировщиков при фиксации, позволяя группировать их, если в этом есть необходимость. * **`interactions: Set`** - -Множество ["взаимодействий"](http://fb.me/react-interaction-tracing), которые были зафиксированы во время подготовки изменения -(например, когда `render` или `setState` были вызваны). +Множество [«взаимодействий»](http://fb.me/react-interaction-tracing), которые были зафиксированы во время подготовки изменения (например, когда `render` или `setState` были вызваны). > Примечание: >