Mise à l'échelle des applications React avec des composants de liste réutilisables

Créer des 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 du 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 faire évoluer les 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 bugs potentiels et des problèmes de maintenance à mesure que votre application se développe.

En créant des composants réutilisables, vous pouvez passer 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 de transmettre des données à vos composants et de contrôler le comportement interne de vos composants, respectivement.

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 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 (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default SimpleList;

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 article 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 (
      <div>
        <h1>Fruit List</h1>
        <SimpleList items={fruits} />
      </div>
    );
  };
  
  export default App;
  

  Copier après la connexion

  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 (
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {renderItem(item)}
          </li>
        ))}
      </ul>
    );
  };
  

  Copier après la connexion

  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 (
      <div>
        <h1>User List</h1>
        <ReusableList
          items={users}
          renderItem={(user) => (
            <div>
              <h2>{user.name}</h2>
              <p>Age: {user.age}</p>
            </div>
          )}
        />
      </div>
    );
  };
  

  Copier après la connexion

  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 voulions améliorer notre RéutilisableList avec des comportements supplémentaires comme 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 <p>Loading...</p>;
      return <Component {...props} />;
    };
  };
  

  Copier après la connexion

  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 (
      <div>
        <h1>User List</h1>
        <EnhancedList
          isLoading={isLoading}
          items={users}
          renderItem={(user) => (
            <div>
              <h2>{user.name}</h2>
              <p>Age: {user.age}</p>
            </div>
          )}
        />
      </div>
    );
  };
  

  Copier après la connexion

  In this example, the withLoading HOC wraps around ReusableList, adding loading state management to it. This pattern promotes code reuse by enhancing components with additional logic without modifying the original component.

  Example 4: Advanced List Components with Hooks

  With React hooks, we can take reusable list components to another level by integrating stateful logic directly into the components. Let’s build a reusable list that can handle 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 };
  };
  

  Copier après la connexion

  The usePagination hook encapsulates pagination logic. We can now use this hook within our list component.
  

  const PaginatedList = ({ items, renderItem, itemsPerPage }) => {
    const { currentItems, nextPage, prevPage, currentPage, maxPage } = usePagination(
      items,
      itemsPerPage
    );
  
    return (
      <div>
        <ul>
          {currentItems.map((item, index) => (
            <li key={index}>{renderItem(item)}</li>
          ))}
        </ul>
        <div>
          <button onClick={prevPage} disabled={currentPage === 1}>
            Previous
          </button>
          <button onClick={nextPage} disabled={currentPage === maxPage}>
            Next
          </button>
        </div>
      </div>
    );
  };
  

  Copier après la connexion

  Usage Example:
  

  const App = () => {
    const items = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);
  
    return (
      <div>
        <h1>Paginated List</h1>
        <PaginatedList
          items={items}
          itemsPerPage={10}
          renderItem={(item) => <div>{item}</div>}
        />
      </div>
    );
  };
  

  Copier après la connexion

  This example demonstrates a paginated list where users can navigate through pages of items. The hook handles all pagination logic,

  making it reusable across different components.

  Conclusion

  Building reusable list components in React is a fundamental practice for creating scalable applications. By abstracting common logic, using patterns like render props, higher-order components, and hooks, you can create flexible, extensible, and maintainable list components that adapt to different use cases.

  As your React application grows, adopting reusable components not only simplifies your codebase but also enhances performance, reduces redundancy, and enables rapid iteration on new features. Whether you're handling simple lists or more complex UI requirements, investing time in creating reusable components will pay off in the long run.

  References

  React Official Documentation
  
  React Render Props
  
  React Higher-Order Components
  
  React Hooks

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!