You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: beta/src/content/reference/react/Profiler.md
+26-26Lines changed: 26 additions & 26 deletions
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ title: <Profiler>
4
4
5
5
<Intro>
6
6
7
-
`<Profiler>`lets you measure rendering performance of a React tree programmatically.
7
+
`<Profiler>`te permite medir el rendimiento del renderizado de un árbol de componentes de React de forma programática.
8
8
9
9
```js
10
10
<Profiler id="App" onRender={onRender}>
@@ -18,11 +18,11 @@ title: <Profiler>
18
18
19
19
---
20
20
21
-
## Reference {/*reference*/}
21
+
## Referencia {/*reference*/}
22
22
23
23
### `<Profiler>` {/*profiler*/}
24
24
25
-
Wrap a component tree in a `<Profiler>`to measure its rendering performance.
25
+
Envuelve un árbol de componentes en un `<Profiler>`para medir su rendimiento de renderizado.
26
26
27
27
```js
28
28
<Profiler id="App" onRender={onRender}>
@@ -32,41 +32,41 @@ Wrap a component tree in a `<Profiler>` to measure its rendering performance.
32
32
33
33
#### Props {/*props*/}
34
34
35
-
*`id`: A string identifying the part of the UI you are measuring.
36
-
*`onRender`: An [`onRender` callback](#onrender-callback)that React calls it every time components within the profiled tree update. It receives information about what was rendered and how much time it took.
35
+
*`id`: Un string que identifica qué parte de la interfaz de usuario estás midiendo.
36
+
*`onRender`: Un [*callback*`onRender`](#onrender-callback)que React llama cada vez que los componentes dentro del árbol perfilado se actualizan. Recibe información sobre lo que se renderizó y cuánto tiempo llevó.
37
37
38
-
#### Caveats {/*caveats*/}
38
+
#### Advertencias {/*caveats*/}
39
39
40
-
*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)
40
+
*El perfilado agrega cierta sobrecarga adicional, por lo que **está deshabilitado en la versión de producción de manera predeterminada.**Para optar por el perfilado en producción, debes habilitar una [versión especial de producción con el perfilado habilitado.](https://fb.me/react-profiling)
41
41
42
42
---
43
43
44
44
### `onRender` callback {/*onrender-callback*/}
45
45
46
-
React will call your`onRender`callback with information about what was rendered.
46
+
React llamará tu *callback*`onRender`con información sobre lo que se renderizó.
*`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.
57
-
*`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.
58
-
*`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.
59
-
*`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.
60
-
*`startTime`: A numeric timestamp for when React began rendering the current update.
61
-
*`endTime`: 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.
56
+
*`id`: La prop`id`del árbol `<Profiler>`que acaba de ser entregado. Esto te permite identificar qué parte del árbol se entregó si estás usando varios perfiles.
57
+
*`phase`: `"mount"`, `"update"`o`"nested-update"`. Esto te indica si el árbol acaba de ser montado por primera vez o se ha vuelto a renderizar debido a un cambio en las props, el estado o los hooks.
58
+
*`actualDuration`: El número de milisegundos que se tardó en renderizar el árbol `<Profiler>`Esto indica qué tan bien el subárbol hace uso de la memoización (por ejemplo, [`memo`](/reference/react/memo)y[`useMemo`](/reference/react/useMemo)). Idealmente, este valor debería disminuir significativamente después del montaje inicial, ya que muchos de los descendientes solo necesitarán volver a renderizarse si cambian sus propiedades específicas.
59
+
*`baseDuration`: El número de milisegundos que estima cuánto tiempo tardaría en volver a renderizar todo el subárbol `<Profiler>`sin ninguna optimización. Se calcula sumando las duraciones de renderizado más recientes de cada componente en el árbol. Este valor estima el costo del renderizado para el peor de caso (por ejemplo, el montaje inicial o un árbol sin memoización). Compara`actualDuration`con este valor para ver si la memorización está funcionando.
60
+
*`startTime`: Una marca de tiempo numérica para cuando React comenzó a renderizar la actualización actual.
61
+
*`endTime`: Una marca de tiempo numérica para cuando React entregó la actualización actual. Este valor se comparte entre todos los perfiles en una entrega, lo que permite agruparlos si es deseable.
### Medición del rendimiento de renderizado programáticamente {/*measuring-rendering-performance-programmatically*/}
68
68
69
-
Wrap the `<Profiler>`component around a React tree to measure its rendering performance.
69
+
Envuelve el componente `<Profiler>`alrededor de un árbol de React para medir su rendimiento de renderizado.
70
70
71
71
```js {2,4}
72
72
<App>
@@ -77,25 +77,25 @@ Wrap the `<Profiler>` component around a React tree to measure its rendering per
77
77
</App>
78
78
```
79
79
80
-
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.
80
+
Se requieren dos props: un`id` (string) y un *callback*`onRender` (function) que React llama cada vez que un componente dentro del árbol "comete" una actualización.
81
81
82
82
<Pitfall>
83
83
84
-
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)
84
+
El perfilado agrega una sobrecarga adicional, por lo que **está desactivado en la compilación de producción de forma predeterminada.**Para habilitar el perfilado en producción, debes habilitar una [compilación especial de producción con el perfilado activado.](https://fb.me/react-profiling)
85
85
86
86
</Pitfall>
87
87
88
88
<Note>
89
89
90
-
`<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.
90
+
`<Profiler>`te permite recopilar mediciones de forma programática. Si estás buscando un perfilador interactivo, prueba la pestaña Profiler en las [Herramientas de Desarrollo de React](/learn/react-developer-tools). Expone funcionalidades similares a una extensión del navegador.
91
91
92
92
</Note>
93
93
94
94
---
95
95
96
-
### Measuring different parts of the application {/*measuring-different-parts-of-the-application*/}
96
+
### Medición de diferentes partes de la aplicación {/*measuring-different-parts-of-the-application*/}
97
97
98
-
You can use multiple`<Profiler>`components to measure different parts of your application:
98
+
Puedes usar varios componentes`<Profiler>`para medir diferentes partes de tu aplicación:
99
99
100
100
```js {5,7}
101
101
<App>
@@ -108,7 +108,7 @@ You can use multiple `<Profiler>` components to measure different parts of your
108
108
</App>
109
109
```
110
110
111
-
You can also nest`<Profiler>` components:
111
+
También puedes anidar componentes`<Profiler>`:
112
112
113
113
```js {5,7,9,12}
114
114
<App>
@@ -126,7 +126,7 @@ You can also nest `<Profiler>` components:
126
126
</App>
127
127
```
128
128
129
-
Although`<Profiler>`is a lightweight component, it should be used only when necessary. Each use adds some CPU and memory overhead to an application.
129
+
Aunque`<Profiler>`es un componente ligero, debería ser usado solo cuando sea necesario. Cada uso añade una sobrecarga de CPU y memoria a una aplicación.
0 commit comments