react 如何分页
分页实现方法
在React中实现分页功能可以通过多种方式完成，具体取决于数据来源（如API或本地数据）和UI库的选择。以下是常见的实现方法：
使用本地数据分页
对于存储在组件状态或Context中的本地数据，可以通过计算当前页的数据切片实现分页：
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;
// 计算当前页数据
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
// 渲染分页按钮
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
pageNumbers.push(i);
}
return (
<div>
{currentItems.map(item => (
<div key={item.id}>{item.content}</div>
))}
<div>
{pageNumbers.map(number => (
<button key={number} onClick={() => setCurrentPage(number)}>
{number}
</button>
))}
</div>
</div>
);API分页实现
当数据来自后端API时，通常需要配合分页查询参数：
const fetchData = async (page) => {
const response = await fetch(`/api/items?page=${page}&limit=10`);
const data = await response.json();
setItems(data.items);
setTotalPages(data.totalPages);
};
useEffect(() => {
fetchData(currentPage);
}, [currentPage]);使用分页组件库
流行的UI库如Material-UI提供了现成的分页组件：
import { Pagination } from '@mui/material';
<Pagination
count={totalPages}
page={currentPage}
onChange={(event, page) => setCurrentPage(page)}
/>无限滚动分页
对于移动端友好的分页方式，可以考虑无限滚动：
const handleScroll = () => {
if (
window.innerHeight + document.documentElement.scrollTop ===
document.documentElement.offsetHeight
) {
if (currentPage < totalPages) {
setCurrentPage(prev => prev + 1);
}
}
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, [currentPage, totalPages]);性能优化考虑
对于大数据量分页，建议使用虚拟滚动技术或仅加载当前页数据。React-window或react-virtualized等库可以帮助高效渲染长列表。
分页状态管理应考虑使用Context或状态管理库如Redux，特别是当多个组件需要访问分页状态时。
