元素中。 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
