React Misura delle prestazioni con ReactJS


Esempio

Non puoi migliorare qualcosa che non puoi misurare . Per migliorare le prestazioni dei componenti React, dovresti essere in grado di misurarlo. ReactJS fornisce strumenti addon per misurare le prestazioni. Importa il modulo react-addons-perf per misurare le prestazioni

import Perf from 'react-addons-perf' // ES6
var Perf = require('react-addons-perf') // ES5 with npm
var Perf = React.addons.Perf; // ES5 with react-with-addons.js

Puoi utilizzare i seguenti metodi dal modulo Perf importato:

  • Perf.printInclusive ()
  • Perf.printExclusive ()
  • Perf.printWasted ()
  • Perf.printOperations ()
  • Perf.printDOM ()

Il più importante di cui avrai bisogno la maggior parte del tempo è Perf.printWasted() che ti offre la rappresentazione tabellare del tempo sprecato del tuo singolo componente

inserisci la descrizione dell'immagine qui

Puoi notare la colonna del tempo sprecato nella tabella e migliorare le prestazioni del componente utilizzando la sezione Suggerimenti e trucchi sopra

Fai riferimento alla Guida ufficiale di React e all'eccellente articolo di Benchling Engg. su React Performance