Lors de la création d'applications Web modernes, les performances sont essentielles. Les utilisateurs attendent des applications rapides et réactives, et même un léger retard peut entraîner de la frustration. React, bien que puissant, peut parfois souffrir de goulots d'étranglement en termes de performances, en particulier à mesure que la taille et la complexité des applications augmentent. Heureusement, il existe plusieurs techniques pour optimiser les performances, notamment la mémorisation, le chargement différé, etc.
Dans ce guide, nous détaillerons certains des moyens les plus efficaces d'optimiser les performances de vos applications React. Nous aborderons les bases de la mémorisation, du chargement paresseux et des outils tels que React Profiler pour vous aider à identifier et résoudre les goulots d'étranglement. Commençons !
Considérez votre application Web comme une voiture : peu importe son apparence extérieure, si elle ne fonctionne pas bien, l'expérience utilisateur en souffre. Dans les applications React, ces « performances » font référence à la rapidité avec laquelle vos composants s'affichent et à l'efficacité avec laquelle ils se mettent à jour lorsque les données ou l'état changent.
À mesure que votre application React évolue, le rendu inutile des composants ou le chargement simultané de lots lourds peut entraîner un ralentissement des performances. C'est pourquoi l'apprentissage des techniques d'optimisation des performances React est crucial pour créer des applications fluides et performantes.
Mémoisation est un mot sophistiqué qui signifie simplement mettre en cache le résultat d'un appel de fonction afin que vous n'ayez pas à le recalculer à chaque fois. Dans React, la mémorisation permet d'éviter les nouveaux rendus inutiles en mémorisant le résultat d'un rendu précédent et en utilisant ce résultat mis en cache si rien n'a changé.
Commençons par React.memo. Ce composant d'ordre supérieur empêche un nouveau rendu d'un composant si ses accessoires n'ont pas changé.
const MyComponent = React.memo(function MyComponent({ name }) { console.log('Rendered'); returnHello, {name}; });
Dans cet exemple, MyComponent n'est restitué que si le nom de la prop change. Si vous transmettez la même valeur de nom, React ignorera le rendu, améliorant ainsi les performances.
Ensuite, il y a useMemo. Ce hook est utilisé pour mémoriser des calculs ou des valeurs coûteux à l'intérieur de vos composants fonctionnels.
import { useMemo } from 'react'; function MyApp({ items }) { const expensiveCalculation = useMemo(() => { return items.reduce((total, item) => total item.value, 0); }, [items]); returnTotal Value: {expensiveCalculation}; }
Ici, le calcul ne s'exécute à nouveau que lorsque le tableau d'éléments change, ce qui permet de gagner du temps en évitant de recalculer le même résultat à chaque rendu.
Le chargement paresseux est une technique dans laquelle les composants sont chargés uniquement lorsqu'ils sont nécessaires, plutôt que de tout charger à l'avance. Cela permet de réduire le temps de chargement initial de votre application, ce qui la rend plus rapide.
React fournit une fonction intégrée appelée React.lazy() qui vous permet de charger des composants à la demande.
import React, { Suspense, lazy } from 'react'; const MyComponent = lazy(() => import('./MyComponent')); function App() { return (Loading...}> ); }
Dans cet exemple, MyComponent ne sera chargé que lorsqu'il est réellement nécessaire. Le composant Suspense fournit une interface utilisateur de secours (comme une roulette de chargement) pendant la récupération du composant, ce qui rend l'expérience utilisateur plus fluide.
Il est difficile d'optimiser quelque chose que vous ne pouvez pas mesurer. C'est là qu'intervient le React Profiler. Le React Profiler vous permet de suivre les performances de vos composants, d'identifier les rendus lents et de mesurer le « coût » des nouveaux rendus.
Pour utiliser React Profiler, enveloppez simplement une arborescence de composants avec
import { Profiler } from 'react'; function onRenderCallback( id, // the "id" prop of the Profiler tree that has just committed phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered) actualDuration, // time spent rendering the committed update baseDuration, // estimated time to render the entire subtree without memoization startTime, // when React began rendering this update commitTime, // when React committed this update interactions // the Set of interactions belonging to this update ) { console.log({ id, phase, actualDuration }); } function MyApp() { return (); }
À l'aide du profileur, vous pouvez suivre le temps nécessaire au rendu de chaque composant et trouver les domaines dans lesquels les performances peuvent être améliorées, comme les nouveaux rendus inutiles.
Au-delà de la mémorisation et du chargement différé, il existe plusieurs autres techniques pour améliorer les performances de votre application React :
const OtherComponent = lazy(() => import('./OtherComponent'));
const handleClick = useCallback(() => { console.log('Clicked'); }, []);
const handleScroll = debounce(() => { console.log('Scroll event'); }, 300);
Créer des applications React rapides et efficaces nécessite une combinaison de techniques. En utilisant memoization avec React.memo et useMemo, vous pouvez éviter les nouveaux rendus inutiles. Les composants Chargement paresseux avec React.lazy vous permettent d'améliorer les temps de chargement en récupérant uniquement les composants lorsqu'ils sont nécessaires. Le React Profiler vous aide à identifier les goulots d'étranglement des performances et à les optimiser.
En combinaison avec des stratégies telles que le fractionnement du code et l'optimisation des événements, vous pouvez garantir que vos applications React offrent une expérience utilisateur fluide et réactive, même si leur taille et leur complexité augmentent.
Prêt à faire passer les performances de votre application React au niveau supérieur ? Essayez ces techniques d'optimisation dans vos projets et regardez la vitesse de votre application s'améliorer !
Si vous avez apprécié cet article, pensez à soutenir mon travail :
Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.
Copyright© 2022 湘ICP备2022001581号-3