La création d'applications évolutives dans React nécessite plus qu'une simple logique métier solide. L'architecture de vos composants joue un rôle important dans la façon dont votre application devient maintenable, performante et flexible à mesure qu'elle se développe. L'une des tâches fondamentales de nombreuses applications Web consiste à gérer des listes de données. Qu'il s'agisse de rendu de listes de produits, de tableaux ou de tableaux de bord, vous rencontrerez souvent des scénarios qui exigent des structures de liste reproductibles et réutilisables.

En créant des composants de liste réutilisables, vous pouvez réduire considérablement la complexité de votre base de code tout en améliorant la maintenabilité et l'évolutivité. Cet article de blog explorera comment créer des composants de liste réutilisables dans React, pourquoi c'est important pour la mise à l'échelle des applications, et fournira des exemples de code détaillés pour vous guider tout au long du processus.

Pourquoi la réutilisabilité est importante pour la mise à l'échelle des applications React

La réutilisabilité est essentielle lorsqu'il s'agit de faire évoluer les applications React. Au lieu de dupliquer le code pour gérer différents composants de liste dans votre application, la création de composants de liste réutilisables vous permet d'abstraire la logique commune et la structure de l'interface utilisateur en composants autonomes. Cela permet à vos composants React de croître de manière modulaire et empêche la duplication de code, ce qui peut entraîner des bogues potentiels et des problèmes de maintenance à mesure que votre application se développe.

En créant des composants réutilisables, vous pouvez transmettre divers accessoires pour contrôler le rendu des listes, rendant ainsi votre application plus dynamique et flexible sans réécrire la même logique pour chaque cas d'utilisation. Cette approche rend non seulement votre application évolutive, mais améliore également l'expérience du développeur en simplifiant la lisibilité et la maintenabilité du code.

Concepts de base des composants de liste réutilisables

Pour créer des composants de liste réutilisables et évolutifs, vous devez comprendre plusieurs concepts React :

Props et State : ceux-ci vous permettent respectivement de transmettre des données à vos composants et de contrôler le comportement interne de vos composants.

Méthodes de tableau : des méthodes telles que .map(), .filter() et .reduce() sont essentielles pour transformer des tableaux dans les composants React.

Composition plutôt qu'héritage : dans React, le modèle de composition est préféré à l'héritage. Vous pouvez créer des interfaces utilisateur complexes en combinant des composants plus petits et réutilisables.

Interface utilisateur basée sur les accessoires : les composants de liste réutilisables doivent être pilotés par des accessoires. Cela vous permet de transmettre différentes données, logiques de rendu et même styles à partir des composants parents.

Exemple 1 : un composant de liste simple et réutilisable

Commençons par créer un composant de liste simple et réutilisable qui peut accepter un tableau d'éléments comme accessoire et les restituer dynamiquement :

import React from 'react';

