React Medición de rendimiento con ReactJS


Ejemplo

No puedes mejorar algo que no puedes medir . Para mejorar el rendimiento de los componentes React, debe poder medirlo. ReactJS proporciona herramientas para medir el rendimiento de montaje anexo. Importe el módulo react-addons-perf para medir el rendimiento

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

Puedes usar los siguientes métodos del módulo Perf importado:

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

El más importante que necesitará la mayoría del tiempo es Perf.printWasted() que le brinda la representación tabular del tiempo perdido de su componente individual.

introduzca la descripción de la imagen aquí

Puede anotar la columna Tiempo perdido en la tabla y mejorar el rendimiento del Componente utilizando la sección de Consejos y trucos que se encuentra arriba

Consulte la Guía oficial React y el excelente artículo de Benchling Engg. en React Performance