Top 5 des astuces de performance pour les développeurs de React

Vos applications React ont-elles besoin d'un gain de performances? Découvrez les cinq principales choses que vous pouvez faire aujourd'hui pour améliorer les performances de vos applications.

React fait un excellent travail en ce qui concerne les performances, mais si vous avez une application complexe, vous pouvez commencer. pour voir les problèmes avec certains composants. Vous pouvez toujours faire quelque chose pour améliorer ses performances. Voici cinq astuces qui peuvent vous aider à ravir vos utilisateurs avec une application très performante.

1. Measure Render Times

Nous ne pouvons pas améliorer ce que nous ne pouvons pas mesurer. La première chose à faire pour améliorer les performances de notre application React consiste à mesurer le temps nécessaire au rendu de nos composants clés.

Auparavant, la méthode recommandée pour mesurer les performances de nos composants était d'utiliser le package react-addons-perf, mais la documentation officielle nous indique désormais l'API de chronométrage utilisateur du navigateur . 19659004] J'ai écrit un court article sur la procédure à suivre ici: Profilage de composants réactifs

2. Utilisation de la version de production

L’utilisation des versions de production de React améliore les performances de notre application pour deux raisons principales:

La première raison est que la taille des fichiers pour les versions de production de rea et rea-dom est beaucoup plus petite. Cela signifie que le navigateur de notre utilisateur doit télécharger, analyser et exécuter moins de choses, ce qui accélère le chargement de notre page.

Par exemple, pour React 16.5.1, voici les tailles que j'ai obtenues:

• 652K react-dom.development. js
• 92K react-dom.production.min.js
• 85K react.development.js
• 9.5K react.production.min.js

C'est une différence importante!

La deuxième raison est que les versions de production contiennent moins de code à exécuter. Des éléments comme les avertissements et les informations de profilage sont supprimés de ces versions, React sera donc plus rapide.

Voici un exemple d'application exécutant React en mode de développement avec un composant en cours de montage et de mise à jour:

Et voici le même exemple d'application exécutant React en mode de production :

.

Les temps de montage et de mise à jour sont systématiquement plus courts en mode production.

La documentation de React explique comment configurer votre projet pour qu'il utilise des versions de production avec des instructions détaillées pour différents outils tels que Browserify Brunch Rollup webpack et Créer une application de réaction .

3. Virtualiser les listes longues

Plus nous mettons d'éléments sur la page, plus le temps de rendu par le navigateur sera long et plus l'expérience utilisateur sera dégradée. Que faisons-nous si nous devons afficher une très longue liste d'éléments? Une solution populaire consiste à ne restituer que les éléments qui tiennent à l'écran, à écouter les événements de défilement et à afficher les éléments précédents et suivants selon les besoins. Cette idée est appelée "fenêtrage" ou "virtualisation".

Vous pouvez utiliser des bibliothèques telles que react-window ou react-virtualized pour mettre en oeuvre vos propres listes virtualisées. Si vous utilisez le composant Grid de Kendo UI, le défilement virtualisé est intégré, vous n'avez donc rien d'autre à faire.

Voici une petite application utilisant une liste virtualisée :

Remarquez comment le DOM montre qu'il n'y a que 20 nœuds tr dans ce corps, même si le tableau contient 50 000 éléments. Imaginez que vous essayez de rendre ces 50 000 éléments à l’avance sur un appareil bas de gamme!

4. Éviter la réconciliation avec PureComponent

React construit une représentation interne de l’interface utilisateur de notre application en fonction de ce que nous renvoyons dans chacune des méthodes de rendu de nos composants. C'est ce qu'on appelle souvent le DOM virtuel . Chaque fois que les accessoires ou l’état d’un composant changent, React restitue le rendu de ce composant et de ses enfants, compare la nouvelle version de ce DOM virtuel avec l’ancien et met à jour le DOM réel s’ils ne sont pas égaux. Ceci s'appelle la réconciliation .

Nous pouvons voir combien de fois nos composants se reconnaissent en ouvrant le Outils de développement de la réaction et en sélectionnant la case à cocher Highlight Updates : [[19659004]

Chaque fois qu'un composant effectue une nouvelle restitution, une bordure colorée apparaît autour de lui.

Le rendu d'un composant et l'exécution de cet algorithme de rapprochement sont généralement très rapides, mais c'est très rapide. pas libre. Si nous voulons que notre application fonctionne bien, nous devons éviter les redéfinitions et les réconciliations inutiles.

Une façon d'éviter les rediffusions inutiles dans un composant consiste à l'hériter de React.PureComponent au lieu de React. Composant. PureComponent effectue une comparaison superficielle des accessoires et de l'état actuels et suivants, et évite de les restituer s'ils sont tous identiques.

Dans cet exemple d'application utilisant PureComponent nous avons ajouté un fichier console.log à Méthode de rendu de chaque composant: