react如何分
React 分页实现方法
在React中实现分页功能有多种方式，可以根据项目需求选择适合的方法。以下是常见的分页实现方案：
客户端分页 适用于数据量较小的情况，全部数据加载到前端后进行分页处理。
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;
// 计算当前页显示的数据
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
// 分页导航
const paginate = (pageNumber) => setCurrentPage(pageNumber);服务器端分页 适用于大数据量场景，每次只请求当前页的数据。
const fetchData = async (page) => {
const response = await fetch(`/api/data?page=${page}&limit=10`);
const result = await response.json();
setData(result.items);
setTotalPages(result.totalPages);
};UI组件库分页 使用现成的分页组件，如Material-UI或Ant Design。
import { Pagination } from '@mui/material';
<Pagination
count={totalPages}
page={currentPage}
onChange={(e, page) => handlePageChange(page)}
/>无限滚动分页 适合移动端和社交类应用，滚动到底部自动加载。
useEffect(() => {
const handleScroll = () => {
if (window.innerHeight + document.documentElement.scrollTop
=== document.documentElement.offsetHeight) {
loadMoreData();
}
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);分页最佳实践
- 保持分页状态在URL中，便于分享和刷新
- 显示总页数和当前页码
- 提供跳转到指定页面的输入框（当页数较多时）
- 考虑移动端触摸友好的分页控件
- 添加加载状态指示器
性能优化建议
- 对于大数据集使用虚拟滚动技术
- 实现缓存策略减少重复请求
- 考虑预加载下一页数据
- 使用防抖/节流处理快速翻页
以上方法可以根据具体项目需求组合使用，构建最适合的用户体验。
