react实现假分页
实现假分页的方法
假分页（前端分页）指一次性加载所有数据，通过前端逻辑控制每页显示的内容。以下是React中实现假分页的典型方案：
数据切片处理
使用数组的slice方法截取当前页对应的数据段。假设allData是全部数据数组：
const currentPageData = allData.slice(
(currentPage - 1) * pageSize,
currentPage * pageSize
);状态管理
需要维护分页相关状态：
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [total, setTotal] = useState(0);分页器组件
可结合Ant Design等UI库的分页组件，或自定义分页器：
<Pagination
current={currentPage}
pageSize={pageSize}
total={total}
onChange={(page) => setCurrentPage(page)}
/>完整示例代码
function FakePagination({ data }) {
const [currentPage, setCurrentPage] = useState(1);
const pageSize = 5;
const total = data.length;
const currentData = data.slice(
(currentPage - 1) * pageSize,
currentPage * pageSize
);
return (
<div>
{currentData.map(item => (
<div key={item.id}>{item.name}</div>
))}
<Pagination
current={currentPage}
total={total}
pageSize={pageSize}
onChange={setCurrentPage}
/>
</div>
);
}性能优化
对于大数据量场景可考虑：
- 虚拟滚动技术（如react-window）
- 分页缓存策略
- 避免不必要的重新渲染
注意事项
假分页适用于数据量较小（通常小于1000条）的场景。大数据量应优先考虑真分页（API分页）以减少网络传输压力。
