Méthodes d'amélioration et d'optimisation des performances dans les applications React

React permet aux applications Web de mettre à jour rapidement leurs interfaces utilisateur (IU), mais cela ne le fait pas. ne signifie pas que votre application React moyenne ou grande fonctionnera efficacement. Ses performances dépendront de la façon dont vous utilisez React lors de sa construction et de votre compréhension du fonctionnement de React et du processus par lequel les composants vivent les différentes phases de leur cycle de vie. React offre de nombreuses améliorations de performances à une application Web, et vous pouvez obtenir ces améliorations grâce à diverses techniques, fonctionnalités et outils.

Dans ce didacticiel, nous aborderons différentes méthodes d'optimisation des performances dans les applications React, ainsi que les fonctionnalités de React que nous pouvons utiliser pour améliorer les performances.

Par où commencer pour optimiser les performances dans une application React?

Nous ne pouvons pas commencer à optimiser une application sans savoir exactement quand et où l'optimiser. Vous vous demandez peut-être: «Par où commencer?»

Pendant le processus de rendu initial, React crée une arborescence DOM de composants. Ainsi, lorsque les données changent dans l'arborescence DOM, nous voulons que React restitue uniquement les composants qui ont été affectés par la modification, en ignorant les autres composants de l'arborescence qui n'ont pas été affectés.

Cependant, React pourrait finir par rendre tous les composants dans l'arborescence DOM, même si tous ne sont pas affectés. Cela se traduira par un temps de chargement plus long, du temps perdu et même des ressources CPU gaspillées. Nous devons empêcher que cela se produise. C'est donc là que nous concentrerons nos efforts d'optimisation.

Dans cette situation, nous pourrions configurer chaque composant pour qu'il ne rende ou diffère que lorsque cela est nécessaire, afin d'éviter de gaspiller des ressources et du temps.

Mesurer les performances

Ne jamais démarrer le processus d'optimisation de votre application React en fonction de ce que vous ressentez. Utilisez plutôt les outils de mesure disponibles pour analyser les performances de votre application React et obtenir un rapport détaillé de ce qui pourrait la ralentir.

Analyse des composants React avec l'onglet Performances de Chrome

Selon la documentation de React, alors que vous êtes toujours en mode développement, vous pouvez utiliser l'onglet "Performances" dans le navigateur Chrome pour visualiser comment les composants React se montent, se mettent à jour et se démontent.
Par exemple, l'image ci-dessous montre le profilage de l'onglet «Performances» de Chrome et l'analyse de mon blog en mode développement.

Pour ce faire, procédez comme suit:

1. Désactivez temporairement toutes les extensions, en particulier React Developer Tools, car elles peuvent perturber le résultat de l'analyse. Vous pouvez facilement désactiver les extensions en exécutant votre navigateur en mode navigation privée.
2. Assurez-vous que l'application s'exécute en mode développement. Autrement dit, l'application doit être exécutée sur votre hôte local.
3. Ouvrez les outils de développement de Chrome, cliquez sur l'onglet "Performances", puis cliquez sur le bouton "Enregistrer".
4. Effectuez les actions que vous souhaitez profiler. N'enregistrez pas plus de 20 secondes, sinon Chrome pourrait se bloquer.
5. Arrêtez l'enregistrement.
6. Les événements React seront regroupés sous l'étiquette "User Timing".

Les chiffres du profileur sont relatifs. La plupart du temps et les composants seront rendus plus rapidement en production. Néanmoins, cela devrait vous aider à déterminer quand l'interface utilisateur est mise à jour par erreur, ainsi que la profondeur et la fréquence des mises à jour de l'interface utilisateur.

React Developer Tools Profiler

D'après Documentation de React , dans react-dom 16.5+ et react-native 0.57+, des capacités de profilage améliorées sont disponibles en mode développeur à l'aide de React Developer Tools Profiler. Le profileur utilise l'API expérimentale Profiler de React pour rassembler les informations de synchronisation de chaque composant rendu, afin d'identifier les goulots d'étranglement des performances dans une application React.

