当前位置：首页 > article >正文

前端分页技术的深度解析与实践优化

article 2025/3/19 17:40:43

1. 分页场景与性能挑战

典型场景

电商商品列表（排序+过滤+分页）
金融交易记录（时间范围+分页）
社交平台动态流（无限滚动懒加载）

性能瓶颈

数据量级	传统分页问题	优化目标
1万条	翻页时重复请求，加载慢	减少重复数据传输
10万条	页码跳转时数据库OFFSET效率低	降低数据库查询成本
100万条	深分页（如第1000页）性能急剧下降	避免全表扫描，优化查询逻辑

2. 基础分页实现方案

前端代码（React + 分页控件）

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

  // 分页参数组合
  const fetchData = async (page) => {
   
    const params = new URLSearchParams({
   
      page,
      pageSize: 20,
      sort: 'price_desc',
      filter: JSON.stringify({
    category: 'electronics' })
    });
    
    const response = await fetch(`/api/items?${
     params}`);
    const {
    items, total } = await response.json();
    setData(items);
    setTotalPages(Math.ceil(total / 20));
  };

  useEffect(() => {
   
    fetchData(currentPage);
  }, [currentPage]);

  return (
    <div>
      <table>{
   /* 渲染表格数据 */}</table>
      <Pagination 
        current={
   currentPage