React框架下点击数据刷新按钮表格先空白后渲染如何避免？

架构老林

2026-9-28

问题根因

你遇到的刷新空白是React + AG Grid场景下的常见渲染问题，核心原因是行数据更新过程中触发了表格全量重渲染，旧数据提前被销毁，新数据还未完成渲染，就会出现短暂空白。

可落地的调整方案

方案1：移除清空行数据的中间逻辑
绝大多数空白问题都是因为刷新流程中先把rowData设置为空值，等接口返回后才赋值新数据。直接删除清空rowData的代码，拿到新数据后直接覆盖旧rowData即可，旧数据会一直展示到新数据渲染完成，不会出现空白。
方案2：用Grid API更新数据替代state直接修改
不要通过修改React state的rowData触发表格重渲染，调用AG Grid官方提供的setRowData方法更新全量数据，该方法内置了视图无缝切换逻辑，不会清空已有视图内容：
```
// 提前在gridReady事件中保存gridApi引用
const handleRefresh = async () => {
  const newRowData = await requestNewData()
  gridApi.setRowData(newRowData)
}
```
方案3：开启不可变数据模式优化渲染性能
如果你的行数据有唯一主键字段，开启AG Grid的immutableData配置，同时传入getRowId方法获取行唯一标识，AG Grid会复用已有的行和单元格组件，仅更新数据发生变化的部分，大幅降低重渲染开销，避免闪烁：
```
const gridOptions = {
  immutableData: true,
  getRowId: (params) => params.data.yourRowIdField, // 替换为实际的行主键字段名
  // 其余原有配置保持不变
}
```
方案4：优化自定义CellRender组件
检查你自定义的CellRender组件，避免在组件内部做异步请求、重计算等耗时操作，可把需要的单元格数据提前合并到rowData中。同时可以给CellRender包裹React.memo减少不必要的重渲染：
```
export default React.memo(CellRender)
```