Fermer

avril 30, 2021

5 techniques pour optimiser les performances sur une application React


Avant d'expédier une application React, le moins qu'une équipe ou un développeur ait à faire est de vérifier les performances et de chercher à optimiser l'application en fonction de l'expérience de l'utilisateur final.

L'optimisation des performances est une technique importante à prendre en compte avant d'envoyer un React application. Vous pouvez explorer différentes façons d'optimiser une application React qui peuvent permettre une augmentation significative de la vitesse et de l'expérience utilisateur globale pour vos applications.

Introduction

Lors de la création d'applications React, beaucoup de réflexion est apportée au fonctionnement de l'application. et finissent par chercher. Le moins qu'une équipe ou un développeur ait à faire est de vérifier les performances et de rechercher des techniques pour optimiser l'application pour l'expérience de l'utilisateur final. Vous oubliez souvent cette action, mais dans cet article, je vais partager cinq façons dont vous pouvez commencer à optimiser votre application pour de meilleures performances.

React est une bibliothèque JavaScript permettant de créer des interfaces utilisateur. React est livré avec plusieurs façons de minimiser le nombre d'opérations DOM coûteuses requises pour mettre à jour l'interface utilisateur. Pour de nombreuses applications, l'utilisation de React conduira à une interface utilisateur rapide sans faire beaucoup de travail pour optimiser spécifiquement les performances. Néanmoins, il existe plusieurs façons d'accélérer votre application React. Découvrons quelques-unes de ces techniques.

Lorsque vous travaillez avec React, vous devrez parfois rendre plusieurs éléments ou renvoyer un groupe d’éléments associés. Voici un exemple:

 function   App  ()   {
   return   (
     < h1 >  Hello React !  < /  h1 > 
     < h1 >  Hello React Again !  < /  h1 > 
  ) ; 
} 

Si vous essayez d'exécuter votre application avec le code ci-dessus, vous rencontrerez une erreur indiquant que Les éléments JSX adjacents doivent être enveloppé dans une étiquette jointe. Cela implique que vous devez encapsuler les deux éléments dans un div parent.

 function   App  ()   {
   return   (
     < div > 
       < h1 >  Hello React !  < /  h1 > 
       < h1 >  Bonjour Réagissez à nouveau !  < /  h1 > 
     < /  div > 
  ) [19659009]; 
} 

Cela corrigera l'erreur, mais cela comporte un certain degré de risque. Vous ajoutez un nœud supplémentaire au DOM, ce qui n'est pas nécessaire. Dans un cas comme celui-ci, où ce qui précède est un composant enfant qui sera inclus dans un composant parent, cela devient un problème.

 function   Table  ()   {
   return   (
     < table > 
       < td >  This is a Table Component  < /  td > 
       < Colonnes  / > 
     < /  table > 
  ) ; 
} 
    
 function   Colonnes  ()   {
   return   (
     < div > 
       < td >  Hello React !  < /  td > 
       < td >  Hello React Again !  <  /  td > 
     < /  div > 
  ) ; 
} 

Le HTML résultant pour le Table comp onent sera invalide en raison du div supplémentaire qui a été ajouté.

 function   Table  ()   {
   return   (
     < ] table > 
       < td >  Ceci est un composant de table  < /  td > 
       < div > 
         < td >  Hello React !  < /  td > 
         < td >  Bonjour Réagissez à nouveau !  < /  td > 
       < /  div >       
     <[19659015] /  table > 
  ) ; 
} 

Voyons un meilleur moyen de résoudre ce problème en utilisant React Fragment qui n'ajoutez aucun nœud supplémentaire au DOM. La syntaxe ressemble à ceci:

 function   Columns  ()   {
   return   (
     < React .  Fragment > 
       < td >  Hello React !  < /  td > 
       < td >  Bonjour Réagissez à nouveau !  < /  td > 
     < /  Réagissez .  Fragment > 
  ) ; 
} 

Vous pouvez également utiliser la syntaxe courte <> pour déclarer un fragment.

 function   Columns  ( )   {
   return   (
     <> 
       < td >  Hello React !  <[19659015] /  td > 
       < td >  Hello React Again !  < /  td > [19659014] < / > [19659020]) ; 
} 

Utiliser la version de production

Une autre façon d'optimiser une application React consiste à vous assurer de regrouper votre application pour la production avant de la déployer. Par défaut, votre application est en mode développement, ce qui signifie que React inclura des avertissements utiles. Cela peut être très utile pendant que vous développez, mais cela peut augmenter la taille de votre application et rendre les réponses plus lentes que d'habitude. Si votre projet est construit avec create-react-app vous pouvez résoudre ce problème en exécutant npm run build avant le déploiement, ce qui créera une version prête pour la production de votre application dans un build / dossier que vous pouvez ensuite déployer. Vous pouvez vérifier si votre application est en mode de développement ou de production à l'aide des React Developer Tools .

