Das Erstellen skalierbarer Anwendungen in React erfordert mehr als nur solide Geschäftslogik. Die Architektur Ihrer Komponenten spielt eine wichtige Rolle dabei, wie wartbar, leistungsfähig und flexibel Ihre Anwendung wird, wenn sie wächst. Eine der grundlegenden Aufgaben in vielen Webanwendungen ist der Umgang mit Datenlisten. Unabhängig davon, ob es um die Darstellung von Produktlisten, Tabellen oder Dashboards geht, werden Sie häufig auf Szenarien stoßen, die wiederholbare und wiederverwendbare Listenstrukturen erfordern.

Durch die Erstellung wiederverwendbarer Listenkomponenten können Sie die Komplexität Ihrer Codebasis erheblich reduzieren und gleichzeitig die Wartbarkeit und Skalierbarkeit verbessern. In diesem Blogbeitrag erfahren Sie, wie Sie wiederverwendbare Listenkomponenten in React erstellen, warum dies für die Skalierung von Anwendungen wichtig ist, und stellen ausführliche Codebeispiele bereit, die Sie durch den Prozess führen.

Warum Wiederverwendbarkeit für die Skalierung von React-Apps wichtig ist

Wiederverwendbarkeit ist der Schlüssel zur Skalierung von React-Apps. Anstatt Code zu duplizieren, um verschiedene Listenkomponenten in Ihrer App zu verarbeiten, können Sie durch die Erstellung wiederverwendbarer Listenkomponenten gemeinsame Logik und UI-Struktur in eigenständige Komponenten abstrahieren. Dadurch können Ihre React-Komponenten modular wachsen und Codeduplizierung verhindert werden, die bei der Erweiterung Ihrer App zu potenziellen Fehlern und Wartungsproblemen führen kann.

Durch die Erstellung wiederverwendbarer Komponenten können Sie verschiedene Requisiten übergeben, um die Darstellung von Listen zu steuern, wodurch Ihre Anwendung dynamischer und flexibler wird, ohne für jeden Anwendungsfall die gleiche Logik neu schreiben zu müssen. Dieser Ansatz macht Ihre App nicht nur skalierbar, sondern verbessert auch die Entwicklererfahrung, indem er die Lesbarkeit und Wartbarkeit des Codes vereinfacht.

Kernkonzepte wiederverwendbarer Listenkomponenten

Um skalierbare wiederverwendbare Listenkomponenten zu erstellen, müssen Sie mehrere React-Konzepte verstehen:

Props und State: Damit können Sie Daten an Ihre Komponenten übergeben bzw. das interne Verhalten Ihrer Komponenten steuern.

Array-Methoden: Methoden wie .map(), .filter() und .reduce() sind für die Transformation von Arrays in React-Komponenten unerlässlich.

Komposition gegenüber Vererbung: In React wird das Kompositionsmuster der Vererbung vorgezogen. Sie können komplexe Benutzeroberflächen erstellen, indem Sie kleinere, wiederverwendbare Komponenten kombinieren.

Prop-gesteuerte Benutzeroberfläche: Wiederverwendbare Listenkomponenten sollten durch Requisiten gesteuert werden. Dadurch können Sie unterschiedliche Daten, Rendering-Logik und sogar Stile von übergeordneten Komponenten übergeben.

Beispiel 1: Eine einfache wiederverwendbare Listenkomponente

Beginnen wir mit der Erstellung einer einfachen, wiederverwendbaren Listenkomponente, die ein Array von Elementen als Requisite akzeptieren und diese dynamisch rendern kann:

import React from 'react';

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

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

