Fragment |
Fragment |
|---|---|
| React | |
<Profiler> vous permet de mesurer les performances de rendu d'un arbre React par programmation.
|
<Profiler id="App" onRender={onRender}> <App /> </Profiler> |
Référence
| <Profiler> |
Enveloppez un arbre de composants dans un <Profiler> pour mesurer ses performances de rendu.
|
<Profiler id="App" onRender={onRender}> <App /> </Profiler> |
Propriétés
- id : chaîne identifiant la partie de l'interface utilisateur à mesurer.
- onRender : rappel onRender que React appelle à chaque mise à jour des composantes de l'arborescence profilée. Il reçoit des informations sur le rendu et son temps.
Avertissements
Le profilage entraîne une surcharge supplémentaire; il est donc désactivé par défaut dans la version de production. Pour activer le profilage en production, vous devez activer une version de production spécifique avec le profilage activé.
Rappel onRender
React appellera votre rappel onRender avec des informations sur ce qui a été rendu.
- function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
- // Temps de rendu agrégés ou logarithmiques...
- }
Paramètres
| Nom | Description |
|---|---|
| id | La propriété d'identification de chaîne de l'arbre <Profiler> venant d'être validé. Cela vous permet d'identifier la partie de l'arbre validée si vous utilisez plusieurs profileurs. |
| phase | «mount», «update» ou «nested-update». Cela vous permet de savoir si l'arbre vient d'être monté pour la première fois ou s'il a été restitué suite à une modification des propriétés, de l'état ou des crochets. |
| actualDuration | Le nombre de millisecondes nécessaires au rendu du <Profiler> et de ses descendants pour la mise à jour actuelle. Cela indique l'efficacité avec laquelle le sous-arbre utilise la mémorisation (par exemple, memo et useMemo). Idéalement, cette valeur devrait diminuer significativement après le montage initial, car de nombreux descendants n'auront besoin d'un nouveau rendu que si leurs propriétés spécifiques changent. |
| baseDuration | Nombre de millisecondes estimant le temps nécessaire pour restituer l'intégralité de la sous-arborescence <Profiler> sans optimisation. Ce calcul est effectué en additionnant les durées de rendu les plus récentes de chaque composante de l'arborescence. Cette valeur estime le coût de rendu le plus défavorable (par exemple, le montage initial ou une arborescence sans mémorisation). Comparez actualDuration à cette valeur pour vérifier si la mémorisation fonctionne. |
| startTime | Un horodatage numérique indiquant quand React a commencé à restituer la mise à jour actuelle. |
| commitTime | Un horodatage numérique indiquant le moment où React a validé la mise à jour actuelle. Cette valeur est partagée entre tous les profileurs d'un commit, ce qui permet de les regrouper si nécessaire. |
Utilisation
Mesure des performances de rendu par programmation
Enveloppez le composant <Profiler> autour d'une arborescence React pour mesurer ses performances de rendu.
|
<App> <Profiler id="Sidebar" onRender={onRender}> <Sidebar /> </Profiler> <PageContent /> </App> |
Cela nécessite deux propriétés : un identifiant (chaîne) et une fonction de rappel onRender que React appelle chaque fois qu'un composant de l'arborescence « valide » une mise à jour.
Inconvénient
Le profilage entraîne une surcharge supplémentaire ; il est donc désactivé par défaut dans la version de production. Pour activer le profilage en production, vous devez activer une version de production spécifique avec le profilage activé.
Remarque
- <Profiler> vous permet de collecter des mesures par programmation. Si vous recherchez un profileur interactif, essayez l'onglet « Profiler » dans les outils de développement React. Il offre des fonctionnalités similaires à celles d'une extension de navigateur.
Mesure de différentes parties de l'application
Vous pouvez utiliser plusieurs composants <Profiler> pour mesurer différentes parties de votre application :
|
<App> <Profiler id="Sidebar" onRender={onRender}> <Sidebar /> </Profiler> <Profiler id="Content" onRender={onRender}> <Content /> </Profiler> </App> |
Vous pouvez également imbriquer des composantes <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> |
Bien que <Profiler> soit une composante léger, il ne doit être utilisé qu'en cas de nécessité. Chaque utilisation augmente la charge CPU et mémoire de l'application.