react 如何分页
实现分页的方法
使用 useState 管理分页状态
在 React 中，可以使用 useState 钩子来管理当前页码和每页显示的数据量。初始化状态变量，如 currentPage 和 itemsPerPage，用于控制分页逻辑。
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(10);计算当前页的数据
根据当前页码和每页显示的数据量，计算出当前页应该显示的数据范围。使用数组的 slice 方法截取对应的数据片段。
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);渲染分页按钮
创建一个分页组件，用于显示页码按钮。根据总数据量和每页显示的数据量，计算出总页数，并生成对应的页码按钮。点击按钮时更新 currentPage 状态。
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
pageNumbers.push(i);
}
return (
<div>
{pageNumbers.map(number => (
<button key={number} onClick={() => setCurrentPage(number)}>
{number}
</button>
))}
</div>
);使用第三方库简化分页
react-paginate
react-paginate 是一个专门用于 React 的分页库，可以快速实现分页功能。安装后，只需配置总页数、当前页和点击事件即可。
import ReactPaginate from 'react-paginate';
<ReactPaginate
pageCount={Math.ceil(data.length / itemsPerPage)}
onPageChange={({ selected }) => setCurrentPage(selected + 1)}
containerClassName={'pagination'}
activeClassName={'active'}
/>Material-UI Pagination
如果项目使用了 Material-UI，可以直接使用其提供的 Pagination 组件。该组件支持自定义样式和事件处理。
import Pagination from '@mui/material/Pagination';
<Pagination
count={Math.ceil(data.length / itemsPerPage)}
page={currentPage}
onChange={(event, page) => setCurrentPage(page)}
/>分页与 API 结合
前端分页 对于少量数据，可以在前端一次性获取所有数据，然后通过上述方法进行分页。适用于数据量较小且不频繁更新的场景。
后端分页
对于大量数据，建议在后端实现分页逻辑。前端传递页码和每页数据量参数，后端返回对应的数据片段。通常结合 fetch 或 axios 实现。
const fetchData = async (page, limit) => {
const response = await axios.get(`/api/data?page=${page}&limit=${limit}`);
setData(response.data);
};优化分页体验
加载状态
在分页数据加载过程中，显示加载状态以提升用户体验。可以使用 useState 管理加载状态，并在数据加载完成后更新状态。
const [isLoading, setIsLoading] = useState(false);
const handlePageChange = async (page) => {
setIsLoading(true);
await fetchData(page, itemsPerPage);
setIsLoading(false);
};缓存数据
对于频繁访问的数据，可以考虑使用缓存机制减少重复请求。例如，使用 useMemo 缓存分页计算结果，或通过状态管理库如 Redux 存储已获取的数据。
const cachedItems = useMemo(() => {
return data.slice(indexOfFirstItem, indexOfLastItem);
}, [data, currentPage, itemsPerPage]);
