Comment utiliser la nouvelle fonctionnalité Profiler expérimentale dans React

Alors React 16.4.0 est sorti! (Remarque traducteur - cette fonctionnalité a été ajoutée dans la version 16.4.0, puis ce message a été écrit). Et à de tels moments, vous comprenez à quel point vous êtes JavaScript - un geek si vous suivez des mises à jour mineures de votre framework préféré. Super!



Si vous lisez les notes de publication de la version 16.4 publiées par l'équipe React, cette mise à jour aurait dû être considérée comme plutôt ennuyeuse. Les événements de pointeur semblent attrayants, mais pour être honnête, j'en ai peu entendu parler auparavant.

De plus, il existe un correctif pour une sorte de nouvelle méthode getDerivedStateFromProps (maintenant elle sera appelée à chaque rendu). Je ne l'ai pas encore assez utilisé, donc pour moi cette mise à jour n'était pas très importante.

Puis j'ai vu l'annonce, enterrée sous les titres, qu'ils avaient ajouté un nouveau composant expérimental, unstable_Profiler . Voyant que ma vie est maintenant assez instable ( unstable_ ), j'ai décidé de lire le RFC et de l'essayer.

TLDR

Des membres de l'équipe React essaient de rendre le rendu asynchrone . Cela peut rendre difficile la détermination du moment du rendu des composants lors du montage / de la mise à jour. Par conséquent, ils jouent avec ce nouveau composant Profiler brillant.

Alors, que pouvez-vous utiliser aujourd'hui?

Donc, si vous êtes un pro du suivi des performances de vos applications React, ce sera certainement un autre bon outil dans votre arsenal. Si cela ne vous concerne pas, vous ne pouvez plus lire et revenir à la création d'applications intéressantes.

Utilisation de <Profiler />

Attention : vous ne devriez peut-être pas l'utiliser en production (enfin, en fait, c'est unstable_ ). Plus tard, ils termineront la capacité de profiler et de code de production.

Fondamentalement, Profiler est un composant qui peut être extrait du package React par défaut. Puisqu'il a un nom souligné prudent sur lequel de nombreux linters jurent, vous pouvez contourner ce problème comme suit:

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

Maintenant que vous avez Profiler , profilons les composants! Vous pouvez envelopper n'importe quelle partie de votre arborescence JSX dans Profiler pour voir ce qui lui arrive. Profiler accepte la fonction onRender , qui capture des informations sur le temps de rendu. Voici un simple exemple de compteur :

 import React, { unstable_Profiler as Profiler } from 'react'; class ComponentWithProfiling extends React.Component { state = { count: 0 }; logProfile = (id, phase, actualTime, baseTime, startTime, commitTime) => { console.log(`${id}'s ${phase} phase:`); console.log(`Actual time: ${actualTime}`); console.log(`Base time: ${baseTime}`); console.log(`Start time: ${startTime}`); console.log(`Commit time: ${commitTime}`); }; go = direction => () => this.setState(({ count }) => ({ count: direction === "up" ? count + 1 : count - 1 })); render() { return ( <Profiler id="app" onRender={this.logProfile}> <button onClick={this.go("up")}>️</button> <div>The count is {this.state.count}</div> <button onClick={this.go("down")}></button> </Profiler> ); } } 

Notez que vous devez donner un id chaque fragment que vous onRender . Comme vous pouvez le voir ci-dessous, onRender accepte un tas de mesures intéressantes:


7jroojkv30.codesandbox.io

Tout d'abord, vous pouvez voir quelle était la phase de rendu ( mount ou update ), qui peut être utilisée pour identifier les parties du code qui sont mises à jour de manière inattendue (tout comme l'excellent package pourquoi-avez-vous-mis à jour que j'ai utilisé plusieurs fois et recommande vivement).

Ensuite, nous obtenons actualTime et baseTime . Ils sont liés au temps réel que React consacre aux calculs de rendu; c'est-à-dire comprendre ce qui a changé. Veuillez noter que l'heure réelle (heure initiale) de la connexion initiale (montage) est plus longue que l'heure de mise à jour (mise à jour). En effet, à la connexion initiale, techniquement tout est «nouveau». Lors de la mise à jour, les calculs devraient être plus simples, car, j'espère, les composants de l'arborescence ne sont mis à jour que s'ils ont vraiment changé (c'est-à-dire lorsque les valeurs de prop / states ont changé).

Dans les applications volumineuses / réelles, ces données vous aideront à comprendre où shouldComponentUpdate utilisé de manière incorrecte ou pas du tout, les endroits où les accessoires avec les types de référence changent souvent ou de nouveaux accessoires sont envoyés, ou simplement les endroits où vous ne vous attendiez pas à ce que les mises à jour prennent si longtemps.

Les dernières valeurs que nous obtenons dans onRender sont startTime et commitTime . Il s'agit en fait d'horodatages depuis le lancement initial. startTime est l'heure à partir de laquelle le composant sélectionné a commencé à effectuer des calculs pour le rendu, tandis que commitTime est l'heure à laquelle React a réellement commitTime ces modifications pendant le rendu.

Si vous suivez d'autres événements avec des horodatages (tels que des clics ou des frappes de touches), ces mesures peuvent aider à identifier les deltas entre le moment où les événements utilisateur se produisent et le moment où le rendu se produit. Si l'écart est important, ce délai peut être palpable pour les utilisateurs et doit être soigneusement examiné.

Conclusion

Pour moi personnellement, cet outil n'est pas encore très utile. Mais c'est une de ces choses qu'il est bon de connaître, car si jamais je rencontre ces goulots d'étranglement en matière de performances, ce sera un bon moyen de les mesurer.

Il est important de mesurer d'abord vos problèmes de performances. Ainsi, lorsque vous apportez des «améliorations», vous pouvez savoir si cela améliore vraiment la situation ou ne fait qu'empirer. J'ai trouvé que l'optimisation des performances est l'une de ces choses sur lesquelles vous pouvez passer beaucoup de temps. Par conséquent, avant d'optimiser quelque chose., Assurez-vous qu'il est vraiment nécessaire.

J'ai hâte de voir ce que l'équipe React fera avec Profiler à l'avenir. Merci @bvaughn d' avoir ajouté cette fonctionnalité astucieuse !

Du traducteur:
Pour le moment (version actuelle 16.6.0), Profiler ne fonctionne pas avec le rendu côté serveur. La demande de fonctionnalité existe déjà.