react实现前端分页

实现前端分页的基本思路

前端分页的核心在于将全部数据一次性加载到前端，通过JavaScript控制当前页的数据展示。React中可以通过状态管理当前页码和每页数据量，利用数组切片实现数据分页。

基本实现步骤

安装React项目基础依赖（如未创建）

npx create-react-app pagination-demo
cd pagination-demo

创建分页组件

import { useState } from 'react';

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

  const getCurrentData = () => {
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    return data.slice(startIndex, endIndex);
  };

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  return (
    <div>
      <ul>
        {getCurrentData().map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>

      <div>
        {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
          <button
            key={page}
            onClick={() => handlePageChange(page)}
            disabled={page === currentPage}
          >
            {page}
          </button>
        ))}
      </div>
    </div>
  );
}

使用分页组件

function App() {
  const mockData = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

  return (
    <div>
      <h1>前端分页示例</h1>
      <Pagination data={mockData} itemsPerPage={10} />
    </div>
  );
}

优化分页组件

添加分页导航增强功能

const PaginationControls = ({ currentPage, totalPages, onPageChange }) => (
  <div>
    <button 
      onClick={() => onPageChange(1)} 
      disabled={currentPage === 1}
    >
      首页
    </button>

    <button 
      onClick={() => onPageChange(currentPage - 1)} 
      disabled={currentPage === 1}
    >
      上一页
    </button>

    {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
      <button
        key={page}
        onClick={() => onPageChange(page)}
        disabled={page === currentPage}
      >
        {page}
      </button>
    ))}

    <button 
      onClick={() => onPageChange(currentPage + 1)} 
      disabled={currentPage === totalPages}
    >
      下一页
    </button>

    <button 
      onClick={() => onPageChange(totalPages)} 
      disabled={currentPage === totalPages}
    >
      末页
    </button>
  </div>
);

性能优化建议

对于大数据量情况，考虑以下优化方案：

虚拟滚动技术替代分页

import { FixedSizeList } from 'react-window';

function VirtualList({ data }) {
  return (
    <FixedSizeList
      height={400}
      width={300}
      itemSize={50}
      itemCount={data.length}
    >
      {({ index, style }) => (
        <div style={style}>
          {data[index]}
        </div>
      )}
    </FixedSizeList>
  );
}

分页器样式优化方案

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

.pagination button[disabled] {
  color: #999;
  cursor: not-allowed;
}

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

完整示例整合

将上述组件组合成完整解决方案：

import { useState } from 'react';
import './Pagination.css';

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

  const getCurrentData = () => {
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    return data.slice(startIndex, endIndex);
  };

  return (
    <div className="pagination-container">
      <ul className="data-list">
        {getCurrentData().map((item, index) => (
          <li key={index} className="data-item">{item}</li>
        ))}
      </ul>

      <PaginationControls 
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={setCurrentPage}
      />
    </div>
  );
}