Als React-Entwickler sind wir alle auf Szenarien gestoßen, in denen wir Datenlisten rendern müssen. Während die Methode .map() gut funktioniert, kann die Wiederholung derselben Logik bei jedem Rendern einer Liste anstrengend werden und zu Codeduplizierung führen. Glücklicherweise gibt es eine sauberere, skalierbare Möglichkeit, dies zu handhaben, indem wiederverwendbare Komponenten, Komponenten höherer Ordnung oder benutzerdefinierte Hooks verwendet werden.

In diesem Artikel werde ich einen Ansatz zur Verbesserung der Listenwiedergabe in React vorstellen, um sicherzustellen, dass Ihr Code trocken, wiederverwendbar und einfacher zu warten bleibt.

Hauptproblem: Wiederholte .map()-Logik

Stellen Sie sich vor, Sie erstellen ein Dashboard für eine E-Commerce-Anwendung. Das Dashboard enthält mehrere Listen: aktuelle Bestellungen, meistverkaufte Produkte, Benutzerkommentare usw. Sie müssen jede Liste mit einer .map()-Funktion rendern. Hier ist ein typisches Beispiel:

const orders = [...]; // Array of order data

return (
  
    {orders.map((order, index) => (
      
    ))}
  >
);

Jetzt können Sie sehen, dass die .map()-Logik für jede Liste wiederholt wird und Ihre Komponente mit ähnlichem Code überfüllt wird. Hier können wiederverwendbare Muster hilfreich sein.

Lösung: Eine wiederverwendbare ListComponent

Um eine Duplizierung der .map()-Logik zu vermeiden, können wir eine wiederverwendbare ListComponent erstellen, die die Mapping-Logik abstrahiert und es uns ermöglicht, verschiedene Komponenten basierend auf den Daten zu rendern.

function ListComponent({ data, renderItem }) {
  return (
    
      {data.map((item, index) => renderItem(item, index))}
    >
  );
}

Verwendung:

 (
    
  )} 
/>

In diesem Muster:
renderItem: Eine Funktion, die definiert, wie jedes Element gerendert werden soll

Durch Übergabe einer anderen renderItem-Funktion können wir ListComponent für jede Liste wiederverwenden. Dies führt zu einer sauberen, wiederverwendbaren Komponente und reduziert die sich wiederholende .map()-Logik.

Mehr Flexibilität: Komponente höherer Ordnung (HOC)

Wenn mehrere Komponenten Listenrendering benötigen, gehen wir dieses Muster weiter, indem wir eine Komponente höherer Ordnung erstellen. Ein HOC ermöglicht es, jede Komponente mit zusätzlicher Funktionalität zu erweitern – in diesem Fall Listenrendering.

function withListRendering(WrappedComponent) {
  return function ListWrapper({ data, ...props }) {
    return (
      
        {data.map((item, index) => (
          
        ))}
      >
    );
  };
}

Verwendung:

const EnhancedOrderComponent = withListRendering(OrderComponent);

// Now render the component with any data array

Durch das Umschließen von OrderComponent mit dem withListRendering HOC haben wir automatisch das Listenrendering-Verhalten hinzugefügt, ohne die ursprüngliche Komponente zu ändern. Dieses Muster hält den Code modular.

Für Hook-Liebhaber: Benutzerdefinierter Hook für die Listendarstellung

React-Hooks bieten eine funktionale Möglichkeit, Logik zu kapseln. Wenn Sie lieber Hooks verwenden, finden Sie hier ein Beispiel für die Listenwiedergabe mit einem benutzerdefinierten Hook.

function useListRenderer(data, renderItem) {
  return data.map((item, index) => renderItem(item, index));
}

Verwendung:

function OrdersDashboard({ orders }) {
  const orderList = useListRenderer(orders, (order, index) => (
    
  ));

  return {orderList}>;
}

Dieser Ansatz verschiebt die .map()-Logik in den Hook und hält die Rendering-Logik von der Struktur der Komponente getrennt. Dies ist eine weitere Möglichkeit, die Komponenten schlank zu halten und sich auf die Präsentation zu konzentrieren.

Realwelt-Szenario: Ein E-Commerce-Dashboard

Wenden wir dieses Muster auf ein reales Szenario an. Stellen Sie sich vor, Sie erstellen ein E-Commerce-Admin-Dashboard, in dem mehrere Listen mit Bestellungen, Produkten, Bewertungen usw. gerendert werden müssen.

Mit dem ListComponent-Ansatz könnten Sie eine Liste von Bestellungen wie folgt rendern:

 (
    
  )} 
/>

Wenn wir eine andere Liste rendern müssen, beispielsweise Produkte, kann dieselbe ListComponent mit einer anderen renderItem-Funktion wiederverwendet werden:

 (
    
  )} 
/>

Die .map()-Logik muss nicht neu geschrieben werden – verwenden Sie einfach die ListComponent mit anderen Daten und Komponenten wieder. Dadurch wird die Codebasis besser wartbar, wenn sie wächst.

Fazit: Sauberer, wiederverwendbarer und skalierbarer Code

Das wiederverwendbare ListComponent-Muster vereinfacht das Rendern von React-Listen durch Abstrahieren der sich wiederholenden .map()-Logik. Unabhängig davon, ob Sie den Basiskomponentenansatz, HOC oder einen benutzerdefinierten Hook bevorzugen, stellt dieses Muster sicher, dass der Code sauber und wiederverwendbar ist.

Wenn Sie eine React-Komponente mit mehreren Listen erstellen, sollten Sie die Verwendung eines dieser Muster in Betracht ziehen, um den Fokus der Komponenten auf die Präsentation zu legen und gleichzeitig die Listenlogik von außen zu trennen.

Welche anderen wiederverwendbaren Muster fanden Sie in React nützlich? Lass es mich in den Kommentaren wissen! und zum Schluss vielen Dank fürs Lesen