AG Grid 如何实现React无限滚动？服务端数据源配置详解

在当下的前端开发中，处理海量数据表格展示是一项常见的挑战。在React项目中使用AG Grid开发数据表格时，实现无限滚动功能可以有效优化大数据量场景下的加载性能。与传统的分页加载不同，无限滚动允许用户在滚动到表格底部时自动触发下一页数据的请求，从而提供无缝的浏览体验。而服务端数据源的正确配置，则是支撑这一功能稳定、高效运行的核心基石。

AG Grid 无限滚动的基础属性配置

要在React环境中启用AG Grid的无限滚动功能，首先需要对表格组件的基础属性进行精确配置。最核心的步骤是将行模型类型指定为服务端模式。通过将 rowModelType 属性设置为 serverSide，AG Grid 会将数据获取的控制权交由开发者自定义的服务端数据源。同时，必须确保 suppressServerSideInfiniteScroll 属性被设置为 false，以明确开启无限滚动行为，而非传统的服务端分页模式。

除了核心的模式切换，缓存机制的配置同样至关重要。AG Grid 通过数据块的形式来管理已加载的数据。cacheBlockSize 属性定义了每次向服务端请求的数据行数，而 maxBlocksInCache 则限制了内存中最多保留的数据块数量。合理设置这两个参数，能够在减少网络请求频率与控制浏览器内存占用之间找到最佳平衡点。以下代码展示了基础属性的配置方式。

import React, { useRef, useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const GridBasicSetup = () => {
  const gridRef = useRef(null);
  const [columnDefs] = useState([
    { field: 'id', headerName: '编号' },
    { field: 'name', headerName: '姓名' }
  ]);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: '100%' }}>
      <AgGridReact
        ref={gridRef}
        columnDefs={columnDefs}
        rowModelType="serverSide"
        suppressServerSideInfiniteScroll={false}
        cacheBlockSize={50}
        maxBlocksInCache={5}
      />
    </div>
  );
};

export default GridBasicSetup;

服务端数据源的核心逻辑与实现

配置好基础属性后，下一步是构建服务端数据源对象。该对象必须实现一个名为 getRows 的异步方法。当用户在界面中滚动，导致当前缓存的数据不足以满足视图渲染需求时，AG Grid 会自动调用此方法。在调用时，AG Grid 会传入一个包含丰富上下文信息的参数对象，其中 startRow 和 endRow 明确指出了当前需要加载的数据行索引范围。

在 getRows 方法内部，开发者需要根据传入的起始行和结束行索引，计算出对应的分页参数，并结合排序模型与过滤模型，向服务端发起网络请求。当服务端成功返回数据后，必须调用参数对象中的 success 回调函数，并将获取到的数据列表以及总数据量传递给它。如果请求失败，则需调用 fail 回调以通知表格更新状态。数据源构建完成后，需在表格的就绪事件回调中，通过 API 将其注册到 AG Grid 实例中。

const createServerSideDatasource = () => {
  return {
    getRows: async (params) => {
      const { startRow, endRow } = params;
      const pageSize = endRow - startRow;
      const pageNum = Math.floor(startRow / pageSize) + 1;

      try {
        // 发起网络请求获取分页数据
        const response = await fetch(`https://ipipp.com/api/users?page=${pageNum}&size=${pageSize}`);
        const result = await response.json();
        
        if (result.success) {
          // 请求成功，传递数据与总条数
          params.success({
            rowData: result.data.records,
            rowCount: result.data.totalCount
          });
        } else {
          params.fail();
        }
      } catch (error) {
        // 捕获异常并通知表格加载失败
        params.fail();
      }
    }
  };
};

const onGridReady = (params) => {
  const datasource = createServerSideDatasource();
  params.api.setServerSideDatasource(datasource);
};

服务端接口规范与常见性能优化策略

为了让前端的数据源逻辑顺利运转，服务端接口必须严格遵循特定的参数接收与数据返回规范。接口需要能够解析前端传递的起始行和结束行参数，或者直接使用计算好的页码和每页条数进行数据库分页查询。在返回数据结构方面，除了包含当前页的数据列表外，还必须提供满足当前查询条件的总数据条数。这个总条数对于 AG Grid 计算滚动条高度以及判断是否已经加载完所有数据具有决定性作用。

在实际应用中，开发者可能会遇到一些常见问题。例如，当服务端由于性能原因无法快速返回准确的总条数时，可以将总条数设置为 undefined，此时 AG Grid 会根据实际返回的数据量动态调整滚动条。此外，为了提升用户体验，建议在数据请求期间结合自定义的遮罩层或内置的加载状态属性，给予用户明确的视觉反馈。针对数据更新不频繁的场景，适当增大最大缓存块数量的值可以显著减少重复请求，提升滚动流畅度。

{
  "success": true,
  "data": {
    "records": [
      { "id": 101, "name": "王五", "age": 30, "email": "wangwu@ipipp.com" },
      { "id": 102, "name": "赵六", "age": 27, "email": "zhaoliu@ipipp.com" }
    ],
    "totalCount": 5000
  },
  "message": "数据获取成功"
}

以下是将上述所有逻辑整合后的完整React组件示例，展示了从状态管理、数据源定义到组件渲染的完整流程。

import React, { useRef, useState, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const InfiniteScrollGrid = () => {
  const gridRef = useRef(null);
  const [columnDefs] = useState([
    { field: 'id', headerName: '编号', width: 100 },
    { field: 'name', headerName: '姓名', width: 150 },
    { field: 'age', headerName: '年龄', width: 100 },
    { field: 'email', headerName: '邮箱', flex: 1 }
  ]);

  const defaultColDef = {
    sortable: true,
    filter: true,
    resizable: true
  };

  const onGridReady = useCallback((params) => {
    const datasource = {
      getRows: async (rowParams) => {
        const { startRow, endRow } = rowParams;
        const pageSize = endRow - startRow;
        const pageNum = Math.floor(startRow / pageSize) + 1;

        try {
          const response = await fetch(`https://ipipp.com/api/users?page=${pageNum}&size=${pageSize}`);
          const result = await response.json();
          
          if (result.success) {
            rowParams.success({
              rowData: result.data.records,
              rowCount: result.data.totalCount
            });
          } else {
            rowParams.fail();
          }
        } catch (error) {
          rowParams.fail();
        }
      }
    };
    
    params.api.setServerSideDatasource(datasource);
  }, []);

  return (
    <div className="ag-theme-alpine" style={{ height: 500, width: '100%' }}>
      <AgGridReact
        ref={gridRef}
        columnDefs={columnDefs}
        defaultColDef={defaultColDef}
        rowModelType="serverSide"
        suppressServerSideInfiniteScroll={false}
        cacheBlockSize={50}
        maxBlocksInCache={10}
        onGridReady={onGridReady}
      />
    </div>
  );
};

export default InfiniteScrollGrid;

综上所述，在React中实现AG Grid的无限滚动功能，关键在于正确配置服务端行模型、精准实现数据源的数据获取方法，并确保前后端数据交互规范的统一。通过合理调整缓存块大小与最大缓存数量，开发者可以针对不同业务场景进行深度性能调优。掌握这些核心配置与优化策略，将帮助你在处理复杂的企业级数据表格时，构建出既高效又具备极佳用户体验的前端应用。

AG_GridReact无限滚动服务端数据源修改时间：2026-06-17 20:03:20