Nota bene

Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un’ulteriore revisione da parte della community sarebbe comunque utile. Migliora questa traduzione.

<Profiler> ti permette di misurare programmaticamente le prestazioni di renderizzazione di un albero React.

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

Reference

<Profiler>

Avvolgi un albero di componenti in un <Profiler> per misurare le prestazioni di renderizzazione.

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

Props

  • id: Una stringa che identifica la parte dell’interfaccia utente che stai misurando.
  • onRender: Una callback onRender 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

onRender callback

React chiamerà la tua callback onRender con informazioni su cosa è stato renderizzato.

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // Aggrega o registra i tempi di renderizzazione...
}

Parameters

  • 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 e 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

Misurare programmaticamente le prestazioni di renderizzazione

Avvolgi il componente <Profiler> attorno a un albero React per misurare le prestazioni di renderizzazione.

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <PageContent />
</App>

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.

Insidia

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.

Nota bene

<Profiler> ti permette di raccogliere misurazioni programmaticamente. Se cerchi un profiler interattivo, prova la scheda Profiler in React Developer Tools. Espone funzionalità simili come estensione del browser.

I componenti avvolti in <Profiler> saranno anche contrassegnati nella traccia 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>.

Misurare diverse parti dell’applicazione

Puoi usare più componenti <Profiler> per misurare diverse parti della tua applicazione:

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content />
  </Profiler>
</App>

Puoi anche annidare componenti <Profiler>:

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content>
      <Profiler id="Editor" onRender={onRender}>
        <Editor />
      </Profiler>
      <Preview />
    </Content>
  </Profiler>
</App>

Sebbene <Profiler> sia un componente leggero, dovrebbe essere usato solo quando necessario. Ogni utilizzo aggiunge un overhead di CPU e memoria all’applicazione.

Previous<Fragment> (<>...</>)
Next<StrictMode>