react实现前端分页原理
React 前端分页实现原理
前端分页的核心是通过 JavaScript 截取当前页对应的数据片段，仅渲染该部分数据而非全部数据。React 中通常结合状态管理实现动态分页效果。
基本实现步骤
数据分片计算
通过 Array.slice() 方法截取当前页数据片段：
const currentItems = allItems.slice(
(currentPage - 1) * itemsPerPage,
currentPage * itemsPerPage
);分页状态管理
使用 React 的 useState 管理当前页码和每页条数：
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(10);分页导航组件 渲染页码按钮并处理翻页逻辑：
<button
onClick={() => setCurrentPage(p => Math.max(p - 1, 1))}
disabled={currentPage === 1}
>
上一页
</button>完整示例代码
function Pagination({ data }) {
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(5);
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>
<ul>
{currentItems.map(item => (
<li key={item.id}>{item.content}</li>
))}
</ul>
<div className="pagination">
{pageNumbers.map(number => (
<button
key={number}
onClick={() => setCurrentPage(number)}
className={currentPage === number ? 'active' : ''}
>
{number}
</button>
))}
</div>
</div>
);
}性能优化方案
虚拟滚动技术
对于超大数据量（如 10,000+ 条），建议使用虚拟滚动库如 react-window，仅渲染可视区域内的元素。
记忆化处理
使用 useMemo 缓存分页计算结果：
const currentItems = useMemo(() => {
return data.slice(indexOfFirstItem, indexOfLastItem);
}, [data, indexOfFirstItem, indexOfLastItem]);分页器 UI 增强
- 添加首页/末页按钮
- 显示总页数信息
- 支持每页条数动态调整
- 添加输入框跳转指定页码
这些优化可通过扩展基础分页逻辑实现，核心原理始终是通过数组切片控制渲染范围。