const SimpleList = ({ items }) => {
  return (
    

{items.map((item, index) => (
• {item}
))}

Dans cet exemple, SimpleList accepte un accessoire items, qui est un tableau. Nous utilisons la fonction .map() pour parcourir le tableau et restituer chaque élément dans une liste non ordonnée (

). Chaque élément est enveloppé dans un élément
• . L'accessoire clé garantit que React peut mettre à jour efficacement le DOM lorsque la liste change.

  Exemple d'utilisation :
  

  import React from 'react';
  import SimpleList from './SimpleList';
  
  const App = () => {
    const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
  
    return (
      
  
        
  Fruit List
        
      
    );
  };
  
  export default App;
  

  Cet exemple affiche une liste de base de fruits. Le composant est suffisamment flexible pour que vous puissiez lui transmettre n'importe quel tableau de données.

  Amélioration de la réutilisabilité du composant Liste

  Bien que l'exemple ci-dessus soit fonctionnel, il est très limité. Dans les applications du monde réel, vous devez souvent gérer des exigences plus complexes, telles que le rendu conditionnel des éléments de liste, l'application de styles personnalisés ou l'ajout d'écouteurs d'événements à des éléments individuels.

  Rendons notre SimpleList plus réutilisable en autorisant une logique de rendu personnalisée via un accessoire de rendu.

  Exemple 2 : Utilisation d'accessoires de rendu pour le rendu de liste personnalisé

  Les accessoires de rendu sont un modèle dans React qui vous permet de contrôler ce qui est rendu à l'intérieur d'un composant. Voici comment utiliser ce modèle pour permettre le rendu personnalisé des éléments de liste :
  

  const ReusableList = ({ items, renderItem }) => {
    return (
      

  {items.map((item, index) => (
  • {renderItem(item)}
  ))}
  ); };

  Dans ce cas, le composant RéutilisableList accepte un accessoire renderItem, qui est une fonction qui prend un élément et renvoie JSX. Cela fournit un moyen flexible de contrôler la façon dont chaque élément de la liste est rendu.

  Exemple d'utilisation :
  

  const App = () => {
    const users = [
      { id: 1, name: 'John Doe', age: 30 },
      { id: 2, name: 'Jane Smith', age: 25 },
    ];
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

  Dans cet exemple, la prop renderItem nous permet de personnaliser la façon dont chaque utilisateur est affiché. Nous pouvons désormais réutiliser le même composant de liste pour n'importe quelle structure de données, en le restituant en fonction du cas d'utilisation spécifique.

  Exemple 3 : Rendre les composants de liste extensibles avec des composants d'ordre supérieur

  Un autre modèle puissant dans React est le composant d'ordre supérieur (HOC). Un HOC est une fonction qui prend un composant et renvoie un nouveau composant avec des fonctionnalités supplémentaires.

  Par exemple, si nous souhaitions améliorer notre RéutilisableList avec des comportements supplémentaires tels que la récupération de données ou le rendu conditionnel, nous pourrions utiliser un HOC.
  

  const withLoading = (Component) => {
    return function WithLoadingComponent({ isLoading, ...props }) {
      if (isLoading) return 
  Loading...
  ;
      return ;
    };
  };
  

  Ici, le withLoading HOC ajoute un comportement de chargement à n'importe quel composant. Appliquons-le à notre RéutilisableList :
  

  const EnhancedList = withLoading(ReusableList);
  
  const App = () => {
    const [isLoading, setIsLoading] = React.useState(true);
    const [users, setUsers] = React.useState([]);
  
    React.useEffect(() => {
      setTimeout(() => {
        setUsers([
          { id: 1, name: 'John Doe', age: 30 },
          { id: 2, name: 'Jane Smith', age: 25 },
        ]);
        setIsLoading(false);
      }, 2000);
    }, []);
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

  Dans cet exemple, le withLoading HOC entoure RéutilisableList, y ajoutant la gestion de l'état de chargement. Ce modèle favorise la réutilisation du code en améliorant les composants avec une logique supplémentaire sans modifier le composant d'origine.

  Exemple 4 : composants de liste avancés avec hooks

  Avec les hooks React, nous pouvons amener les composants de liste réutilisables à un autre niveau en intégrant la logique avec état directement dans les composants. Créons une liste réutilisable capable de gérer la pagination.
  

  const usePagination = (items, itemsPerPage) => {
    const [currentPage, setCurrentPage] = React.useState(1);
    const maxPage = Math.ceil(items.length / itemsPerPage);
  
    const currentItems = items.slice(
      (currentPage - 1) * itemsPerPage,
      currentPage * itemsPerPage
    );
  
    const nextPage = () => {
      setCurrentPage((prevPage) => Math.min(prevPage   1, maxPage));
    };
  
    const prevPage = () => {
      setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
    };
  
    return { currentItems, nextPage, prevPage, currentPage, maxPage };
  };
  

  Le hook usePagination encapsule la logique de pagination. Nous pouvons maintenant utiliser ce hook dans notre composant liste.
  

  const PaginatedList = ({ items, renderItem, itemsPerPage }) => {
    const { currentItems, nextPage, prevPage, currentPage, maxPage } = usePagination(
      items,
      itemsPerPage
    );
  
    return (
      
  
        
  
          {currentItems.map((item, index) => (
            
  {renderItem(item)}
          ))}
        
        
  
          
            Previous
          
          
            Next
          
        
      
    );
  };
  

  Exemple d'utilisation :
  

  const App = () => {
    const items = Array.from({ length: 100 }, (_, i) => `Item ${i   1}`);
  
    return (
      
  
        
  Paginated List
         
  {item}
  }
        />
      
    );
  };
  

  Cet exemple montre une liste paginée dans laquelle les utilisateurs peuvent parcourir les pages d'éléments. Le hook gère toute la logique de pagination,

  le rendant réutilisable sur différents composants.

  Conclusion

  La création de composants de liste réutilisables dans React est une pratique fondamentale pour créer des applications évolutives. En faisant abstraction de la logique commune, en utilisant des modèles tels que des accessoires de rendu, des composants d'ordre supérieur et des hooks, vous pouvez créer des composants de liste flexibles, extensibles et maintenables qui s'adaptent à différents cas d'utilisation.

  À mesure que votre application React se développe, l'adoption de composants réutilisables simplifie non seulement votre base de code, mais améliore également les performances, réduit la redondance et permet une itération rapide sur de nouvelles fonctionnalités. Que vous traitiez des listes simples ou des exigences d'interface utilisateur plus complexes, investir du temps dans la création de composants réutilisables sera payant à long terme.

  Références

  Documentation officielle de React
  
  Réagir aux accessoires de rendu
  
  Réagir aux composants d'ordre supérieur
  
  Réagir aux crochets