Optimisation des applications React : techniques simples pour de meilleures performances

React est un outil populaire pour créer des interfaces utilisateur, mais à mesure que les applications grandissent, elles peuvent ralentir. Dans cet article, je vais passer en revue différentes techniques que vous pouvez utiliser pour optimiser votre application React.

1. Évitez les nouveaux rendus inutiles avec React.memo

Si vous avez un composant qui n'a pas besoin d'être mis à jour tout le temps, enveloppez-le avec React.memo. Cela aide React à se souvenir de la dernière sortie et à éviter le nouveau rendu si rien n'a changé.

import React from 'react';

const MyComponent = React.memo((props) => {
  // Your component logic
});

2. Empêcher le travail supplémentaire avec PureComponent

Si vous utilisez des composants de classe, étendez React.PureComponent au lieu de React.Component. Cela indique à React de ne refaire le rendu que si les accessoires ou l'état changent réellement.

import React from 'react';

class MyComponent extends React.PureComponent {
  // Your component logic
}

3. Utilisez useCallback et useMemo pour enregistrer le travail

Les hooks React useCallback et useMemo vous aident à économiser du travail en mémorisant les fonctions et les valeurs. Cela évite d'en créer de nouveaux à chaque rendu du composant.

• useCallback : Mémorise une fonction.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

• useMemo : Mémorise une valeur.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

4. Chargez du code à la demande avec React.lazy et Suspense

Chargez des parties de votre code uniquement lorsque cela est nécessaire à l'aide de React.lazy et Suspense. Cela rend votre chargement initial plus rapide.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

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

5. Diviser le code par itinéraires

Chargez uniquement le code dont vous avez besoin pour chaque page en divisant votre code par itinéraires. Cela accélère les temps de chargement initiaux.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { lazy, Suspense } from 'react';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <router>
      <suspense fallback="{<div">Loading...}>
        <switch>
          <route path="/" exact component="{Home}"></route>
          <route path="/about" component="{About}"></route>
        </switch>
      </suspense>
    </router>
  );
}

6. Chargement paresseux des images et des composants

Différez le chargement des images et des composants jusqu'à ce qu'ils soient nécessaires. Cela améliore le temps de chargement initial et les performances.

• Chargement paresseux des images : Utilisez l'attribut de chargement dans la balise img pour différer les images hors écran.

<img src="image.jpg" alt="Optimisation des applications React : techniques simples pour de meilleures performances" loading="lazy">

• Composants de chargement paresseux : Utilisez React.lazy et Suspense pour les composants.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

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

7. Évitez les fonctions en ligne dans JSX

Les fonctions en ligne dans JSX peuvent ralentir les choses car elles créent de nouvelles instances à chaque fois. Définissez-les en dehors de la méthode de rendu ou utilisez useCallback.

// Instead of this
<button onclick="{()"> doSomething()}>Click me</button>

// Do this
const handleClick = useCallback(() => {
  doSomething();
}, []);
<button onclick="{handleClick}">Click me</button>

8. Optimisez les grandes listes avec la virtualisation React

Lorsque vous traitez de grandes listes, utilisez des bibliothèques comme React-window ou React-Virtualized pour afficher uniquement ce qui est visible à l'écran, réduisant ainsi la charge.

import { FixedSizeList as List } from 'react-window';

const MyList = ({ items }) => (
  <list height="{500}" itemcount="{items.length}" itemsize="{35}" width="{300}">
    {({ index, style }) => (
      <div style="{style}">
        {items[index]}
      </div>
    )}
  </list>
);

9. Événements d'accélération et anti-rebond

Accélérez ou anti-rebond les fonctions fréquentes pour contrôler la fréquence à laquelle elles s'exécutent. Ceci est particulièrement utile pour des événements tels que le défilement ou la saisie.

import { useCallback } from 'react';
import { debounce } from 'lodash';

const handleInputChange = useCallback(
  debounce((value) => {
    // Handle the change
  }, 300),
  []
);

10. Utiliser des clés uniques pour les listes

Assurez-vous que chaque élément de la liste possède un accessoire clé unique. Cela permet à React de suivre les éléments et de les mettre à jour efficacement.

const items = list.map((item) => (
  <listitem key="{item.id}"></listitem>
));

11. Déployer la version de production

Utilisez toujours la version de production de votre application React pour bénéficier d'optimisations telles que la minification et l'élimination du code mort.

# Create a production build
npm run build

En utilisant ces techniques, vous pouvez rendre vos applications React plus rapides et plus efficaces, offrant ainsi une meilleure expérience à vos utilisateurs. L'optimisation est un processus continu, alors continuez à profiler et à améliorer régulièrement votre application.

Bon codage.

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!