如何在AG-Grid中更新行数据时不触发网格刷新

你当前使用的api.setRowData()方法属于全量替换表格数据源的操作，AG Grid接收到全量新数据后会销毁所有已渲染的行DOM重新构建，自然会重置网格滚动位置、行展开状态等交互状态，实现单选逻辑完全不需要用到全量更新。
另外原有逻辑还存在漏洞：遍历节点时没有将非选中行的isChecked设为false，点击后会出现多行同时标记为选中的问题。

直接用AG Grid行节点（RowNode）提供的局部更新API即可，这类API只会刷新变动的单元格/行，不会触发全网格重绘，也不会改动当前滚动位置，具体实现代码如下：

const Cell = (cellProps) => {
  const { data, node, api } = cellProps
  const selectedRow = () => {
    // 遍历所有行，清空已有选中状态
    api.forEachNode((currNode) => {
      if (currNode.data.isChecked) {
        // 局部更新字段，仅触发当前单元格重绘
        currNode.setDataValue('isChecked', false)
      }
    })
    // 标记当前点击行为选中
    node.setDataValue('isChecked', true)
    // 直接从当前节点取选中行的字段值即可
    const radioButtonLabel = node.data.name
  }

  // 渲染自定义单选按钮，状态直接绑定行数据
  return (
    <input 
      type="radio" 
      checked={!!data.isChecked} 
      onChange={selectedRow} 
    />
  )
}

如果你在网格配置中开启了immutableData（不可变数据模式），把上述代码里的setDataValue替换为node.updateData()方法即可：更新时传入当前行修改后的新数据对象，同样是局部更新，不会触发全网格刷新和滚动位置重置。

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