当前位置：首页 > React

分页react怎么实现

2026-01-27 06:16:06React

分页实现的基本思路

在React中实现分页功能通常需要结合状态管理、数据切片和UI组件。分页的核心逻辑包括计算总页数、处理当前页码变化、动态渲染数据列表和分页控件。

使用React Hooks管理状态

定义状态变量存储当前页码和每页数据量：

const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(10);
const [totalItems, setTotalItems] = useState(0);

计算分页相关数据

根据总数据量和每页条目数计算总页数：

const totalPages = Math.ceil(totalItems / itemsPerPage);

获取当前页的数据切片：

分页react怎么实现

const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

渲染分页控件

创建分页导航组件，包含页码按钮和导航控制：

<div className="pagination">
  <button 
    onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
    disabled={currentPage === 1}
  >
    上一页
  </button>

  {Array.from({ length: totalPages }, (_, i) => i + 1).map(number => (
    <button
      key={number}
      onClick={() => setCurrentPage(number)}
      className={currentPage === number ? 'active' : ''}
    >
      {number}
    </button>
  ))}

  <button
    onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
    disabled={currentPage === totalPages}
  >
    下一页
  </button>
</div>

样式优化建议

为分页组件添加基础CSS样式：

分页react怎么实现

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

.pagination button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

高级实现方案

对于大型数据集考虑使用虚拟分页（API分页）：

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch(`/api/items?page=${currentPage}&limit=${itemsPerPage}`);
    const { data, total } = await response.json();
    setData(data);
    setTotalItems(total);
  };
  fetchData();
}, [currentPage, itemsPerPage]);

性能优化技巧

添加防抖处理频繁的页码切换：

const debouncedPageChange = useMemo(
  () => debounce((page) => setCurrentPage(page), 300),
  []
);

使用React.memo优化分页按钮渲染：

const PageButton = React.memo(({ number, currentPage, onClick }) => (
  <button
    onClick={() => onClick(number)}
    className={currentPage === number ? 'active' : ''}
  >
    {number}
  </button>
));