Il suffit de télécharger React Developer Tools pour votre navigateur, puis vous pourrez utilisez l'outil de profilage qui l'accompagne. Le profileur ne peut être utilisé qu'en mode développement ou dans la version production-profilage de React v16.5 +. L'image ci-dessous est le résumé du profileur de mon blog en mode développement utilisant React Developer Tools Profiler:

Pour atteindre Pour cela, procédez comme suit:

1. Téléchargez React Developer Tools.
2. Assurez-vous que votre application React est soit en mode de développement, soit dans la version de production-profilage de React v16.5 +.
3. Ouvrez les «Developer Tools» de Chrome. languette. Un nouvel onglet nommé «Profiler» sera disponible, fourni par React Developer Tools.
4. Cliquez sur le bouton «Enregistrer» et effectuez les actions que vous souhaitez profiler. Idéalement, arrêtez l'enregistrement après avoir effectué les actions que vous souhaitez profiler.
5. Un graphique (connu sous le nom de graphique de flamme) apparaîtra avec tous les gestionnaires d'événements et les composants de votre application React.

Remarque : Voir la documentation pour plus d'informations.

Mémorisation avec React.memo ()

React v16 a été publié avec une API supplémentaire, un composant d'ordre supérieur appelé React.memo () . Selon la documentation cela n'existe qu'en tant qu'optimisation des performances .

Son nom, " mémo " vient de la mémorisation, qui est essentiellement une forme de optimisation utilisée principalement pour accélérer le code en stockant les résultats d'appels de fonction coûteux et en renvoyant le résultat stocké chaque fois que la même fonction coûteuse est appelée à nouveau.

La mémorisation est une technique pour exécuter une fonction une fois, généralement une fonction pure, puis enregistrer le résultat dans la mémoire. Si nous essayons d'exécuter à nouveau cette fonction, avec les mêmes arguments qu'avant elle renverra simplement le résultat précédemment enregistré de l'exécution de la première fonction, sans exécuter à nouveau la fonction.

Mappage de la description ci-dessus avec l'écosystème React, les fonctions mentionnées sont des composants React et les arguments sont des accessoires.

Le comportement par défaut d'un composant déclaré à l'aide de React.memo () est qu'il ne s'affiche que si les accessoires du composant ont modifié. Il fait une comparaison superficielle des accessoires pour vérifier cela, mais une option est disponible pour le remplacer.

React.memo () améliore les performances d'une application React en évitant de restituer les composants dont les accessoires

Le code ci-dessous est la syntaxe de base de React.memo () :

 const MemoizedComponent = React.memeo ((props) = > {
// Le code du composant entre ici
})

Quand utiliser React.memo ()

• Composant fonctionnel pur
  Vous pouvez utiliser React.memo () si votre composant est fonctionnel, reçoit les mêmes accessoires, et rend toujours la même sortie. Vous pouvez également utiliser React.memo () sur des composants à fonctionnalité non pure avec des crochets React.
• Le composant s'affiche souvent
  Vous pouvez utiliser React.memo () pour envelopper un composant qui s'affiche souvent.
• Le composant est restitué avec les mêmes accessoires
  Utilisez React.memo () pour envelopper un composant qui est généralement fourni avec le mêmes accessoires lors du nouveau rendu.
• Éléments moyens à élevés
  Utilisez-le pour un composant qui contient un nombre moyen à élevé d'éléments d'interface utilisateur pour vérifier l'égalité des accessoires.

Remarque : Soyez prudent lors de la mémorisation de composants qui utilisent des accessoires comme rappels. Assurez-vous d'utiliser la même instance de fonction de rappel entre les rendus. En effet, le composant parent peut fournir différentes instances de la fonction de rappel sur chaque rendu, ce qui entraînera la rupture du processus de mémorisation. Pour résoudre ce problème, assurez-vous que le composant mémorisé reçoit toujours la même instance de rappel.

