react如何实现分页
实现分页的基本思路
在React中实现分页通常需要结合状态管理、数据获取和UI渲染。分页的核心逻辑包括计算总页数、当前页数据切片以及页码切换功能。
状态管理
使用React的useState或全局状态管理工具（如Redux）存储分页相关状态：
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(10);
const [totalItems, setTotalItems] = useState(0);数据获取与切片
从API获取数据后，根据当前页码和每页数量切片显示数据：
// 假设data是从API获取的完整数据数组
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);分页组件UI
创建分页导航组件，包含页码按钮和导航控制：
const Pagination = ({ itemsPerPage, totalItems, paginate }) => {
const pageNumbers = [];
const totalPages = Math.ceil(totalItems / itemsPerPage);
for (let i = 1; i <= totalPages; i++) {
pageNumbers.push(i);
}
return (
<nav>
<ul className="pagination">
{pageNumbers.map(number => (
<li key={number} className="page-item">
<button onClick={() => paginate(number)} className="page-link">
{number}
</button>
</li>
))}
</ul>
</nav>
);
};完整示例集成
将分页逻辑集成到主组件中：
function App() {
const [data, setData] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(5);
useEffect(() => {
// 模拟API调用
fetchData().then(res => {
setData(res);
});
}, []);
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
const paginate = pageNumber => setCurrentPage(pageNumber);
return (
<div>
<Items data={currentItems} />
<Pagination
itemsPerPage={itemsPerPage}
totalItems={data.length}
paginate={paginate}
/>
</div>
);
}高级优化方案
对于大型数据集或复杂场景，可以考虑以下优化：
- 使用
useMemo缓存分页计算结果 - 实现异步分页（每次翻页时发起API请求）
- 添加页码输入跳转功能
- 集成无限滚动替代传统分页
服务器端分页
当数据量非常大时，建议采用服务器端分页：
// API请求示例
fetch(`/api/items?page=${currentPage}&limit=${itemsPerPage}`)
.then(res => res.json())
.then(data => {
setData(data.items);
setTotalItems(data.totalCount);
});这种方式只需在翻页时请求当前页数据，显著提升性能。
