元素中。 key 屬性可確保 React 可以在清單變更時有效地更新 DOM。
使用範例：
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;
登入後複製
此範例呈現基本的水果清單。該組件足夠靈活，您可以將任何資料數組傳遞給它。
增強清單元件的複用性
雖然上面的範例很實用，但它非常有限。在現實應用程式中，您經常需要處理更複雜的需求，例如有條件地渲染清單項目、套用自訂樣式或向單一項目新增事件偵聽器。
讓我們透過渲染屬性允許自訂渲染邏輯，使 SimpleList 更具可重複使用性。
範例 2：使用 Render Props 進行自訂清單渲染
渲染道具是 React 中的一種模式，可讓您控制元件內渲染的內容。以下是如何使用此模式來允許自訂呈現清單項目：
const ReusableList = ({ items, renderItem }) => {
return (
<ul>
{items.map((item, index) => (
<li key={index}>
{renderItem(item)}
</li>
))}
</ul>
);
};
登入後複製
在這種情況下，ReusableList 元件接受 renderItem 屬性，它是一個接受項目並傳回 JSX 的函數。這提供了一種靈活的方式來控制每個清單項目的呈現方式。
使用範例：
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>
);
};
登入後複製
在此範例中，renderItem 屬性允許我們自訂每個使用者的顯示方式。現在我們可以為任何資料結構重複使用相同的清單元件，根據特定的用例渲染它。
範例 3：使列表組件可透過高階組件擴充
React 中另一個強大的模式是高階元件 (HOC)。 HOC 是一個函數，它接受一個元件並傳回一個具有附加功能的新元件。
例如，如果我們想要透過資料取得或條件渲染等附加行為來增強 ReusableList，我們可以使用 HOC。
const withLoading = (Component) => {
return function WithLoadingComponent({ isLoading, ...props }) {
if (isLoading) return <p>Loading...</p>;
return <Component {...props} />;
};
};
登入後複製
這裡，withLoading HOC 會為任何元件新增載入行為。讓我們將其應用到我們的 ReusableList 中：
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>
);
};
登入後複製
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 };
};
登入後複製
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>
);
};
登入後複製
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>
);
};
登入後複製
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