Si l'icône React est bleue sur fond sombre, cela signifie que votre application est en mode de production.

]  Le texte dit,

Si votre application React est en mode de développement, l'icône passe sur un arrière-plan rouge comme indiqué dans l'image ci-dessous.

 Texte dit, [19659152] Il convient également de noter que si vous utilisez React via un CDN, n'oubliez pas de mettre à jour React à partir des fichiers de développement vers ceux qui conviennent à la production.

 < script src  =  "https: / /unpkg.com/react@16/umd/react.production.min.js"[19659015[/)] =  "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" >  < /  script > 

Utilisez React.Suspense et React.Lazy pour Lazy Loadi ng Components

Le chargement différé est une excellente technique pour optimiser et accélérer le temps de rendu de votre application. L'idée du chargement différé est de charger un composant uniquement lorsqu'il est nécessaire. React est livré avec l'API React.lazy afin que vous puissiez rendre une importation dynamique en tant que composant normal. Ici, au lieu de charger votre composant régulier comme ceci:

import LazyComponent from './LazyComponent';[19459016[1965915219659007] const LazyComponent = React . paresseux ( () => import ( ] './ LazyComponent' ) ) ;

React.lazy prend une fonction qui doit appeler une dynamique import () . Cela renverra alors une Promise qui se résout en un module avec une exportation par défaut contenant un composant React.

Le composant paresseux doit être rendu dans un Suspense qui vous permet d'ajouter du contenu de secours comme état de chargement en attendant le chargement du composant différé.

 import  React   { Suspense }   from   'react' ; 
    
 const  LazyComponent  =  React .  paresseux  ( ()   = >   import  ( './ LazyComponent' ) ) ; 

 function   MyComponent  ()   {[19659012] return   (
   < div > 
     < Suspense fallback  =  { < div >  Chargement  ... .  < /  div > } > 
       < LazyComponent  / > 
     < /  Suspense >  
   < /  div > 
 ) ; 
} 

Utilisez React.memo pour la mémorisation de composants

React.memo est un excellent moyen d'optimiser les performances car il

En informatique, la mémorisation est une technique d'optimisation utilisée principalement pour accélérer les programmes informatiques en stockant les résultats d'appels de fonction coûteux et en renvoyant le résultat mis en cache lorsque les mêmes entrées se produisent à nouveau. [19659230] Voici comment cela fonctionne: Lorsqu'une fonction est rendue en utilisant cette technique, elle enregistre le résultat en mémoire, et la prochaine fois que la fonction avec les mêmes arguments est appelée, elle retourne le résultat enregistré sans exécuter à nouveau la fonction, ce qui vous permet d'économiser de la bande passante.

Dans le contexte de React, les fonctions sont les composants fonctionnels et arguments sont des accessoires . Voici un exemple:

 import  React  from   'react' ; 

 const  MyComponent  =  React .  mémo  ( props  =>    {
  
} ) ; 

React.memo est un composant d'ordre supérieur et il est similaire à React.PureComponent mais pour utiliser des composants de fonction au lieu de classes.

Virtualiser une grande liste à l'aide de react-window

Lorsque vous voulez rendre une énorme table ou liste de données, cela peut ralentir considérablement réduire les performances de votre application. La virtualisation peut aider dans un scénario comme celui-ci à l'aide d'une bibliothèque comme react-window . react-window aide à résoudre ce problème en ne restituant que les éléments de la liste qui sont actuellement visibles, ce qui permet de rendre efficacement des listes de toute taille.

 import  React  from   'react' [19659009]; 
 import   { FixedSizeList  as  List }   from   'react-window' ; 
 import   ' ./style.css'[19659009letter;[19659202Often style } )   =>   (
   < div className  =  { index %   2  ?   'ListItemOdd' [19659011]:   'ListItemEven' }  style  =  { style } > 
    Ligne  { index } 
   < /  div > 
) ; 
 const   Exemple   = [19659011] ()   =>   (
   < Liste
    className  =  "Liste" 
    hauteur  =  { 150 } 
    itemCount  =  { 1000 } 
    itemSize  =  { 35 } 
    width  =  { 300 } 
  > 
     { Row } 
   < /  List > [19659022]) ; 

https://codesandbox.io/s/react-window-example-1mt85

Conclusion

Les techniques décrites ci-dessus sont toutes d'excellentes façons pour vous de prendre mettre en pratique l'optimisation des performances de votre application. S'il y a une chose que vous retenez de cet article, que vous deviez toujours faire un effort pour créer une application performante qui améliorera considérablement la vitesse de votre application et l'expérience de votre utilisateur en construisant d'abord le projet, puis en optimisant les performances là où nécessaire; en faisant cela, vous n'avez qu'une longueur d'avance pour rendre vos utilisateurs heureux. Merci d'avoir lu et j'espère que vous avez trouvé cet article utile.

P.S. Vous pouvez me trouver sur Twitter @lauragift_ si vous souhaitez discuter d'autres techniques d'optimisation des performances. 🙂






Source link