Cómo utilizar la nueva función experimental Profiler de React

¡React 16.4.0 fue lanzado recientemente! Y en momentos como este te das cuenta de cuánto eres un nerd de JavaScript por entusiasmarte con los lanzamientos de versiones menores de tu marco favorito. Welp!

Si tuviera que reflexionar sobre las notas de lanzamiento publicadas por el equipo React, parecería una actualización principalmente aburrida. Los eventos de puntero parecen bastante geniales, pero sinceramente, hasta ahora solo había escuchado vagamente sobre ellos.

Aparte de eso, hay una corrección de errores para el nuevo método getDerivedStateFromProps (ahora se llamará en cada render). Todavía no he adoptado este uso en gran medida, por lo que el impacto de esta actualización para mí personalmente fue bastante bajo.

Luego, enterrado bajo los titulares, vi el anuncio de que habían agregado un nuevo componente experimental inestable_Profiler. Como mi vida es bastante inestable, en este momento, decidí leer el RFC y probarlo.

TLDR;

La gente del equipo React está tratando de hacer que el renderizado sea asíncrono. Esto puede dificultar la medición confiable del tiempo que los componentes tardan en renderizarse durante el montaje / actualización. Por lo tanto, están jugando con este nuevo y brillante componente Profiler.

Entonces, ¿para qué puedes usar esto hoy?

Bueno, si eres un experto en el seguimiento del rendimiento de tus aplicaciones React, esta definitivamente será otra buena herramienta para agregar a tu cinturón. Si esto no es lo tuyo, deberías dejar de leer esto y volver a crear aplicaciones geniales.

Usando

Descargo de responsabilidad: probablemente no deberías usar esto en el código de producción todavía (quiero decir que dice inestable_, ¡vamos hombre!), Aunque aparentemente se despojó de las compilaciones de productos. Más adelante, están analizando una configuración de compilación de producción + perfil que también le permitiría perfilar el código de producción.

Básicamente, Profiler es un componente que puede extraer del paquete predeterminado React. Dado que tiene ese nombre funky en minúsculas / guiones bajos, que muchas lindas desaprueban, deberás realizar una de las siguientes acciones:

import React, {unstable_Profiler as Profiler} de 'react';
...
const Profiler = React.unstable_Profiler;

Ahora que tienes tu Profiler, ¡perfilemos algunos componentes! Puede envolver cualquier parte de su árbol JSX en un generador de perfiles para ver qué sucede con esa parte del árbol. Profiler acepta una función onRender, que es donde se capturan los detalles sobre el tiempo de renderizado. Aquí hay un simple ejemplo de contador:

import React, {unstable_Profiler as Profiler} de 'react';
La clase ComponentWithProfiling extiende React.Component {
    estado = {
        cuenta: 0
    };
    logProfile = (id, phase, actualTime, baseTime, startTime, commitTime) => {
        console.log (`$ {id} 's $ {phase} phase:`);
        console.log (`Tiempo real: $ {actualTime}`);
        console.log (`Tiempo base: $ {baseTime}`);
        console.log (`Hora de inicio: $ {startTime}`);
        console.log (`Tiempo de confirmación: $ {commitTime}`);
    };
    ir = dirección => () => this.setState (({count}) => ({
        cuenta: dirección === "arriba"? cuenta + 1: cuenta - 1
    }));
render () {
        regreso (
            
                
                
El recuento es {this.state.count}
                             
        );     } }

Tenga en cuenta que debe dar a cada sección del árbol de componentes que está perfilando una identificación. Como puede ver a continuación, el método onRender recibe un montón de métricas interesantes:

https://7jroojkv30.codesandbox.io/

En primer lugar, puede ver en qué fase de la representación se encontraba (ya sea montar o actualizar), que tal vez podría usarse para identificar partes de su árbol que se están actualizando inesperadamente (al igual que el excelente paquete de por qué lo actualizó, que Lo he usado muchas veces y lo recomiendo).

A continuación, obtenemos el actualTime y baseTime. Estos están relacionados con el tiempo real que React pasa haciendo cálculos de renderizado; es decir. averiguar qué ha cambiado. Tenga en cuenta que el tiempo real para el montaje inicial tarda más que las actualizaciones. Esto se debe a que en el montaje inicial, técnicamente todo es "nuevo". Mientras que con las actualizaciones, los cálculos deberían ser más baratos porque es de esperar que los componentes del árbol se actualicen solo si realmente es necesario (es decir, cuando los valores de prop / estado han cambiado).

En una aplicación más grande / del mundo real, estos valores podrían ayudar a exponer partes de su aplicación en las que se debe utilizar / Actualizar incorrectamente el componente, lugares donde los accesorios cambian mucho / se están transmitiendo accesorios "nuevos", o simplemente lugares donde usted no No espero que las actualizaciones tarden tanto tiempo.

Los valores finales que obtenemos en onRender son startTime y commitTime. Estos son esencialmente una "marca de tiempo" desde el inicio inicial. startTime es el momento en que el árbol comenzó a hacer sus cálculos de renderizado, mientras que commitTime se refiere al momento en que React realmente confirmó esos cambios al renderizador.

Si realiza un seguimiento de otros eventos con marca de tiempo (como clics o pulsaciones de teclas), estas métricas podrían ayudar a exponer deltas entre cuándo ocurren los eventos de usuario y cuándo se producen realmente los renderizados. Si la brecha es amplia, este retraso puede ser perceptible para los usuarios y debería ser un área para que investigue la mejora del rendimiento.

Conclusión

Lo sé personalmente, esta herramienta todavía no será súper útil. Pero es una de esas cosas que es bueno saber, porque si alguna vez llego a esos cuellos de botella de rendimiento, este será un buen palo de medición ".

Es importante medir primero sus problemas de rendimiento, de esa manera cuando realice "mejoras", podrá saber si realmente mejora las cosas, o si solo empeora las cosas. Descubrí que optimizar el rendimiento es una de esas cosas que puede convertirse fácilmente en una pérdida de tiempo, así que asegúrate de que solo intentas optimizar si tienes un problema real.

Espero ver qué hace el equipo React con Profiler en el futuro. ¡Gracias a @bvaughn por agregar esta ingeniosa función!