Optimiser les applications React pour des performances maximales

Introduction

J'écris du code React depuis plus de 3 ans maintenant. Cependant, une chose sur laquelle je ne me suis pas concentré au départ était l’optimisation des performances de React. La plupart du temps, la dette technique s'accumule et il devient difficile d'optimiser les performances.

Il est assez difficile de se concentrer sur l'optimisation dès le début, mais vous pouvez planifier une optimisation de temps en temps pour éviter une énorme dette technique.

Nous allons examiner certaines des techniques d'optimisation pour React. Cela peut être implémenté pendant que vous écrivez du code. Il s'agit de choisir cette méthode plutôt qu'une autre méthode.

Alors, commençons.

1. Optimisation d'une grande liste

La liste de rendu est assez courante car il existe des composants dans React. Le rendu d’une grande liste est difficile car cela peut ralentir le rendu et l’utilisation de la mémoire. La virtualisation est le meilleur moyen de résoudre de tels problèmes. Il affiche simplement uniquement les listes visibles et d'autres éléments seront affichés en cas de besoin.

React Window et React Virtualized sont des bibliothèques populaires pour la liste de virtualisation. Ils ne restituent que les éléments visibles dans la fenêtre, réduisant considérablement le nombre de nœuds DOM rendus à un moment donné.

Voici un exemple avec React Window :

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

    const MyList = ({ items }) => (
      <List
        height={500} // Height of the container
        itemCount={items.length} // Total number of items
        itemSize={35} // Height of each item
        width={300} // Width of the container
      >
        {({ index, style }) => (
          <div style={style}>
            {items[index]}
          </div>
        )}
      </List>
    );

---

2. utiliserMemo

useMemo est un hook React qui mémorise le résultat d'un calcul. Ainsi, il ne permet pas de traitements multiples du calcul sauf en cas de changements dans les dépendances. Cela peut être utile pour optimiser les performances dans des scénarios où une fonction ou un calcul est coûteux et ne doit pas être réexécuté à chaque rendu.

La syntaxe de useMemo est :

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

Comme vous pouvez le voir, useMemo prend deux arguments :

• Une fonction qui renvoie une valeur afin qu'elle puisse être mémorisée.
• Un tableau de dépendances qui déterminent quand la valeur mémorisée doit être recalculée.

Voici un exemple d'utilisationMemo :

    import React, { useState, useMemo } from 'react';

    const ExpensiveComponent = ({ a, b }) => {
      const computeExpensiveValue = (a, b) => {
        console.log('Computing expensive value...');
        return a + b;
      };

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

      return (
        

          
Computed Value: {memoizedValue}
        
      );
    };

    const ParentComponent = () => {
      const [a, setA] = useState(1);
      const [b, setB] = useState(2);
      const [count, setCount] = useState(0);

      return (
        

          
           setCount(count + 1)}>Increment Count
        
      );
    };

---

3. Fractionnement de code

Dans une configuration traditionnelle, tous les composants de votre application sont regroupés dans un seul fichier. Le fractionnement de code est une technique d'optimisation permettant de décomposer votre application en morceaux plus petits. Cela réduit le temps de chargement de l'application à mesure que vous chargez des composants plus petits et évite d'autres composants inutiles.

Voici un exemple de fractionnement de code :

    import React, { useState } from 'react';

    function App() {
      const [component, setComponent] = useState(null);

      const loadComponent = async () => {
        const { default: LoadedComponent } = await import('./MyComponent');
        setComponent(<LoadedComponent />);
      };

      return (
        <div>
          <h1>Code Splitting Example</h1>
          <button onClick={loadComponent}>Load Component</button>
          {component}
        </div>
      );
    }

    export default App;

---

4. Réagissez à la charge paresseuse

React.Lazy est une méthode importante pour optimiser le chargement des composants. Il vous permet de charger des composants paresseusement. Cela signifie que ce composant n'est chargé qu'en cas de besoin. En utilisant cela, vous pouvez diviser votre application en composants plus petits et chargés à la demande.

