当前位置：首页 > React

react实现分页

2026-01-26 11:59:35React

实现分页的基本思路

在React中实现分页通常需要以下几个核心部分：分页数据的管理、分页组件的渲染以及用户交互逻辑的处理。分页可以通过前端或后端实现，具体取决于数据量和性能需求。

前端分页实现

前端分页适用于数据量较小的情况，所有数据一次性加载到前端，通过JavaScript进行分页处理。

数据分片处理

const itemsPerPage = 10;
const currentItems = data.slice(
  (currentPage - 1) * itemsPerPage,
  currentPage * itemsPerPage
);

分页状态管理

const [currentPage, setCurrentPage] = useState(1);
const totalPages = Math.ceil(data.length / itemsPerPage);

分页组件渲染

<div className="pagination">
  <button 
    onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
    disabled={currentPage === 1}
  >
    Previous
  </button>
  {Array.from({ length: totalPages }, (_, i) => (
    <button
      key={i}
      onClick={() => setCurrentPage(i + 1)}
      className={currentPage === i + 1 ? "active" : ""}
    >
      {i + 1}
    </button>
  ))}
  <button
    onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
    disabled={currentPage === totalPages}
  >
    Next
  </button>
</div>

后端分页实现

对于大数据量，通常采用后端分页，通过API传递分页参数。

API请求参数

const fetchData = async (page, size) => {
  const response = await fetch(`/api/data?page=${page}&size=${size}`);
  return response.json();
};

分页状态管理

const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(0);
const [data, setData] = useState([]);

useEffect(() => {
  const loadData = async () => {
    const result = await fetchData(currentPage, 10);
    setData(result.items);
    setTotalPages(result.totalPages);
  };
  loadData();
}, [currentPage]);

分页组件优化

对于复杂的分页需求，可以引入现成的分页库如react-paginate，简化分页逻辑。

使用react-paginate

import ReactPaginate from 'react-paginate';

<ReactPaginate
  pageCount={totalPages}
  pageRangeDisplayed={5}
  marginPagesDisplayed={2}
  onPageChange={({ selected }) => setCurrentPage(selected + 1)}
  containerClassName="pagination"
  activeClassName="active"
/>

样式处理

分页组件通常需要自定义样式，确保与项目设计一致。

基础CSS样式

.pagination {
  display: flex;
  list-style: none;
  padding: 0;
}

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

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

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

性能考虑

对于大数据量分页，采用虚拟滚动或无限滚动可能更合适，避免一次性渲染过多DOM节点。

无限滚动示例

react实现分页

const handleScroll = useCallback(() => {
  if (
    window.innerHeight + document.documentElement.scrollTop ===
    document.documentElement.offsetHeight
  ) {
    setCurrentPage(prev => prev + 1);
  }
}, []);

useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, [handleScroll]);