-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 (
<div>
<h1>Fruit List</h1>
<SimpleList items={fruits} />
</div>
);
};
export default App;
Nach dem Login kopieren
Dieses Beispiel gibt eine grundlegende Liste von Früchten wieder. 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: Verwendung 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 (
<ul>
{items.map((item, index) => (
<li key={index}>
{renderItem(item)}
</li>
))}
</ul>
);
};
Nach dem Login kopieren
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 (
<div>
<h1>User List</h1>
<ReusableList
items={users}
renderItem={(user) => (
<div>
<h2>{user.name}</h2>
<p>Age: {user.age}</p>
</div>
)}
/>
</div>
);
};
Nach dem Login kopieren
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 <p>Loading...</p>;
return <Component {...props} />;
};
};
Nach dem Login kopieren
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 (
<div>
<h1>User List</h1>
<EnhancedList
isLoading={isLoading}
items={users}
renderItem={(user) => (
<div>
<h2>{user.name}</h2>
<p>Age: {user.age}</p>
</div>
)}
/>
</div>
);
};
Nach dem Login kopieren
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 };
};
Nach dem Login kopieren
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>
);
};
Nach dem Login kopieren
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>
);
};
Nach dem Login kopieren
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