In diesem Beispiel akzeptiert SimpleList eine Items-Requisite, bei der es sich um ein Array handelt. Wir verwenden die Funktion .map(), um das Array zu durchlaufen und jedes Element in einer ungeordneten Liste darzustellen (

). Jedes Element ist in ein
• -Element eingeschlossen. Die Schlüsselstütze stellt sicher, dass React das DOM effizient aktualisieren kann, wenn sich die Liste ändert.

  Verwendungsbeispiel:
  

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

  Dieses Beispiel rendert eine grundlegende Liste von Früchten. Die Komponente ist flexibel genug, dass Sie jedes Datenarray an sie übergeben können.

  Verbesserung der Wiederverwendbarkeit der Listenkomponente

  Das obige Beispiel ist zwar funktionsfähig, aber sehr eingeschränkt. In realen Anwendungen müssen Sie häufig komplexere Anforderungen bewältigen, z. B. das bedingte Rendern von Listenelementen, das Anwenden benutzerdefinierter Stile oder das Hinzufügen von Ereignis-Listenern zu einzelnen Elementen.

  Machen wir unsere SimpleList wiederverwendbar, indem wir benutzerdefinierte Renderlogik über eine Render-Requisite zulassen.

  Beispiel 2: Verwenden von Render-Requisiten für das Rendern benutzerdefinierter Listen

  Render-Requisiten sind ein Muster in React, mit dem Sie steuern können, was in einer Komponente gerendert wird. So können Sie dieses Muster verwenden, um eine benutzerdefinierte Darstellung von Listenelementen zu ermöglichen:
  

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

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

  In diesem Fall akzeptiert die Komponente „ReusableList“ eine renderItem-Requisite, eine Funktion, die ein Element entgegennimmt und JSX zurückgibt. Dies bietet eine flexible Möglichkeit, zu steuern, wie jedes Listenelement gerendert wird.

  Verwendungsbeispiel:
  

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

  In diesem Beispiel können wir mit der renderItem-Requisite anpassen, wie jeder Benutzer angezeigt wird. Jetzt können wir dieselbe Listenkomponente für jede Datenstruktur wiederverwenden und sie entsprechend dem spezifischen Anwendungsfall rendern.

  Beispiel 3: Listenkomponenten mit Komponenten höherer Ordnung erweiterbar machen

  Ein weiteres leistungsstarkes Muster in React ist die Higher-Order Component (HOC). Ein HOC ist eine Funktion, die eine Komponente übernimmt und eine neue Komponente mit zusätzlicher Funktionalität zurückgibt.

  Wenn wir beispielsweise unsere wiederverwendbare Liste um zusätzliche Verhaltensweisen wie Datenabruf oder bedingtes Rendern erweitern möchten, könnten wir einen HOC verwenden.
  

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

  Hier fügt das withLoading HOC das Ladeverhalten zu jeder Komponente hinzu. Wenden wir es auf unsere wiederverwendbare Liste an:
  

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

  In diesem Beispiel umschließt das withLoading-HOC die wiederverwendbare Liste und fügt ihr eine Ladezustandsverwaltung hinzu. Dieses Muster fördert die Wiederverwendung von Code, indem es Komponenten mit zusätzlicher Logik erweitert, ohne die ursprüngliche Komponente zu ändern.

  Beispiel 4: Erweiterte Listenkomponenten mit Hooks

  Mit React-Hooks können wir wiederverwendbare Listenkomponenten auf eine andere Ebene bringen, indem wir zustandsbehaftete Logik direkt in die Komponenten integrieren. Lassen Sie uns eine wiederverwendbare Liste erstellen, die mit der Paginierung umgehen kann.
  

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

  Der usePagination-Hook kapselt die Paginierungslogik. Wir können diesen Hook jetzt innerhalb unserer Listenkomponente verwenden.
  

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

  Verwendungsbeispiel:
  

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

  Dieses Beispiel zeigt eine paginierte Liste, in der Benutzer durch Seiten mit Elementen navigieren können. Der Hook verwaltet die gesamte Paginierungslogik,

  Ermöglichung der Wiederverwendbarkeit über verschiedene Komponenten hinweg.

  Abschluss

  Das Erstellen wiederverwendbarer Listenkomponenten in React ist eine grundlegende Vorgehensweise zum Erstellen skalierbarer Anwendungen. Durch die Abstraktion allgemeiner Logik und die Verwendung von Mustern wie Render-Requisiten, Komponenten höherer Ordnung und Hooks können Sie flexible, erweiterbare und wartbare Listenkomponenten erstellen, die sich an verschiedene Anwendungsfälle anpassen.

  Wenn Ihre React-Anwendung wächst, vereinfacht die Einführung wiederverwendbarer Komponenten nicht nur Ihre Codebasis, sondern verbessert auch die Leistung, reduziert Redundanz und ermöglicht eine schnelle Iteration neuer Funktionen. Unabhängig davon, ob Sie einfache Listen oder komplexere UI-Anforderungen bearbeiten, wird sich die Investition von Zeit in die Erstellung wiederverwendbarer Komponenten auf lange Sicht auszahlen.

  Referenzen

  Reagieren Sie auf die offizielle Dokumentation
  
  Render-Requisiten reagieren
  
  Komponenten höherer Ordnung reagieren
  
  Reagieren Sie auf Hooks