Pagination分页实现与优化实战经验分享
晓曼为什么我要对比这几个Pagination分页方案
做前端开发这么多年，遇到过各种各样的分页需求。有些场景下，分页组件就是个摆设，随便弄弄就完事了；但在有些项目里，分页组件的设计和实现直接影响用户体验和性能。今天我就来聊聊几种常见的分页方案，看看哪个更灵活、哪个更省事。
纯手动分页：自己动手丰衣足食
最简单的分页方式就是自己写一个。这种方式的优点是完全可控，你想怎么搞就怎么搞。缺点也很明显，就是代码量大，容易出错，而且每次都要从头开始写。
举个例子，假设我们有一个用户列表，需要分页显示：
// 假设我们有100条用户数据
const users = Array.from({ length: 100 }, (_, i) => ({ id: i + 1, name: User ${i + 1} }));
// 分页逻辑
const itemsPerPage = 10;
const currentPage = 1;
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const currentUsers = users.slice(startIndex, endIndex);
console.log(currentUsers); // 当前页的用户数据这种方式简单直接，但每次都需要重复写这些逻辑，有点麻烦。
使用第三方库：站在巨人的肩膀上
市面上有很多成熟的分页库，比如 react-paginate 和 pagination.js。这些库通常封装得很好，可以直接拿来用，省去了很多重复劳动。
react-paginate 示例
首先安装库：
npm install react-paginate然后在组件中使用：
import React from 'react';
import ReactPaginate from 'react-paginate';
const items = Array.from({ length: 100 }, (_, i) => Item #${i + 1});
function Items({ currentItems }) {
return (
<div>
{currentItems && currentItems.map((item) => (
<div key={item} style={{ margin: '10px 0' }}>
{item}
</div>
))}
</div>
);
}
function PaginatedItems() {
const [currentPage, setCurrentPage] = React.useState(0);
const PER_PAGE = 10;
const offset = currentPage * PER_PAGE;
const currentItems = items.slice(offset, offset + PER_PAGE);
const pageCount = Math.ceil(items.length / PER_PAGE);
function handlePageClick({ selected }) {
setCurrentPage(selected);
}
return (
<div>
<Items currentItems={currentItems} />
<ReactPaginate
previousLabel={"previous"}
nextLabel={"next"}
breakLabel={"..."}
pageCount={pageCount}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={handlePageClick}
containerClassName={"pagination"}
activeClassName={"active"}
/>
</div>
);
}
export default PaginatedItems;这种方式的好处是配置简单，功能齐全，而且社区支持好。缺点是引入了额外的依赖，有时候可能跟项目其他部分不兼容。
pagination.js 示例
同样先安装库：
npm install paginationjs然后在组件中使用：
import Pagination from 'paginationjs';
document.addEventListener('DOMContentLoaded', () => {
const pagination = new Pagination({
dataSource: Array.from({ length: 100 }, (_, i) => Item #${i + 1}),
pageSize: 10,
showPageNumbers: true,
pager: document.querySelector('#pager'),
callback: (data, pagination) => {
console.log(data, pagination);
// 渲染页面
const container = document.querySelector('#container');
container.innerHTML = data.map(item => <div>${item}</div>).join('');
}
});
});这种方式也挺好用的，配置项多，可以灵活定制。不过我觉得它有点过于复杂了，对于简单的分页需求有点杀鸡用牛刀的感觉。
谁更灵活？谁更省事？
总结一下，我比较喜欢用 react-paginate。它既灵活又省事，配置简单，功能齐全。当然，如果你的项目对性能要求特别高，或者你对某个库有过敏反应（比如以前踩过坑），那还是得自己手写。
总的来说，选择哪个方案要看具体场景。如果项目小，时间紧，那就直接用库；如果项目大，性能要求高，那就自己写。总之，不要怕折腾，找到最适合自己的才是最重要的。
我的选型逻辑
其实选型这事儿挺主观的，主要看个人喜好和项目需求。我个人倾向于使用 react-paginate，因为它在灵活性和易用性之间找到了一个很好的平衡点。当然，也有时候我会根据项目的具体情况做一些调整。
总之，没有绝对的好坏，只有适不适合。希望我的经验对你有所帮助，如果有更好的方案或者不同的看法，欢迎在评论区交流。
