Skip to content

translate(reference): Profiler #686

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
deblasis wants to merge 1 commit into from
Closed

translate(reference): Profiler #686

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 31 additions & 25 deletions src/content/reference/react/Profiler.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
---
title: <Profiler>
translationStatus: ai-draft
---

<Note>

Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/reference/react/Profiler.md).

</Note>

<Intro>

`<Profiler>` lets you measure rendering performance of a React tree programmatically.
`<Profiler>` ti permette di misurare programmaticamente le prestazioni di renderizzazione di un albero React.

```js
<Profiler id="App" onRender={onRender}>
Expand All @@ -22,7 +29,7 @@ title: <Profiler>

### `<Profiler>` {/*profiler*/}

Wrap a component tree in a `<Profiler>` to measure its rendering performance.
Avvolgi un albero di componenti in un `<Profiler>` per misurare le prestazioni di renderizzazione.

```js
<Profiler id="App" onRender={onRender}>
Expand All @@ -32,41 +39,41 @@ Wrap a component tree in a `<Profiler>` to measure its rendering performance.

#### Props {/*props*/}

* `id`: A string identifying the part of the UI you are measuring.
* `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.
* `id`: Una stringa che identifica la parte dell'interfaccia utente che stai misurando.
* `onRender`: Una [`callback onRender`](#onrender-callback) che React chiama ogni volta che i componenti nell'albero profilato si aggiornano. Riceve informazioni su cosa è stato renderizzato e quanto tempo ha richiesto.

#### Caveats {/*caveats*/}

* 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.](/reference/dev-tools/react-performance-tracks#using-profiling-builds)
* Il profiling aggiunge un overhead aggiuntivo, quindi **è disabilitato di default nella build di produzione.** Per attivare il profiling in produzione, devi abilitare una [build di produzione speciale con il profiling attivato.](/reference/dev-tools/react-performance-tracks#using-profiling-builds)

---

### `onRender` callback {/*onrender-callback*/}

React will call your `onRender` callback with information about what was rendered.
React chiamerà la tua callback `onRender` con informazioni su cosa è stato renderizzato.

```js
function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
// Aggregate or log render timings...
// Aggrega o registra i tempi di renderizzazione...
}
```

#### Parameters {/*onrender-parameters*/}

* `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.
* `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.
* `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.
* `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.
* `startTime`: A numeric timestamp for when React began rendering the current update.
* `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.
* `id`: La stringa della prop `id` dell'albero `<Profiler>` appena sottoposto a commit. Ti permette di identificare quale parte dell'albero ha effettuato il commit se usi più profiler.
* `phase`: `"mount"`, `"update"` o `"nested-update"`. Ti indica se l'albero è stato montato per la prima volta o renderizzato di nuovo a causa di un cambiamento di props, state o Hooks.
* `actualDuration`: Il numero di millisecondi impiegati per renderizzare il `<Profiler>` e i suoi discendenti per l'aggiornamento corrente. Indica quanto bene il sottoalbero sfrutta la memorizzazione (ad esempio [`memo`](/reference/react/memo) e [`useMemo`](/reference/react/useMemo)). Idealmente questo valore dovrebbe diminuire significativamente dopo il montaggio iniziale, poiché molti discendenti dovranno renderizzare di nuovo solo se cambiano le loro props specifiche.
* `baseDuration`: Il numero di millisecondi stimati per renderizzare di nuovo l'intero sottoalbero `<Profiler>` senza ottimizzazioni. Viene calcolato sommando le durate di renderizzazione più recenti di ogni componente nell'albero. Questo valore stima il costo nel caso peggiore di renderizzazione (ad esempio il montaggio iniziale o un albero senza memorizzazione). Confronta `actualDuration` con questo valore per verificare se la memorizzazione funziona.
* `startTime`: Un timestamp numerico relativo al momento in cui React ha iniziato a renderizzare l'aggiornamento corrente.
* `commitTime`: Un timestamp numerico relativo al momento in cui React ha effettuato il commit dell'aggiornamento corrente. Questo valore è condiviso tra tutti i profiler in un commit, permettendone il raggruppamento se necessario.

---

## Usage {/*usage*/}

### Measuring rendering performance programmatically {/*measuring-rendering-performance-programmatically*/}
### Misurare programmaticamente le prestazioni di renderizzazione {/*measuring-rendering-performance-programmatically*/}

Wrap the `<Profiler>` component around a React tree to measure its rendering performance.
Avvolgi il componente `<Profiler>` attorno a un albero React per misurare le prestazioni di renderizzazione.

```js {2,4}
<App>
Expand All @@ -77,28 +84,28 @@ Wrap the `<Profiler>` component around a React tree to measure its rendering per
</App>
```

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.
Richiede due props: un `id` (stringa) e una callback `onRender` (funzione) che React chiama ogni volta che un componente nell'albero effettua il commit di un aggiornamento.

<Pitfall>

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.](/reference/dev-tools/react-performance-tracks#using-profiling-builds)
Il profiling aggiunge un overhead aggiuntivo, quindi **è disabilitato di default nella build di produzione.** Per attivare il profiling in produzione, devi abilitare una [build di produzione speciale con il profiling attivato.](/reference/dev-tools/react-performance-tracks#using-profiling-builds)

</Pitfall>

<Note>

`<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.
`<Profiler>` ti permette di raccogliere misurazioni programmaticamente. Se cerchi un profiler interattivo, prova la scheda _Profiler_ in [React Developer Tools](/learn/react-developer-tools). Espone funzionalità simili come estensione del browser.

Components wrapped in `<Profiler>` will also be marked in the [Component tracks](/reference/dev-tools/react-performance-tracks#components) of React Performance tracks even in profiling builds.
In development builds, all components are marked in the Components track regardless of whether they're wrapped in `<Profiler>`.
I componenti avvolti in `<Profiler>` saranno anche contrassegnati nella [traccia Components](/reference/dev-tools/react-performance-tracks#components) di React Performance tracks anche nelle build con profiling.
Nelle build di development, tutti i componenti sono contrassegnati nella traccia Components indipendentemente dal fatto che siano avvolti in `<Profiler>`.

</Note>

---

### Measuring different parts of the application {/*measuring-different-parts-of-the-application*/}
### Misurare diverse parti dell'applicazione {/*measuring-different-parts-of-the-application*/}

You can use multiple `<Profiler>` components to measure different parts of your application:
Puoi usare più componenti `<Profiler>` per misurare diverse parti della tua applicazione:

```js {5,7}
<App>
Expand All @@ -111,7 +118,7 @@ You can use multiple `<Profiler>` components to measure different parts of your
</App>
```

You can also nest `<Profiler>` components:
Puoi anche annidare componenti `<Profiler>`:

```js {5,7,9,12}
<App>
Expand All @@ -129,7 +136,6 @@ You can also nest `<Profiler>` components:
</App>
```

Although `<Profiler>` is a lightweight component, it should be used only when necessary. Each use adds some CPU and memory overhead to an application.
Sebbene `<Profiler>` sia un componente leggero, dovrebbe essere usato solo quando necessario. Ogni utilizzo aggiunge un overhead di CPU e memoria all'applicazione.

---

Loading