From 415d220a912868e3f6734b1f19e4a4d10b896f61 Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy Date: Sat, 24 Aug 2019 14:15:33 +0300 Subject: [PATCH 01/23] profiler translation --- content/docs/reference-profiler.md | 94 +++++++++++++++--------------- 1 file changed, 48 insertions(+), 46 deletions(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index 58a9e41c9..ce63dd6c9 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -1,27 +1,27 @@ --- id: profiler -title: Profiler API +title: API для работы с профайлером layout: docs category: Reference permalink: docs/profiler.html --- +`Profiler` измеряет то, как часто рендерится React-приложение и какова "стоимость" этого. +Его задача — помочь найти медленные части приложения, которые можно оптимизировать (например, через [кэширование](https://ru.reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations)). -The `Profiler` measures how often a React application renders and what the "cost" of rendering is. -Its purpose is to help identify parts of an application that are slow and may benefit from [optimizations such as memoization](https://reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations). - -> Note: -> -> Profiling adds some additional overhead, so **it is disabled in [the production build](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build)**. +> Примечание: > -> To opt into production profiling, React provides a special production build with profiling enabled. -> Read more about how to use this build at [fb.me/react-profiling](https://fb.me/react-profiling) +> Профайлинг увеличивает нагрузку на систему, поэтому **он отключен в [продакшен-режиме](https://ru.reactjs.org/docs/optimizing-performance.html#use-the-production-build)**. +> +> Для отладки на продакшене, React предоставляет специльную продакшен-сборку с включенным профайлингом. +> Узнать больше про то, как пользоваться этой сборкой, вы можете по [данной ссылке](https://fb.me/react-profiling). -## Usage +## Использование -A `Profiler` can be added anywhere in a React tree to measure the cost of rendering that part of the tree. -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. +`Profiler` может быть добавлен в любую часть React-дерева для измерения стоимости рендеринга этой части. +Он принимает два пропса: `id` (string) и колбэк `onRender` (function), который React вызывает каждый раз, когда +компонент внутри дерева "фиксирует" обновление. -For example, to profile a `Navigation` component and its descendants: +Например, так выглядит процесс профилирования компонента `Navigation` и его дочерних компонентов: ```js{3} render( @@ -34,7 +34,7 @@ render( ); ``` -Multiple `Profiler` components can be used to measure different parts of an application: +Для замера разных частей приложения могут быть использованы несколько компонентов `Profiler`: ```js{3,6} render( @@ -48,7 +48,7 @@ render( ); ``` -`Profiler` components can also be nested to measure different components within the same subtree: +Также, `Profiler` можно использовать во вложенности, с целью замера разных компонентов внутри поддерева: ```js{2,6,8} render( @@ -66,54 +66,56 @@ render( ); ``` -> Note +> Примечание: > -> Although `Profiler` is a light-weight component, it should be used only when necessary; each use adds some CPU and memory overhead to an application. +> Несмотря на то, что компонент `Profiler` достаточно легковесный, его следует использовать только при необходимости; каждое +> его использование увеличивает нагрузку на CPU и память. -## `onRender` Callback +## Колбэк `onRender` -The `Profiler` requires an `onRender` function as a prop. -React calls this function any time a component within the profiled tree "commits" an update. -It receives parameters describing what was rendered and how long it took. +`Profiler` принимает функцию `onRender` в качестве пропа. +React вызывает эту функцию каждый раз, когда компонент внутри профилируемого дерева "фиксирует" изменение. +В качестве аргументов прилетают значения, которые описывают то, что было отрендерено и сколько времени это заняло. ```js function onRenderCallback( - id, // the "id" prop of the Profiler tree that has just committed - phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered) - actualDuration, // time spent rendering the committed update - baseDuration, // estimated time to render the entire subtree without memoization - startTime, // when React began rendering this update - commitTime, // when React committed this update - interactions // the Set of interactions belonging to this update + id, // проп "id" из дерева компонента Profiler, для которого было зафиксировано изменение + phase, // либо "mount" (если дерево было смонтировано), либо "update" (если дерево было вновь отрендерено) + actualDuration, // время, затраченное на рендер зафиксированного изменения + baseDuration, // рассчитанное время рендера всего поддерева без кэширования + startTime, // когда React начал рендерить это обновление + commitTime, // когда React зафиксировал это обновление + interactions // Set-набор взаимодействий для данного обновления ) { - // Aggregate or log render timings... + // Обработка или логирование результатов... } ``` - -Let's take a closer look at each of the props: +Давайте поближе рассмотрим каждый из пропсов: * **`id: string`** - -The `id` prop of the `Profiler` tree that has just committed. -This can be used to identify which part of the tree was committed if you are using multiple profilers. +проп `id` из дерева компонента `Profiler`, для которого было зафиксировано изменение. +Может быть использован для того, что бы определить ту часть дерева, для который были зафиксированы изменения (если вы используете несколько профайлеров). * **`phase: "mount" | "update"`** - -Identifies whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks. +показывает, было ли дерево только что смонтировано в первый раз или отрендерено снова в результате изменения пропсов, состояния или хуков. * **`actualDuration: number`** - -Time spent rendering the `Profiler` and its descendants for the current update. -This indicates how well the subtree makes use of memoization (e.g. [`React.memo`](/docs/react-api.html#reactmemo), [`useMemo`](/docs/hooks-reference.html#usememo), [`shouldComponentUpdate`](/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate)). -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. +время, затраченное на рендеринг компонента `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`** - -Duration of the most recent `render` time for each individual component within the `Profiler` tree. -This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). +длительность самого последнего рендеринга для каждого отдельного компонента внутри дерева компонента `Profiler`. +Это значение измеряет стоимость рендерирга в самом худшем случае (например, изначальное монтирование или дерево без кэширования). * **`startTime: number`** - -Timestamp when React began rendering the current update. +временная метка, когда React начал рендерить текущее обновление. * **`commitTime: number`** - -Timestamp when React committed the current update. -This value is shared between all profilers in a commit, enabling them to be grouped if desirable. +временная метка, когда React зафиксировал текущее обновление. +Это значение делится между всеми профилировщиками при фиксации изменения, тем самым позволяя группировать их, если возникает необходимость. * **`interactions: Set`** - -Set of ["interactions"](http://fb.me/react-interaction-tracing) that were being traced the update was scheduled (e.g. when `render` or `setState` were called). +Set-набор ["взаимодействий"](http://fb.me/react-interaction-tracing), которые были зафиксированы во время подготовки изменения +(например, когда `render` или `setState` были вызваны). -> Note +> Примечание: > -> Interactions can be used to identify the cause of an update, although the API for tracing them is still experimental. +> Взаимодействия могут быть использованы для установки причины обновления, хотя API для их отслеживания все еще экспериментальное. > -> Learn more about it at [fb.me/react-interaction-tracing](http://fb.me/react-interaction-tracing) +> Вы можете узнать больше по [данной ссылке](http://fb.me/react-interaction-tracing). From d42ab22897a3fb113011c65a5e5f1aa5916f9023 Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy Date: Sat, 24 Aug 2019 14:27:22 +0300 Subject: [PATCH 02/23] fix mistakes --- content/docs/reference-profiler.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index ce63dd6c9..5784aab2a 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -1,6 +1,6 @@ --- id: profiler -title: API для работы с профайлером +title: API для работы с Profiler layout: docs category: Reference permalink: docs/profiler.html @@ -12,7 +12,7 @@ permalink: docs/profiler.html > > Профайлинг увеличивает нагрузку на систему, поэтому **он отключен в [продакшен-режиме](https://ru.reactjs.org/docs/optimizing-performance.html#use-the-production-build)**. > -> Для отладки на продакшене, React предоставляет специльную продакшен-сборку с включенным профайлингом. +> Для отладки на продакшене, React предоставляет специальную продакшен-сборку с включенным профайлингом. > Узнать больше про то, как пользоваться этой сборкой, вы можете по [данной ссылке](https://fb.me/react-profiling). ## Использование From 57669ee02b31a12968486f1a6751051e72c2800a Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy Date: Sat, 24 Aug 2019 14:35:04 +0300 Subject: [PATCH 03/23] fix subtitles --- content/docs/reference-profiler.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index 5784aab2a..0c73be4e4 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -15,7 +15,7 @@ permalink: docs/profiler.html > Для отладки на продакшене, React предоставляет специальную продакшен-сборку с включенным профайлингом. > Узнать больше про то, как пользоваться этой сборкой, вы можете по [данной ссылке](https://fb.me/react-profiling). -## Использование +## Использование {#usage} `Profiler` может быть добавлен в любую часть React-дерева для измерения стоимости рендеринга этой части. Он принимает два пропса: `id` (string) и колбэк `onRender` (function), который React вызывает каждый раз, когда @@ -71,7 +71,7 @@ render( > Несмотря на то, что компонент `Profiler` достаточно легковесный, его следует использовать только при необходимости; каждое > его использование увеличивает нагрузку на CPU и память. -## Колбэк `onRender` +## Колбэк `onRender` {#onrender-callback} `Profiler` принимает функцию `onRender` в качестве пропа. React вызывает эту функцию каждый раз, когда компонент внутри профилируемого дерева "фиксирует" изменение. From 1024155239db58b079ee61add34ed48d92915cdc Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy Date: Tue, 27 Aug 2019 07:13:22 +0300 Subject: [PATCH 04/23] add new terms to dictionary --- TRANSLATION.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/TRANSLATION.md b/TRANSLATION.md index 6b905680d..a5eec100b 100644 --- a/TRANSLATION.md +++ b/TRANSLATION.md @@ -235,6 +235,8 @@ React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). | props | пропсы *(мн. ч.)* | | production | продакшен | | production mode | продакшен-режим | +| profiling | профайлинг, профилирование | +| Profiler | Profiler *(если имеется ввиду компонент Profiler)*; профайлер *(если имеется ввиду инструмент для профилирования)* | React | React | | React element | React-элемент, элемент React | | reconciliation | согласование | @@ -249,6 +251,7 @@ React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). | render props | рендер-пропсы *(мн. ч.)* | | reuse | повторное использование | | (previous/next) section | (предыдущая/следующая) глава *(только в разделе Основные понятия)* | +| Set of interactions | Set-набор взаимодействий | shallow | поверхностное (сравнение, равенство), поверхностный (рендеринг) | | side effect | побочный эффект | | snapshot | снимок | From d1b91817812db40ed674586143c251cf1a1c7987 Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy Date: Tue, 27 Aug 2019 07:13:33 +0300 Subject: [PATCH 05/23] translation fixes --- content/docs/reference-profiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index 0c73be4e4..9ef7c2161 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -18,7 +18,7 @@ permalink: docs/profiler.html ## Использование {#usage} `Profiler` может быть добавлен в любую часть React-дерева для измерения стоимости рендеринга этой части. -Он принимает два пропса: `id` (string) и колбэк `onRender` (function), который React вызывает каждый раз, когда +Он принимает два пропа: `id` (string) и колбэк `onRender` (function), который React вызывает каждый раз, когда компонент внутри дерева "фиксирует" обновление. Например, так выглядит процесс профилирования компонента `Navigation` и его дочерних компонентов: From f35083e53b176163f454b5d3a380ec8eface65d4 Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy Date: Tue, 27 Aug 2019 07:16:01 +0300 Subject: [PATCH 06/23] grammar fix --- TRANSLATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/TRANSLATION.md b/TRANSLATION.md index a5eec100b..3fa719cec 100644 --- a/TRANSLATION.md +++ b/TRANSLATION.md @@ -236,7 +236,7 @@ React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). | production | продакшен | | production mode | продакшен-режим | | profiling | профайлинг, профилирование | -| Profiler | Profiler *(если имеется ввиду компонент Profiler)*; профайлер *(если имеется ввиду инструмент для профилирования)* +| Profiler | Profiler *(если имеется в виду компонент Profiler)*; профайлер *(если имеется в виду инструмент для профилирования)* | React | React | | React element | React-элемент, элемент React | | reconciliation | согласование | From a91927b9a8592e71264b741651c6569fe6aaea16 Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy <7601696+IgorLesnevskiy@users.noreply.github.com> Date: Fri, 30 Aug 2019 07:15:30 +0300 Subject: [PATCH 07/23] Update content/docs/reference-profiler.md Co-Authored-By: Nick Tishkevich --- content/docs/reference-profiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index 9ef7c2161..1e8ae6bcf 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -5,7 +5,7 @@ layout: docs category: Reference permalink: docs/profiler.html --- -`Profiler` измеряет то, как часто рендерится React-приложение и какова "стоимость" этого. +`Profiler` измеряет то, как часто рендерится React-приложение и какова «стоимость» этого. Его задача — помочь найти медленные части приложения, которые можно оптимизировать (например, через [кэширование](https://ru.reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations)). > Примечание: From 5cbfc9658a2a63edebc4d7308fa3aa505c27bde1 Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy <7601696+IgorLesnevskiy@users.noreply.github.com> Date: Fri, 30 Aug 2019 07:15:45 +0300 Subject: [PATCH 08/23] Update content/docs/reference-profiler.md Co-Authored-By: Nick Tishkevich --- content/docs/reference-profiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index 1e8ae6bcf..fe60c2fff 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -6,7 +6,7 @@ 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/hooks-faq.html#how-to-memoize-calculations)). > Примечание: > From db2833b2f02847b8bddef896a30c5c290b6f9da3 Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy <7601696+IgorLesnevskiy@users.noreply.github.com> Date: Fri, 30 Aug 2019 07:16:55 +0300 Subject: [PATCH 09/23] Update content/docs/reference-profiler.md Co-Authored-By: Nick Tishkevich --- content/docs/reference-profiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index fe60c2fff..d97650f05 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -10,7 +10,7 @@ permalink: docs/profiler.html > Примечание: > -> Профайлинг увеличивает нагрузку на систему, поэтому **он отключен в [продакшен-режиме](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 предоставляет специальную продакшен-сборку с включенным профайлингом. > Узнать больше про то, как пользоваться этой сборкой, вы можете по [данной ссылке](https://fb.me/react-profiling). From 14a2dec8ec6495d869016ad7fa88b5a1bb3a1a07 Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy <7601696+IgorLesnevskiy@users.noreply.github.com> Date: Fri, 30 Aug 2019 07:17:22 +0300 Subject: [PATCH 10/23] Update content/docs/reference-profiler.md Co-Authored-By: Nick Tishkevich --- content/docs/reference-profiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index d97650f05..281220cec 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -80,7 +80,7 @@ React вызывает эту функцию каждый раз, когда к ```js function onRenderCallback( id, // проп "id" из дерева компонента Profiler, для которого было зафиксировано изменение - phase, // либо "mount" (если дерево было смонтировано), либо "update" (если дерево было вновь отрендерено) + phase, // либо "mount" (если дерево было смонтировано), либо "update" (если дерево было повторно отрендерено) actualDuration, // время, затраченное на рендер зафиксированного изменения baseDuration, // рассчитанное время рендера всего поддерева без кэширования startTime, // когда React начал рендерить это обновление From 94dfb06146ba6706546b7d6177bf37430b86ae44 Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy <7601696+IgorLesnevskiy@users.noreply.github.com> Date: Fri, 30 Aug 2019 07:17:51 +0300 Subject: [PATCH 11/23] Update content/docs/reference-profiler.md Co-Authored-By: Nick Tishkevich --- content/docs/reference-profiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index 281220cec..27e36c7f8 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -118,4 +118,4 @@ Set-набор ["взаимодействий"](http://fb.me/react-interaction-t > > Взаимодействия могут быть использованы для установки причины обновления, хотя API для их отслеживания все еще экспериментальное. > -> Вы можете узнать больше по [данной ссылке](http://fb.me/react-interaction-tracing). +> Вы можете узнать подробнее на [fb.me/react-interaction-tracing](http://fb.me/react-interaction-tracing). From 59ef0347aafa58fab630b82b069887b2c6feb234 Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy <7601696+IgorLesnevskiy@users.noreply.github.com> Date: Fri, 30 Aug 2019 07:18:05 +0300 Subject: [PATCH 12/23] Update content/docs/reference-profiler.md Co-Authored-By: Nick Tishkevich --- content/docs/reference-profiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index 27e36c7f8..399f748f0 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -74,7 +74,7 @@ render( ## Колбэк `onRender` {#onrender-callback} `Profiler` принимает функцию `onRender` в качестве пропа. -React вызывает эту функцию каждый раз, когда компонент внутри профилируемого дерева "фиксирует" изменение. +React вызывает эту функцию каждый раз, когда компонент внутри профилируемого дерева «фиксирует» изменение. В качестве аргументов прилетают значения, которые описывают то, что было отрендерено и сколько времени это заняло. ```js From bf23c4289cdcd86a507c9b369e7c652a954d677b Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy <7601696+IgorLesnevskiy@users.noreply.github.com> Date: Fri, 30 Aug 2019 07:18:15 +0300 Subject: [PATCH 13/23] Update content/docs/reference-profiler.md Co-Authored-By: Nick Tishkevich --- content/docs/reference-profiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index 399f748f0..36ecb6bf1 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -96,7 +96,7 @@ function onRenderCallback( проп `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)). From e74793920d443c41342efae820cf8ded9d8c1b76 Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy <7601696+IgorLesnevskiy@users.noreply.github.com> Date: Fri, 30 Aug 2019 07:19:12 +0300 Subject: [PATCH 14/23] Update content/docs/reference-profiler.md Co-Authored-By: Nick Tishkevich --- content/docs/reference-profiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index 36ecb6bf1..9fd563fb3 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -81,7 +81,7 @@ React вызывает эту функцию каждый раз, когда к function onRenderCallback( id, // проп "id" из дерева компонента Profiler, для которого было зафиксировано изменение phase, // либо "mount" (если дерево было смонтировано), либо "update" (если дерево было повторно отрендерено) - actualDuration, // время, затраченное на рендер зафиксированного изменения + actualDuration, // время, затраченное на рендер зафиксированного обновления baseDuration, // рассчитанное время рендера всего поддерева без кэширования startTime, // когда React начал рендерить это обновление commitTime, // когда React зафиксировал это обновление From b8afaeba426d404b207cf0978696f0dc4d61d566 Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy <7601696+IgorLesnevskiy@users.noreply.github.com> Date: Fri, 30 Aug 2019 07:19:38 +0300 Subject: [PATCH 15/23] Update content/docs/reference-profiler.md Co-Authored-By: Nick Tishkevich --- content/docs/reference-profiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index 9fd563fb3..0dbebb6d3 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -94,7 +94,7 @@ function onRenderCallback( * **`id: string`** - проп `id` из дерева компонента `Profiler`, для которого было зафиксировано изменение. -Может быть использован для того, что бы определить ту часть дерева, для который были зафиксированы изменения (если вы используете несколько профайлеров). +Может использоваться для определения той части дерева, которое было зафиксировано, если вы используете несколько профайлеров. * **`phase: "mount" | "update"`** - показывает, было ли дерево только что смонтировано в первый раз или повторно отрендерено в результате изменения пропсов, состояния или хуков. * **`actualDuration: number`** - From d8f2961431ccd60e22f327efce6752da1545f65c Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy <7601696+IgorLesnevskiy@users.noreply.github.com> Date: Fri, 30 Aug 2019 07:27:58 +0300 Subject: [PATCH 16/23] Apply suggestions from code review Co-Authored-By: Nick Tishkevich --- content/docs/reference-profiler.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index 0dbebb6d3..d14a72e34 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -13,13 +13,13 @@ permalink: docs/profiler.html > Профайлинг добавляет накладные расходы, поэтому **он отключён в [продакшен-режиме](https://ru.reactjs.org/docs/optimizing-performance.html#use-the-production-build)**. > > Для отладки на продакшене, React предоставляет специальную продакшен-сборку с включенным профайлингом. -> Узнать больше про то, как пользоваться этой сборкой, вы можете по [данной ссылке](https://fb.me/react-profiling). +> Подробнее об использовании данной сборки можно узнать на [fb.me/react-profiling](https://fb.me/react-profiling). ## Использование {#usage} `Profiler` может быть добавлен в любую часть React-дерева для измерения стоимости рендеринга этой части. Он принимает два пропа: `id` (string) и колбэк `onRender` (function), который React вызывает каждый раз, когда -компонент внутри дерева "фиксирует" обновление. +компонент внутри дерева «фиксирует» обновление. Например, так выглядит процесс профилирования компонента `Navigation` и его дочерних компонентов: @@ -75,7 +75,7 @@ render( `Profiler` принимает функцию `onRender` в качестве пропа. React вызывает эту функцию каждый раз, когда компонент внутри профилируемого дерева «фиксирует» изменение. -В качестве аргументов прилетают значения, которые описывают то, что было отрендерено и сколько времени это заняло. +Эта функция принимает параметры, которые описывают что было отрендерено и сколько времени это заняло. ```js function onRenderCallback( @@ -99,17 +99,17 @@ function onRenderCallback( показывает, было ли дерево только что смонтировано в первый раз или повторно отрендерено в результате изменения пропсов, состояния или хуков. * **`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)). -В идеальном случае, это значение должно существенно снизиться после монтирования, т.к. многим из дочерних компонентов +Показывает насколько хорошо поддерево использует мемоизацию (например, [`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`. -Это значение измеряет стоимость рендерирга в самом худшем случае (например, изначальное монтирование или дерево без кэширования). +Это значение оценивает стоимость рендера в наихудшем случае (например, изначальное монтирование или дерево без мемоизации). * **`startTime: number`** - временная метка, когда React начал рендерить текущее обновление. * **`commitTime: number`** - временная метка, когда React зафиксировал текущее обновление. -Это значение делится между всеми профилировщиками при фиксации изменения, тем самым позволяя группировать их, если возникает необходимость. +Это значение доступно для всех профайлеров при фиксации, позволяя группировать их, если в этом есть необходимость. * **`interactions: Set`** - Set-набор ["взаимодействий"](http://fb.me/react-interaction-tracing), которые были зафиксированы во время подготовки изменения (например, когда `render` или `setState` были вызваны). From d084eec9af19f25088341ef7547f045b97c61344 Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy <7601696+IgorLesnevskiy@users.noreply.github.com> Date: Fri, 30 Aug 2019 07:30:51 +0300 Subject: [PATCH 17/23] Update reference-profiler.md --- content/docs/reference-profiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index d14a72e34..facd95147 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -82,7 +82,7 @@ function onRenderCallback( id, // проп "id" из дерева компонента Profiler, для которого было зафиксировано изменение phase, // либо "mount" (если дерево было смонтировано), либо "update" (если дерево было повторно отрендерено) actualDuration, // время, затраченное на рендер зафиксированного обновления - baseDuration, // рассчитанное время рендера всего поддерева без кэширования + baseDuration, // предполагаемое время рендера всего поддерева без кэширования startTime, // когда React начал рендерить это обновление commitTime, // когда React зафиксировал это обновление interactions // Set-набор взаимодействий для данного обновления From 6ef1ee210b0f783bfec0ea7a280ef4f680ca5dd0 Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy Date: Tue, 3 Sep 2019 06:48:58 +0300 Subject: [PATCH 18/23] update nav --- content/docs/higher-order-components.md | 2 +- content/docs/nav.yml | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index e637a6e45..9b9179ded 100644 --- a/content/docs/higher-order-components.md +++ b/content/docs/higher-order-components.md @@ -1,4 +1,4 @@ ---- +nav--- id: higher-order-components title: Компоненты высшего порядка permalink: docs/higher-order-components.html diff --git a/content/docs/nav.yml b/content/docs/nav.yml index de8e32512..4042314b6 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -60,7 +60,7 @@ - id: portals title: Порталы - id: profiler - title: Profiler + title: API для компонента Profiler - id: react-without-es6 title: React без ES6 - id: react-without-jsx @@ -127,7 +127,7 @@ title: "Хуки: ответы на вопросы" - title: Testing items: - - id: testing + - id: testing title: Основы тестирования - id: testing-recipes title: Testing Recipes From 2260d9e4eca4ca2ea9a899eedbf916db8f53a0c8 Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy <7601696+IgorLesnevskiy@users.noreply.github.com> Date: Tue, 3 Sep 2019 10:28:26 +0300 Subject: [PATCH 19/23] hotfix --- content/docs/higher-order-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index 9b9179ded..e637a6e45 100644 --- a/content/docs/higher-order-components.md +++ b/content/docs/higher-order-components.md @@ -1,4 +1,4 @@ -nav--- +--- id: higher-order-components title: Компоненты высшего порядка permalink: docs/higher-order-components.html From 22433d520f1f9a3ab3c05e2c1945fb4b9ab7413d Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy <7601696+IgorLesnevskiy@users.noreply.github.com> Date: Wed, 4 Sep 2019 06:45:13 +0300 Subject: [PATCH 20/23] Update TRANSLATION.md Co-Authored-By: Alexey Pyltsyn --- TRANSLATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/TRANSLATION.md b/TRANSLATION.md index 3fa719cec..e44267851 100644 --- a/TRANSLATION.md +++ b/TRANSLATION.md @@ -251,7 +251,7 @@ React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). | render props | рендер-пропсы *(мн. ч.)* | | reuse | повторное использование | | (previous/next) section | (предыдущая/следующая) глава *(только в разделе Основные понятия)* | -| Set of interactions | Set-набор взаимодействий +| Set of interactions | Множество взаимодействий | shallow | поверхностное (сравнение, равенство), поверхностный (рендеринг) | | side effect | побочный эффект | | snapshot | снимок | From f56445e5dbad0d51afcf32d5b8e67d2dae7a7e2a Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy <7601696+IgorLesnevskiy@users.noreply.github.com> Date: Wed, 4 Sep 2019 06:48:53 +0300 Subject: [PATCH 21/23] Apply suggestions from code review Co-Authored-By: Alexey Pyltsyn --- content/docs/reference-profiler.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index facd95147..47567d0bf 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -48,7 +48,7 @@ render( ); ``` -Также, `Profiler` можно использовать во вложенности, с целью замера разных компонентов внутри поддерева: +Также `Profiler` может быть вложенным, с целью замера разных компонентов внутри поддерева: ```js{2,6,8} render( @@ -82,7 +82,7 @@ function onRenderCallback( id, // проп "id" из дерева компонента Profiler, для которого было зафиксировано изменение phase, // либо "mount" (если дерево было смонтировано), либо "update" (если дерево было повторно отрендерено) actualDuration, // время, затраченное на рендер зафиксированного обновления - baseDuration, // предполагаемое время рендера всего поддерева без кэширования + baseDuration, // предполагаемое время рендера всего поддерева без кеширования startTime, // когда React начал рендерить это обновление commitTime, // когда React зафиксировал это обновление interactions // Set-набор взаимодействий для данного обновления @@ -93,25 +93,25 @@ function onRenderCallback( Давайте поближе рассмотрим каждый из пропсов: * **`id: string`** - -проп `id` из дерева компонента `Profiler`, для которого было зафиксировано изменение. +Проп `id` из дерева компонента `Profiler`, для которого было зафиксировано изменение. Может использоваться для определения той части дерева, которое было зафиксировано, если вы используете несколько профайлеров. * **`phase: "mount" | "update"`** - -показывает, было ли дерево только что смонтировано в первый раз или повторно отрендерено в результате изменения пропсов, состояния или хуков. +Показывает, было ли дерево только что смонтировано в первый раз или повторно отрендерено в результате изменения пропсов, состояния или хуков. * **`actualDuration: number`** - -время, затраченное на рендеринг компонента `Profiler` и его дочерних компонентов для текущего обновления. +Время, затраченное на рендеринг компонента `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`. +Длительность самого последнего рендеринга для каждого отдельного компонента внутри дерева компонента `Profiler`. Это значение оценивает стоимость рендера в наихудшем случае (например, изначальное монтирование или дерево без мемоизации). * **`startTime: number`** - -временная метка, когда React начал рендерить текущее обновление. +Временная метка, когда React начал рендерить текущее обновление. * **`commitTime: number`** - -временная метка, когда React зафиксировал текущее обновление. +Временная метка, когда React зафиксировал текущее обновление. Это значение доступно для всех профайлеров при фиксации, позволяя группировать их, если в этом есть необходимость. * **`interactions: Set`** - -Set-набор ["взаимодействий"](http://fb.me/react-interaction-tracing), которые были зафиксированы во время подготовки изменения +Множество ["взаимодействий"](http://fb.me/react-interaction-tracing), которые были зафиксированы во время подготовки изменения (например, когда `render` или `setState` были вызваны). > Примечание: From fb4a98b56537e83cab77a2a085c3e3b91697397b Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy Date: Wed, 4 Sep 2019 07:01:46 +0300 Subject: [PATCH 22/23] 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` были вызваны). > Примечание: > From 2d123fd824d2bee8ddbfa80cafa0a718ad9c4e6d Mon Sep 17 00:00:00 2001 From: Igor Lesnevskiy <7601696+IgorLesnevskiy@users.noreply.github.com> Date: Wed, 4 Sep 2019 07:17:18 +0300 Subject: [PATCH 23/23] minor dictionary fix --- TRANSLATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/TRANSLATION.md b/TRANSLATION.md index 184ae3790..f14cb5c72 100644 --- a/TRANSLATION.md +++ b/TRANSLATION.md @@ -251,7 +251,7 @@ React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). | render props | рендер-пропсы *(мн. ч.)* | | reuse | повторное использование | | (previous/next) section | (предыдущая/следующая) глава *(только в разделе Основные понятия)* | -| Set of interactions | Множество взаимодействий +| Set of interactions | Множество «взаимодействий» | shallow | поверхностное (сравнение, равенство), поверхностный (рендеринг) | | side effect | побочный эффект | | snapshot | снимок |