From ddb2d898a1eef909c6c7df8111e47a556ea09166 Mon Sep 17 00:00:00 2001 From: anodarse <35878790+anodarse@users.noreply.github.com> Date: Tue, 3 Sep 2019 10:05:15 -0400 Subject: [PATCH 1/8] reference-profiler-translate --- content/docs/reference-profiler.md | 82 +++++++++++++++--------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index 58a9e41c9..f127ce65c 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -6,22 +6,22 @@ category: Reference permalink: docs/profiler.html --- -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). +EL `Profiler` mide con qué frecuencia se procesa una aplicación React y cuál es el" costo "de la representación. +Su propósito es ayudar a identificar partes de una aplicación que son lentas y pueden beneficiarse de [optimizaciones como la memoización](https://reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations). -> Note: +> Nota: > -> Profiling adds some additional overhead, so **it is disabled in [the production build](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build)**. +> La creación de perfiles agrega una sobrecarga adicional, por lo que **está deshabilitada en [la compilación de producción](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) +> Para optar por el perfil de producción, React proporciona una compilación de producción especial con el perfil habilitado. +> Lea más sobre cómo usar esta compilación en [fb.me/react-profiling](https://fb.me/react-profiling) -## Usage +## Uso -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. +Se puede agregar un `Profiler` en cualquier parte de un árbol React para medir el costo de renderizar esa parte del árbol. +Requiere dos props: un `id` (string) y un `onRender` callback (función) que React llama cada vez que un componente dentro del árbol "confirma" una actualización. -For example, to profile a `Navigation` component and its descendants: +Por ejemplo, para perfilar un componente `Navigation` y sus descendientes: ```js{3} render( @@ -34,7 +34,7 @@ render( ); ``` -Multiple `Profiler` components can be used to measure different parts of an application: +Se pueden usar múltiples componentes `Profiler` para medir diferentes partes de una aplicación: ```js{3,6} render( @@ -48,7 +48,7 @@ render( ); ``` -`Profiler` components can also be nested to measure different components within the same subtree: +Los componentes `Profiler` también se pueden anidar para medir diferentes componentes dentro del mismo subárbol: ```js{2,6,8} render( @@ -66,54 +66,54 @@ render( ); ``` -> Note +> Nota > -> 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. +> Aunque `Profiler` es un componente liviano, debe usarse solo cuando sea necesario; cada uso agrega algo de sobrecarga de CPU y memoria a una aplicación. ## `onRender` Callback -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. +El `Profiler` requiere una función `onRender` como una prop. +React llama a esta función cada vez que un componente dentro del árbol perfilado "confirma" una actualización. +Recibe parámetros que describen lo que se procesó y cuánto tiempo tardó. ```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, // la prop "id" del arbol Profiler que acaba de ser "confirmado" + phase, // ya sea "mount" (si el árbol acaba de ser montado) o "update" (si se re-renderizó) + actualDuration, // tiempo dedicado a procesar la actualización confirmada + baseDuration, // tiempo estimado para renderizar todo el subárbol sin memoización + startTime, // cuando React comenzó a procesar esta actualización + commitTime, // cuando React confirmó esta actualización + interactions // el conjunto de interacciones pertenecientes a esta actualización ) { - // Aggregate or log render timings... + // Agregar o registrar tiempos de renderizado ... } ``` -Let's take a closer look at each of the props: +Echemos un vistazo más de cerca a cada uno de las 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. +La prop `id` del árbol` Profiler` que acaba de ser confirmado. +Esto se puede usar para identificar qué parte del árbol se confirmó si está utilizando varios perfiladores. * **`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. +Identifica si el árbol se acaba de montar por primera vez o se vuelve a renderizar debido a un cambio en las props, el estado o los 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. +Tiempo dedicado a renderizar el `Profiler` y sus descendientes para la actualización actual. +Esto indica qué tan bien el subárbol utiliza la memoización. (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)). +Idealmente, este valor debería disminuir significativamente después del montaje inicial, ya que muchos de los descendientes solo necesitarán volver a renderizar si cambian sus props específicas. * **`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). +Duración del tiempo de renderizado más reciente para cada componente individual dentro del árbol de `Profiler`. +Este valor estima el costo de renderizado en el peor de los casos (por ejemplo, el montaje inicial o un árbol sin memoización). * **`startTime: number`** - -Timestamp when React began rendering the current update. +Marca de tiempo cuando React comenzó a procesar la actualización actual. * **`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. +Marca de tiempo cuando React confirmó la actualización actual. +Este valor se comparte entre todos los perfiladores en una confirmación, lo que les permite agruparse si lo desean. * **`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). +Conjunto de ["interacciones"](http://fb.me/react-interaction-tracing) que se estaban rastreando, la actualización estaba programada (por ejemplo, cuando se llamó a `render` o` setState`). -> Note +> Nota > -> Interactions can be used to identify the cause of an update, although the API for tracing them is still experimental. +> Las interacciones se pueden usar para identificar la causa de una actualización, aunque la API para rastrearlas aún es experimental. > -> Learn more about it at [fb.me/react-interaction-tracing](http://fb.me/react-interaction-tracing) +> Obtenga más información al respecto en [fb.me/react-interaction-tracing](http://fb.me/react-interaction-tracing) From 6bdb64131dcfce4912f798ea06d53efa5d4414c3 Mon Sep 17 00:00:00 2001 From: anodarse <35878790+anodarse@users.noreply.github.com> Date: Mon, 9 Sep 2019 09:43:15 -0400 Subject: [PATCH 2/8] Update content/docs/reference-profiler.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Rainer Martínez Fraga --- 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 f127ce65c..72a9ee538 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -6,7 +6,7 @@ category: Reference permalink: docs/profiler.html --- -EL `Profiler` mide con qué frecuencia se procesa una aplicación React y cuál es el" costo "de la representación. +El `Profiler` (perfilador o generador de perfiles) mide con qué frecuencia se renderiza una aplicación React y cuál es el "costo" del renderizado. Su propósito es ayudar a identificar partes de una aplicación que son lentas y pueden beneficiarse de [optimizaciones como la memoización](https://reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations). > Nota: From a4e60bdf9156302529e72469f85f510f776070cd Mon Sep 17 00:00:00 2001 From: anodarse <35878790+anodarse@users.noreply.github.com> Date: Mon, 9 Sep 2019 09:43:31 -0400 Subject: [PATCH 3/8] Update content/docs/reference-profiler.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Rainer Martínez Fraga --- 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 72a9ee538..3f4038ed4 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -13,7 +13,7 @@ Su propósito es ayudar a identificar partes de una aplicación que son lentas y > > La creación de perfiles agrega una sobrecarga adicional, por lo que **está deshabilitada en [la compilación de producción](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build)**. > -> Para optar por el perfil de producción, React proporciona una compilación de producción especial con el perfil habilitado. +> Para acceder al análisis de rendimiento en producción, React proporciona una compilación de producción especial con la generación de perfiles habilitada. > Lea más sobre cómo usar esta compilación en [fb.me/react-profiling](https://fb.me/react-profiling) ## Uso From 988af19ab801bcb97d46abb52f9c416f785e83a0 Mon Sep 17 00:00:00 2001 From: anodarse <35878790+anodarse@users.noreply.github.com> Date: Mon, 9 Sep 2019 09:44:08 -0400 Subject: [PATCH 4/8] Update content/docs/reference-profiler.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Rainer Martínez Fraga --- 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 3f4038ed4..c32f9d639 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -19,7 +19,7 @@ Su propósito es ayudar a identificar partes de una aplicación que son lentas y ## Uso Se puede agregar un `Profiler` en cualquier parte de un árbol React para medir el costo de renderizar esa parte del árbol. -Requiere dos props: un `id` (string) y un `onRender` callback (función) que React llama cada vez que un componente dentro del árbol "confirma" una actualización. +Requiere dos props: un `id` (string) y un callback `onRender` (función) que React llama cada vez que un componente dentro del árbol "confirma" una actualización. Por ejemplo, para perfilar un componente `Navigation` y sus descendientes: From de409947f05699f6a96098521b5f03334437ccfa Mon Sep 17 00:00:00 2001 From: anodarse <35878790+anodarse@users.noreply.github.com> Date: Mon, 9 Sep 2019 09:44:17 -0400 Subject: [PATCH 5/8] Update content/docs/reference-profiler.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Rainer Martínez Fraga --- 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 c32f9d639..08a1c1f86 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -70,7 +70,7 @@ render( > > Aunque `Profiler` es un componente liviano, debe usarse solo cuando sea necesario; cada uso agrega algo de sobrecarga de CPU y memoria a una aplicación. -## `onRender` Callback +## Callback `onRender` El `Profiler` requiere una función `onRender` como una prop. React llama a esta función cada vez que un componente dentro del árbol perfilado "confirma" una actualización. From 2e9634d20ef1113a84b2f49205b113d4fe857588 Mon Sep 17 00:00:00 2001 From: anodarse <35878790+anodarse@users.noreply.github.com> Date: Mon, 9 Sep 2019 09:44:37 -0400 Subject: [PATCH 6/8] Update content/docs/reference-profiler.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Rainer Martínez Fraga --- 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 08a1c1f86..863f773f3 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -79,7 +79,7 @@ Recibe parámetros que describen lo que se procesó y cuánto tiempo tardó. ```js function onRenderCallback( id, // la prop "id" del arbol Profiler que acaba de ser "confirmado" - phase, // ya sea "mount" (si el árbol acaba de ser montado) o "update" (si se re-renderizó) + phase, // ya sea "mount" (si el árbol acaba de ser montado) o "update" (si se volvió a renderizar) actualDuration, // tiempo dedicado a procesar la actualización confirmada baseDuration, // tiempo estimado para renderizar todo el subárbol sin memoización startTime, // cuando React comenzó a procesar esta actualización From d86409ba5593710ee183d9aeed22a82ea73e2c19 Mon Sep 17 00:00:00 2001 From: anodarse <35878790+anodarse@users.noreply.github.com> Date: Mon, 9 Sep 2019 09:44:47 -0400 Subject: [PATCH 7/8] Update content/docs/reference-profiler.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Rainer Martínez Fraga --- 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 863f773f3..51f1c0a22 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -78,7 +78,7 @@ Recibe parámetros que describen lo que se procesó y cuánto tiempo tardó. ```js function onRenderCallback( - id, // la prop "id" del arbol Profiler que acaba de ser "confirmado" + id, // la prop "id" del árbol Profiler que acaba de ser "confirmado" phase, // ya sea "mount" (si el árbol acaba de ser montado) o "update" (si se volvió a renderizar) actualDuration, // tiempo dedicado a procesar la actualización confirmada baseDuration, // tiempo estimado para renderizar todo el subárbol sin memoización From cf58e5db83180a7fe537a43ba0bab060ce0aac86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Tue, 10 Sep 2019 17:27:22 -0400 Subject: [PATCH 8/8] 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 51f1c0a22..4dc2d0d30 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -1,6 +1,6 @@ --- id: profiler -title: Profiler API +title: API Profiler layout: docs category: Reference permalink: docs/profiler.html