Voyons comment utiliser la mémorisation dans une situation réelle. Le composant fonctionnel ci-dessous, appelé «Photo», utilise React.memo () pour empêcher un nouveau rendu.

 fonction d'exportation Photo ({title, views}) {
  revenir (
    

      
 Titre de la photo: {title} 
      
 Emplacement: {location} 
    
  );
}
// mémorise le composant
export const MemoizedPhoto = React.memo (Photo);

Le code ci-dessus se compose d'un composant fonctionnel qui affiche un div contenant un titre de photo et l'emplacement du sujet sur la photo. Nous mémorisons également le composant en créant une nouvelle fonction et en l'appelant MemoizedPhoto . La mémorisation du composant photo empêchera le composant de restituer tant que les accessoires, titre et emplacement sont les mêmes sur les rendus suivants.

 // Lors du premier rendu, React appelle la fonction MemoizedPhoto.


// Au prochain rendu, React n'appelle pas la fonction MemoizedPhoto,
// empêchant le rendu

Ici, React n'appelle la fonction mémorisée qu'une seule fois. Il ne rendra pas le composant lors du prochain appel tant que les accessoires resteront les mêmes.

Bundling And Minification

Dans les applications à page unique React, nous pouvons regrouper et minimiser tout notre code JavaScript dans un seul fichier. C'est correct, tant que notre application est relativement petite.

À mesure que notre application React grandit, regrouper et réduire tout notre code JavaScript en un seul fichier devient problématique, difficile à comprendre et fastidieux. Cela affectera également les performances et le temps de chargement de notre application React, car nous envoyons un gros fichier JavaScript au navigateur. Donc, nous avons besoin d'un processus pour nous aider à diviser la base de code en différents fichiers et à les livrer au navigateur à intervalles selon les besoins.

Dans une situation comme celle-ci, nous pouvons utiliser une forme de regroupeur d'actifs comme Webpack puis de tirer parti de sa fonctionnalité de fractionnement de code pour diviser notre application en plusieurs fichiers.

