React项目中跨多组件访问Ag Grid的gridApi的最佳实践是什么

把gridApi存储在Redux中的隐患 #

• 违反Redux可序列化规范：gridApi是包含大量内置方法、DOM引用、Ag Grid内部实例引用的非序列化对象，Redux官方明确要求store中仅存储可序列化的纯数据。开启Redux DevTools时会尝试序列化该对象，轻则导致DevTools卡顿、日志异常，重则抛出序列化错误，还可能因为api长期持有DOM引用导致内存泄漏，表格卸载后相关资源无法被正常垃圾回收。
• 触发不必要重渲染：Redux state的变更会通知所有订阅对应字段的组件重渲染，若你不小心触发了gridApi对应state的更新（哪怕api本身没有变化），所有依赖该api的组件都会无意义重渲染，复杂页面会出现明显的性能损耗。
• 状态不同步风险：gridApi会随着表格的挂载、卸载、内部配置变更自动更新，Redux中存储的api副本很容易和实际的表格实例不同步，比如表格卸载后Redux中仍保留失效的api引用，调用时会直接报错。
• 冗余状态维护成本：表格的核心状态本身由Ag Grid内部维护，将api存入Redux相当于额外新增了一份外部状态引用，后续迭代容易出现状态不一致的问题，增加维护成本。

如果暂时要维持Redux存储的方案，需要在Redux的序列化配置中将gridApi对应的字段加入忽略列表，避免DevTools报错，但依然无法解决其他隐患。

更优的实现方案 #

根据组件的嵌套关系可以选择以下三种方案，优先级从高到低：

方案1：Props直接传递（适用父子/近邻组件场景） #

如果Y组件和X组件是父子关系、或嵌套层级不超过3层，直接通过props传递gridApi即可，无需引入额外的状态管理逻辑。

// X表格组件
const X = () => {
  const [gridApi, setGridApi] = useState(null);
  const onGridReady = (params) => setGridApi(params.api);

  return (
    <div>
      <AgGridReact onGridReady={onGridReady} {/* 其他表格配置 */} />
      <Y gridApi={gridApi} /> {/* 直接传递给子组件Y */}
    </div>
  );
};

方案2：React Context共享（适用跨层级/兄弟组件场景） #

如果需要跨多个组件层级、或非父子关系的组件共享api，用React Context是最合理的方案，仅在表格所在的局部模块共享，不会污染全局状态。

1. 首先创建独立的Grid上下文

// src/context/GridContext.js
import { createContext, useContext } from 'react';
const GridContext = createContext(null);
export const GridProvider = GridContext.Provider;
// 自定义hook简化调用
export const useGridApi = () => useContext(GridContext);

2. 在表格所在模块的公共父组件包裹Provider

// 表格所在的页面组件
const TablePage = () => {
  const [gridApi, setGridApi] = useState(null);
  const onGridReady = (params) => setGridApi(params.api);

  return (
    <GridProvider value={gridApi}>
      <X onGridReady={onGridReady} />
      {/* 所有子层级的Y、Z组件都可以访问api */}
      <Y />
      <div>
        <Z />
      </div>
    </GridProvider>
  );
};

3. 在需要用到api的组件直接调用自定义hook

// Y组件
const Y = () => {
  const gridApi = useGridApi();
  // 调用前做判空处理即可
  const handleRefresh = () => gridApi?.refreshCells();
  return <button onClick={handleRefresh}>刷新表格</button>;
};

方案3：Ref共享（适用无响应式需求的场景） #

如果你的业务场景中不需要根据api的存在与否做响应式渲染（比如仅在用户主动交互时才调用api），可以用useRef存储api，性能更优——因为ref的更新不会触发任何组件重渲染。可以配合Context或者模块导出的方式共享ref。

// X组件中用ref存api
const gridApiRef = useRef(null);
const onGridReady = (params) => gridApiRef.current = params.api;

// 其他组件拿到ref后调用时直接取current属性
const handleSelectAll = () => gridApiRef.current?.selectAll();

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