React.lazy() est utilisé pour importer un composant dynamiquement. Lorsque le composant est nécessaire, il est chargé de manière asynchrone et, d'ici là, une interface utilisateur de secours (comme une roulette de chargement) peut être affichée.

Voici un exemple de Lazy Load :

    import React, { Suspense } from 'react';

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

    const App = () => {
      return (
        <div>
          <h1>My App</h1>
          <Suspense fallback={<div>Loading...</div>}>
            <LazyComponent />
          </Suspense>
        </div>
      );
    };

    export default App;

---

Limitation et anti-rebond

Ce n'est pas seulement spécifique à React mais aussi à la programmation générale lors de l'appel d'une fonction. La limitation est une technique qui définit la fréquence à laquelle une fonction est exécutée. Lorsqu'une fonction est limitée, elle n'est autorisée à s'exécuter qu'une seule fois dans un intervalle de temps spécifié, quel que soit le nombre de fois où l'événement est déclenché. Par exemple, ajouter une limitation à un clic sur un bouton afin que le bouton ne soit pas invoqué trop fréquemment.

Exemple de limitation :

    import React, { useState } from 'react';

    function ThrottledButton() {
      const [count, setCount] = useState(0);

      const throttle = (func, delay) => {
        let lastCall = 0;
        return () => {
          const now = new Date().getTime();
          if (now - lastCall >= delay) {
            lastCall = now;
            func();
          }
        };
      };

      const incrementCount = () => {
        setCount((prevCount) => prevCount + 1);
      };

      const throttledIncrement = throttle(incrementCount, 2000);

      return (
        <div>
          <h1>Count: {count}</h1>
          <button onClick={throttledIncrement}>Click Me</button>
        </div>
      );
    }

    export default ThrottledButton;

L'anti-rebond est utilisé pour garantir qu'une fonction doit être exécutée après un certain temps après son appel. Lorsqu'un événement se produit à plusieurs reprises, la fonction anti-rebond ne s'exécutera qu'une fois que l'événement aura cessé de se déclencher pendant la période de retard spécifiée. Par exemple, lorsque l'utilisateur saisit l'entrée de recherche et pour fournir des suggestions, nous attendons quelques millisecondes avant d'appeler la fonction afin que l'utilisateur termine la saisie.

Exemple d'anti-rebond :

    import React, { useState } from 'react';

    function debounce(func, delay) {
      let timeoutId;
      return function (...args) {
        if (timeoutId) {
          clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
          func(...args);
        }, delay);
      };
    }

    const DebouncedSearch = () => {
      const [query, setQuery] = useState('');

      const handleSearch = (event) => {
        setQuery(event.target.value);
        console.log('Searching for:', event.target.value);
        // Here you would typically trigger an API call or filter a list based on the query
      };

      const debouncedSearch = debounce(handleSearch, 500);

      return (
        <div>
          <h1>Search</h1>
          <input
            type="text"
            placeholder="Type to search..."
            onChange={debouncedSearch}
          />
          <p>Search Query: {query}</p>
        </div>
      );
    };

    export default DebouncedSearch;

Connectez-vous avec moi

Connectons-nous et restons informés de tout ce qui concerne la technologie, l'innovation et au-delà ! ?

• Twitter
• LinkedIn

Conclusion

L'optimisation des applications React est cruciale pour garantir leur fonctionnement fluide et efficace, d'autant plus qu'elles gagnent en complexité et en taille. En incorporant des techniques telles que la virtualisation de liste, la mémorisation avec useMemo, le fractionnement de code, le chargement paresseux, la limitation et l'anti-rebond, vous pouvez améliorer considérablement les performances de vos applications React.

J'espère que cette méthode sera bénéfique pour optimiser les performances de votre application React. Merci d'avoir lu l'article.

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!