React Redux与agGrid数据重绑定及复选框表格更新优化问题

我之前在项目里也碰到过一模一样的问题——开启deltaRowDataMode后性能直接起飞，但复选框状态总是出各种诡异的异常，关闭的话又要面对大数据量下的渲染卡顿。结合踩过的坑，给你几个实用的解决方案：

1. 把复选框状态绑定到行数据字段（最推荐） #

deltaRowDataMode的核心是只更新行数据有变化的行，所以如果把复选框的选中状态直接存在每行的data对象里，agGrid就能自动同步状态，完全适配delta模式的逻辑。

举个列定义的例子：

const columnDefs = [
  {
    headerCheckboxSelection: true,
    checkboxSelection: true,
    headerCheckboxSelectionFilteredOnly: true,
    // 把复选框和行数据的isSelected字段绑定
    field: 'isSelected'
  },
  // 其他列定义...
];

当你需要更新选中状态时，直接修改对应行的isSelected字段，然后用agGrid的事务API触发delta更新：

// 假设你要更新某行的选中状态
const updatedRow = {...targetRow, isSelected: !targetRow.isSelected};
gridApi.applyTransaction({update: [updatedRow]});

这种方式完全符合agGrid的设计逻辑，既保证了delta模式的性能优势，又不会出现状态不同步的问题。

2. 手动同步选中状态集合与delta更新 #

如果业务场景不允许把选中状态存在行数据里（比如选中状态需要全局维护在Redux中），那可以通过监听agGrid的事务完成事件，手动同步选中状态：

// 初始化时绑定事件
gridApi.addEventListener('transactionCompleted', (event) => {
  // 从你的状态管理（比如Redux）中获取最新的选中行ID集合
  const selectedIds = store.getState().selectedRowIds;
  
  // 先清空当前网格的选中状态
  gridApi.deselectAll();
  
  // 重新选中对应行
  selectedIds.forEach(id => {
    const rowNode = gridApi.getRowNode(id);
    // 要判断行节点是否存在，避免delta更新删除了该行导致报错
    if (rowNode) {
      rowNode.setSelected(true);
    }
  });
});

这种方式需要额外维护选中状态的一致性，但能满足特定业务场景的需求。

3. 确保行ID的稳定性 #

deltaRowDataMode严重依赖稳定的行ID来识别行的变化，一定要在gridOptions里配置唯一且不变的行ID：

const gridOptions = {
  deltaRowDataMode: true,
  // 用行数据里的唯一ID字段作为行节点ID
  getRowId: params => params.data.userId,
  // 其他配置...
};

如果行ID不稳定（比如每次更新行数据时ID变化），agGrid会把旧行当成删除、新行当成新增，导致复选框状态完全混乱。

4. 禁止直接操作DOM修改复选框 #

千万别图省事直接通过DOM选择器去修改复选框的勾选状态！agGrid内部维护着自己的行状态，直接改DOM会导致内部状态和UI不一致，出现各种奇奇怪怪的异常。所有状态更新都要通过agGrid的API或者修改行数据来完成。

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