Techniques d'optimisation des performances de React : mémorisation, chargement différé, etc.

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 différé et des outils tels que React Profiler pour vous aider à identifier et résoudre les goulots d'étranglement. Commençons !

Introduction : Pourquoi les performances sont importantes dans les applications React modernes

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émisation dans React

Comment utiliser React.memo et useMemo efficacement

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é.

Réagir.mémo

Commençons par React.memo. Ce composant d'ordre supérieur empêche un composant d'être restitué si ses accessoires n'ont pas changé.

Exemple:

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return <div>Hello, {name}</div>;
});

Dans cet exemple, MyComponent n'est restitué que si le nom de l'accessoire change. Si vous transmettez la même valeur de nom, React ignorera le rendu, améliorant ainsi les performances.

utiliserMémo

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.

Exemple:

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total + item.value, 0);
  }, [items]);

  return <div>Total Value: {expensiveCalculation}</div>;
}

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.

Composants de chargement paresseux

Améliorer les temps de chargement avec React.lazy

Le chargement paresseux est une technique où 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.

Exemple:

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return <div>Hello, {name}</div>;
});

Dans cet exemple, MyComponent ne sera chargé que lorsqu'il sera 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.

React Profiler pour la surveillance des performances

Comment identifier les goulots d'étranglement

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 et fournissez une fonction de rappel pour collecter les données de performances.

Exemple:

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total + item.value, 0);
  }, [items]);

  return <div>Total Value: {expensiveCalculation}</div>;
}

À 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.

Autres stratégies d'optimisation

Fractionnement de code, optimisation de la gestion des événements, etc.

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 :

1. Partage de code : divisez votre application en morceaux plus petits qui peuvent être chargés à la demande à l'aide de la fonction de fractionnement de code de Webpack. Cela réduit la taille initiale du paquet.

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <suspense fallback="{<div">Loading...}>
      <mycomponent></mycomponent>
    </suspense>
  );
}

1. Optimisation de la gestion des événements : utilisez le hook useCallback pour mémoriser les gestionnaires d'événements, empêchant ainsi leur recréation à chaque rendu.

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 (
    <profiler id="App" onrender="{onRenderCallback}">
      <mycomponent></mycomponent>
    </profiler>
  );
}

1. Anti-rebond et limitation : optimisez les écouteurs d'événements comme le défilement ou le redimensionnement en les anti-rebondissant ou en les limitant pour limiter la fréquence des mises à jour.

   const OtherComponent = lazy(() => import('./OtherComponent'));

Conclusion : créer des applications React hautes performances avec ces techniques

Créer des applications React rapides et efficaces nécessite une combinaison de techniques. En utilisant la mémoisation avec React.memo et useMemo, vous pouvez éviter les nouveaux rendus inutiles. Les composants de 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 :

• Achete-moi un café
• Réservez un appel pour du mentorat ou des conseils de carrière
• Suivez-moi sur Twitter
• Connectez-vous sur LinkedIn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!