Le fractionnement de code est suggéré dans la documentation de Webpack comme moyen d'améliorer le temps de chargement d'une application. Il est également suggéré dans la documentation de React pour le chargement paresseux (ne servant que les choses dont l'utilisateur a actuellement besoin), ce qui peut considérablement améliorer les performances.

Webpack suggère trois approches générales pour fractionnement de code:

• Points d'entrée
  Fractionnement manuel du code à l'aide de la configuration d'entrée.
• Prévention de la duplication
  Utilisez SplitChunksPlugin pour dédoublonner et fractionner des segments.
• Importations dynamiques
  Fractionner le code via des appels de fonction en ligne dans les modules.

Avantages du fractionnement de code

• Le fractionnement de code assiste les ressources de cache du navigateur et le code qui ne change pas souvent.
• Il aide également le navigateur pour télécharger des ressources en parallèle, ce qui réduit le temps de chargement global de l'application.
• Il nous permet de diviser le code en morceaux qui seront chargés à la demande ou selon les besoins de l'application.
• Il conserve le téléchargement initial dans g de ressources au premier rendu relativement petit, réduisant ainsi le temps de chargement de l'application.

Structures de données immuables [19659002] La documentation de React parle du pouvoir de ne pas muter les données. Toutes les données qui ne peuvent pas être modifiées sont immuables. L'immuabilité est un concept que les programmeurs React doivent comprendre.

Une valeur ou un objet immuable ne peut pas être modifié. Ainsi, lorsqu'il y a une mise à jour, une nouvelle valeur est créée en mémoire, laissant l'ancienne intacte.

Nous pouvons utiliser des structures de données immuables et React.PureComponent pour vérifier automatiquement un changement d'état complexe. Par exemple, si l'état de votre application est immuable, vous pouvez réellement enregistrer tous les objets d'état dans un magasin unique avec une bibliothèque de gestion d'état comme Redux ce qui vous permet d'implémenter facilement les fonctionnalités d'annulation et de rétablissement. [19659005] N'oubliez pas que nous ne pouvons pas modifier les données immuables une fois qu'elles sont créées.

Avantages des structures de données immuables

• Elles n'ont aucun effet secondaire.
• Les objets de données immuables sont faciles à créer, tester et utiliser. [19659019] Ils nous aident à écrire une logique qui peut être utilisée pour vérifier rapidement les mises à jour dans l'état, sans avoir à vérifier les données encore et encore.
• Ils aident à empêcher le couplage temporel (un type de couplage dans lequel le code dépend de la

Les bibliothèques suivantes aident à fournir un ensemble de structures de données immuables:

• immutability-helper
  Mute une copie de données sans changer la source.
• Immutable.js [19659096] Collections de données persistantes immuables pour JavaSc ript augmente l'efficacité et la simplicité.
• seamless-immutable
  Les structures de données immuables pour JavaScript deviennent rétrocompatibles avec les tableaux et objets JavaScript normaux.
• React-copy-write
  Cela donne état immuable avec une API mutable.

Autres méthodes pour améliorer les performances

Utiliser une génération de production avant le déploiement

La documentation de React suggère d'utiliser la génération de production réduite lors du déploiement de votre application.

Évitez les fonctions anonymes

Parce que les fonctions anonymes ne sont pas affectées d'un identifiant (via const / let / var ), ils ne sont pas persistants chaque fois qu'un composant est inévitablement rendu à nouveau. Ceci oblige JavaScript à allouer de la nouvelle mémoire chaque fois que ce composant est restitué, au lieu d'allouer une seule pièce de mémoire une seule fois, comme lorsque des fonctions nommées sont utilisées.

 import React from 'react';

// Ne fais pas ça.
classe Dont étend Component {
  render () {
    revenir (
       console.log ('Ne pas faire ça')}>
        Ne le fais pas
      
    );
  }
}

// La meilleure façon
classe Do étend Component {
  handleClick = () => {
    console.log ('C'est OK');
  }
  render () {
    revenir (
      
        Faire
      
    );
  }
}

Le code ci-dessus montre deux façons différentes de faire en sorte qu'un bouton effectue une action au clic. Le premier bloc de code utilise une fonction anonyme dans l'accessoire onClick () ce qui affecterait les performances. Le deuxième bloc de code utilise une fonction nommée dans la fonction onClick () ce qui est la bonne façon dans ce scénario.

Le montage et le démontage de composants est souvent coûteux

Utilisation de conditions ou de tenaries pour créer un la disparition du composant (c'est-à-dire son démontage) n'est pas conseillée, car le composant fait disparaître entraînera la repeinture et la refusion du navigateur . Il s'agit d'un processus coûteux car les positions et géométries des éléments HTML dans le document devront être recalculées. À la place, nous pouvons utiliser les propriétés d'opacité et de visibilité de CSS pour masquer le composant. De cette façon, le composant sera toujours dans le DOM mais invisible, sans aucun coût de performance.

Virtualize Long Lists

La documentation suggère que si vous rendez une liste avec une grande quantité de données , vous devez afficher une petite partie des données de la liste à la fois dans la fenêtre visible. Ensuite, vous pouvez afficher plus de données pendant le défilement de la liste; par conséquent, les données s'affichent uniquement lorsqu'elles se trouvent dans la fenêtre. Ce processus est appelé «fenêtrage». Dans le fenêtrage, un petit sous-ensemble de lignes est rendu à un instant donné. Il existe des bibliothèques populaires pour ce faire, dont deux sont gérées par Brian Vaughn:

Conclusion

Il existe plusieurs autres méthodes pour améliorer les performances de votre application React. Cet article présente les méthodes d'optimisation des performances les plus importantes et les plus efficaces.

J'espère que vous avez apprécié la lecture de ce didacticiel. Vous pouvez en savoir plus via les ressources répertoriées ci-dessous. Si vous avez des questions, laissez-les dans la section commentaires ci-dessous. Je serai heureux de répondre à chacun d’eux.

Références et ressources connexes

(ks, ra, al, il)