Optimisation des performances dans les applications React

La

La performance est un aspect crucial du développement Web, en particulier dans les applications React où l'interface utilisateur est très dynamique. Dans cet article de blog, je partagerai quelques stratégies et bonnes pratiques qui peuvent vous aider à optimiser vos applications React pour garantir qu'elles fonctionnent correctement, se chargent rapidement et offrent une meilleure expérience utilisateur.

---

1. Mémorisation avec React.memo()

React restitue les composants par défaut, même si leurs accessoires n'ont pas changé. Cela peut entraîner des rendus inutiles et avoir un impact sur les performances. Pour éviter cela, nous pouvons utiliser React.memo() pour mémoriser les composants fonctionnels. Il indique à React d'ignorer le rendu d'un composant si ses accessoires n'ont pas changé.

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

2. Utilisez les crochets useCallback et useMemo

Pour les fonctions et les valeurs calculées qui ne doivent être recalculées que lorsque des dépendances spécifiques changent, les hooks useCallback et useMemo sont d'excellents outils.

• useMemo est utilisé pour mémoriser des calculs coûteux

• useCallback est utilisé pour mémoriser les fonctions de rappel
  

const memoizedCallback = useCallback(() => {
  doSomething();
}, [dependency]);
const memoizedValue = useMemo(() => computeExpensiveValue(), [dependency]);

3. Chargement paresseux Composants

Pour les applications plus volumineuses, tout charger en même temps peut ralentir les performances. React fournit une prise en charge intégrée du chargement paresseux des composants à l'aide de React.lazy() et Suspense. Cette approche vous permet de charger les composants uniquement lorsqu'ils sont nécessaires, réduisant ainsi le temps de chargement initial.

const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyApp() {
  return (
    <suspense fallback="{<div">Loading...}>
      <lazycomponent></lazycomponent>
    </suspense>
  );
}

4. Optimisez les rendus avec shouldComponentUpdate et PureComponent

Dans les composants basés sur des classes, l'utilisation de ShouldComponentUpdate peut empêcher les nouveaux rendus inutiles en permettant de contrôler le moment où le composant doit être mis à jour.

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Return true if the component should update
    return nextProps.someValue !== this.props.someValue;
  }
}

Vous pouvez également utiliser React.PureComponent pour effectuer automatiquement une comparaison superficielle des accessoires et de l'état, empêchant ainsi les nouveaux rendus s'il n'y a aucun changement.

class MyPureComponent extends React.PureComponent {
  // This automatically prevents re-renders on shallow prop/state equality
}

5. Fenêtrage/LazyRendu

Si votre application doit afficher des listes ou des tableaux volumineux, les afficher tous en même temps peut avoir un impact sur les performances. Des bibliothèques comme react-window et react-virtualized peuvent aider en affichant uniquement les parties visibles de la liste, améliorant ainsi considérablement les performances.

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>
);

6. Fractionnement de code

Le fractionnement du code vous permet de diviser votre code en paquets plus petits, chargés à la demande. Cela peut réduire considérablement le temps de chargement initial. Avec des outils tels que Webpack et la prise en charge intégrée de React pour les importations dynamiques, vous pouvez facilement implémenter le fractionnement de code.

import('./MyComponent').then((module) => {
  const MyComponent = module.default;
  // Do something with MyComponent
});

7. Utilisez un CDN pour les actifs statiques

La diffusion d'actifs statiques tels que des images, des polices et des feuilles de style à partir d'un réseau de diffusion de contenu (CDN) réduit la charge sur votre serveur et accélère la livraison de ces actifs aux utilisateurs.

8. Évitez les fonctions anonymes dans JSX

Chaque fois qu'un composant est restitué, de nouvelles instances de fonctions anonymes sont créées, entraînant des problèmes de performances potentiels. Au lieu de cela, définissez la fonction en dehors du JSX ou utilisez useCallback pour la mémoriser.

// Avoid this
<button onclick="{()"> handleClick()}>Click Me</button>

// Do this instead
const handleClick = useCallback(() => {
  // Handle click
}, []);
<button onclick="{handleClick}">Click Me</button>

9. Évitez la surcharge de données

La récupération de données inutiles peut ralentir l'application, en particulier sur les réseaux lents. Utilisez la pagination, le défilement infini ou la récupération de données conditionnelle pour limiter la quantité de données récupérées du serveur.

10. Minimisez la Réconciliation avec des accessoires clés

Lors du rendu des listes dans React, la fourniture d'accessoires clés uniques aide React à identifier les éléments qui ont été modifiés, ajoutés ou supprimés, minimisant ainsi le travail de réconciliation et améliorant les performances.

{items.map(item => (
  <div key="{item.id}">{item.name}</div>
))}

---

Conclusion

L'optimisation des performances dans les applications React consiste à comprendre comment React restitue les composants et à gérer les rendus inutiles. En tirant parti d'outils tels que React.memo(), useCallback, useMemo, le chargement différé et le fractionnement de code, vous pouvez améliorer considérablement les performances de vos applications React.

N'oubliez pas que l'objectif n'est pas de tout optimiser prématurément, mais plutôt d'être attentif aux performances à mesure que votre application gagne en complexité. Si vous avez d'autres conseils d'optimisation des performances pour React, n'hésitez pas à les partager dans les commentaires !

Auteur :
Rafi Ferdos - portefeuille

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!