AG Grid React优化：如何实现请求缓存与单元格仅渲染一次？

一、实现跨渲染器实例的请求缓存 #

要让两列的渲染器实例共享请求结果，核心是把缓存逻辑抽离到组件外部，做成独立的复用模块，所有渲染器实例都调用这个模块的缓存逻辑。

1. 创建独立的缓存工具模块 #

新建一个apiCache.js文件，用Map存储请求结果，同时封装带缓存的请求逻辑：

// apiCache.js
const cache = new Map();

export async function fetchWithCache(key, fetchFn) {
  // 优先读取缓存
  if (cache.has(key)) {
    return cache.get(key);
  }
  // 缓存不存在时发起请求并存入缓存
  try {
    const result = await fetchFn();
    cache.set(key, result);
    return result;
  } catch (error) {
    // 请求失败时删除缓存，避免下次直接获取错误结果
    cache.delete(key);
    throw error;
  }
}

2. 在自定义渲染器中引入缓存逻辑 #

修改你的React渲染器组件，不再直接发起网络请求，而是调用上面的缓存工具函数：

// CustomRenderer.jsx
import { useState, useEffect } from 'react';
import { fetchWithCache } from './apiCache';

const CustomRenderer = ({ value }) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadData = async () => {
      if (!value) return;
      try {
        // 用输入的value作为缓存key，确保相同输入复用缓存
        const result = await fetchWithCache(value, () => 
          fetch(`/api/query?param=${value}`).then(res => res.json())
        );
        setData(result);
      } catch (err) {
        // 这里可以添加错误提示逻辑
      } finally {
        setLoading(false);
      }
    };
    loadData();
  }, [value]); // 仅当value变化时才重新执行

  if (loading) return <div>加载中...</div>;
  return <div>{data?.content}</div>;
};

export default CustomRenderer;

这样不管多少个渲染器实例，只要输入的value相同，就只会发起一次网络请求，后续直接读取缓存结果。

二、让AG Grid不再重复调用已渲染的单元格渲染器 #

AG Grid默认会复用单元格组件，但配置不当会导致滚动时重复渲染，需要做以下几点优化：

1. 用React.memo包裹渲染器组件 #

确保组件只有在props变化时才重新渲染：

// CustomRenderer.jsx
import React, { memo } from 'react';

// ... 保留之前的组件逻辑

// 用memo包裹，浅比较props变化
export default memo(CustomRenderer);

2. 设置行的唯一标识 #

配置getRowId让AG Grid能准确识别行的唯一性，避免因行数据引用变化触发重新渲染：

// AG Grid配置示例
const gridOptions = {
  rowData: yourRowData,
  getRowId: (params) => params.data.id, // 用数据中唯一的id作为行标识
  columnDefs: [
    { headerName: '列1', field: 'param1', cellRenderer: 'customRenderer' },
    { headerName: '列2', field: 'param2', cellRenderer: 'customRenderer' },
  ],
  frameworkComponents: {
    customRenderer: CustomRenderer,
  },
  // 其他配置...
};

3. 确保传递给渲染器的props稳定 #

不要在columnDefs的cellRendererParams中直接创建新对象/函数，否则每次AG Grid渲染都会认为props变化：

// 错误示例：每次渲染都会生成新对象，触发重新渲染
{
  headerName: '列1',
  field: 'param1',
  cellRendererParams: {
    extraProp: { key: 'value' }
  }
}

// 正确示例：把稳定参数提到外部
const stableParams = { extraProp: { key: 'value' } };
{
  headerName: '列1',
  field: 'param1',
  cellRendererParams: stableParams
}

4. 开启预渲染缓存（可选） #

如果是大数据量场景，可设置rowBuffer让AG Grid提前渲染视图外的行，减少滚动时的重新渲染：

const gridOptions = {
  rowBuffer: 10, // 视图上下各预渲染10行
  // 其他配置...
};

内容的提问来源于stack exchange，提问作者shikhanshu