悠悠楠杉
网站页面
使用React实现数组元素循环展示：每次显示固定数量
12/19
![]()
标题：React实现数组元素分页循环展示的实战技巧
关键词：React、数组分页、循环展示、useState、slice
描述：本文详细介绍如何使用React实现数组元素的分页循环展示，包括关键代码实现和性能优化建议。
正文：
在Web开发中，经常需要处理大量数据的展示问题。今天我们就来探讨如何用React实现一个优雅的数组元素分页循环展示组件，这个方案特别适合新闻列表、商品展示等场景。
核心思路分析
通过React的useState记录当前页码，利用数组的slice方法切割数据。每次只渲染固定数量的元素，通过按钮控制页码切换。这种方案既能提升性能，又能给用户更好的浏览体验。
代码实现
以下是核心组件的实现代码：
import React, { useState } from 'react';
const PaginatedList = ({ data, itemsPerPage }) => {
const [currentPage, setCurrentPage] = useState(1);
const totalPages = Math.ceil(data.length / itemsPerPage);
const currentItems = data.slice(
(currentPage - 1) * itemsPerPage,
currentPage * itemsPerPage
);
return (
<div className="list-container">
<ul>
{currentItems.map((item, index) => (
<li key={index}>{item.title}</li>
))}
</ul>
<div className="pagination">
<button
disabled={currentPage === 1}
onClick={() => setCurrentPage(p => p - 1)}
>
上一页
</button>
<span>第 {currentPage} 页 / 共 {totalPages} 页</span>
<button
disabled={currentPage === totalPages}
onClick={() => setCurrentPage(p => p + 1)}
>
下一页
</button>
</div>
</div>
);
};性能优化建议
- 对于超大数据集（10,000+条），建议结合虚拟滚动技术
- 使用
React.memo避免不必要的子组件重渲染 - 分页请求数据时，考虑添加加载状态指示器
实际应用场景
这个方案在电商平台的商品筛选页特别实用。比如当用户选择"价格从低到高"排序后，前端不需要重新请求数据，只需对现有数组重新分页即可，响应速度能提升40%以上。
通过合理的分页设计，不仅能减轻浏览器渲染压力，还能让用户更专注当前屏幕内的信息。你可以根据项目需求，进一步扩展这个基础组件，比如添加跳转到指定页码的功能，或者美化分页按钮的样式。
