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: 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>`possibilita medir o desempenho de renderização de uma árvore 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
+
## Referência {/*reference*/}
22
22
23
23
### `<Profiler>` {/*profiler*/}
24
24
25
-
Wrap a component tree in a `<Profiler>`to measure its rendering performance.
25
+
Envolva uma árvore de componentes em um `<Profiler>`para medir seu desempenho de renderização.
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 every time components within the profiled tree update. It receives information about what was rendered and how much time it took.
35
+
*`id`: Uma string que identifica a parte da UI que você está medindo.
36
+
*`onRender`: Um [callback `onRender`](#onrender-callback)que o React chama toda vez que os componentes dentro da árvore são atualizados. Ele recebe informações sobre o que foi renderizado e quanto tempo levou.
37
37
38
-
#### Caveats {/*caveats*/}
38
+
#### Ressalvas {/*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
+
*O profiling adiciona uma sobrecarga adicional, então**ele é desativado por padrão na compilação de produção.**Para optar pelo profiling em produção, você precisa habilitar uma [compilação especial de produção com profiling ativado.](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
+
O React chamará o callback`onRender`com informações sobre o que foi renderizado.
//Agregar ou registrar a duração da renderização...
51
51
}
52
52
```
53
53
54
-
#### Parameters {/*onrender-parameters*/}
54
+
#### Parâmetros {/*onrender-parameters*/}
55
55
56
-
*`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
-
*`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.
56
+
*`id`: A string `id` prop da árvore`<Profiler>`que acabou de ser processada. Isso permite identificar qual parte da árvore foi processada, especialmente se você estiver usando vários profilers.
57
+
*`phase`: `"mount"`, `"update"`ou`"nested-update"`. Indica se a árvore foi montada pela primeira vez ou renderizada novamente devido a uma mudança em props, estado ou Hooks.
58
+
*`actualDuration`: O número de milissegundos gastos renderizando o`<Profiler>`e seus descendentes para a atualização atual. Indica o quão bem a subárvore utiliza a memorização (por exemplo, [`memo`](/reference/react/memo)e[`useMemo`](/reference/react/useMemo)). Idealmente, esse valor deve diminuir significativamente após a montagem inicial, pois muitos dos descendentes só precisarão ser renderizados novamente se suas props específicas mudarem.
59
+
*`baseDuration`: O número de milissegundos estimando quanto tempo levaria para renderizar novamente toda a subárvore `<Profiler>`sem otimizações. É calculado somando as durações de renderização mais recentes de cada componente na árvore. Esse valor estima o custo em um cenário de pior caso de renderização (por exemplo, a montagem inicial ou uma árvore sem memorização). Compare `actualDuration`com ele para ver se a memorização está funcionando.
60
+
*`startTime`: Um timestamp numérico que indica quando o React começou a renderizar a atualização atual.
61
+
*`commitTime`: Um timestamp numérico que indica quando o React finalizou a atualização atual. Esse valor é compartilhado entre todos os profilers em uma atualização, permitindo que eles sejam agrupados, se desejado.
### Medindo o desempenho da renderização de forma programática {/*measuring-rendering-performance-programmatically*/}
68
68
69
-
Wrap the `<Profiler>`component around a React tree to measure its rendering performance.
69
+
Envolva o componente `<Profiler>`em uma árvore React para medir o desempenho de sua renderização.
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
+
Para utilizar o `<Profiler>`, é necessário fornecer duas propriedades: um`id` (string) e um callback `onRender`(função). O React chama esse callback sempre que um componente dentro da árvore realiza uma atualização.
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
+
Profiling adiciona uma sobrecarga adicional, então**ele é desativado por padrão na compilação de produção.**Para optar pelo profiling em produção, você precisa habilitar uma [compilação especial de produção com profiling ativado.](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>`permite que você colete medições de forma programática. Se estiver procurando por um profiler interativo, experimente a guia Profiler na [Ferramenta de desenvolvedor do React](/learn/react-developer-tools). Ela expõe funcionalidades semelhantes a uma extensão de 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
+
### Medindo diferentes partes da aplicação {/*measuring-different-parts-of-the-application*/}
97
97
98
-
You can use multiple `<Profiler>`components to measure different parts of your application:
98
+
Você pode usar múltiplos componentes `<Profiler>`para analisar distintas partes da sua aplicação:
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
+
Você também pode aninhar 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
+
Embora`<Profiler>`seja um componente leve, ele deve ser usado apenas quando necessário. Cada uso adiciona uma sobrecarga de CPU e memória à aplicação.
0 commit comments