Ant Design 3.x Table 大数据量渲染慢，如何优化？

针对 Ant Design 3.x Table 大数据量渲染慢的问题，可通过模拟虚拟列表效果、优化渲染性能及合理选用第三方库进行优化，具体方法如下：

自定义模拟虚拟列表

Ant Design 3.x 版本未内置虚拟列表功能，需通过自定义渲染模拟该效果，核心步骤如下：

确定可见区域：通过获取 Table 容器的高度（tableHeight）和每行数据的高度（rowHeight），计算当前屏幕可见区域可容纳的行数（visibleRowCount = Math.ceil(tableHeight / rowHeight)）。
数据筛选：根据滚动位置（scrollTop）和行高，确定当前可见区域的起始索引（startIndex = Math.floor(scrollTop / rowHeight)）和结束索引（endIndex = startIndex + visibleRowCount），从原始数据中提取对应子集（visibleData = originalData.slice(startIndex, endIndex)）。
渲染数据子集：将筛选后的 visibleData 绑定到 Table 的 dataSource 属性，仅渲染当前可见区域的数据。
滚动事件监听：通过 onScroll 事件监听 Table 容器的滚动，实时更新 scrollTop 值，并重新计算可见区域和数据子集，触发重新渲染。

示例代码片段：

class VirtualTable extends React.Component { constructor(props) { super(props); this.tableRef = React.createRef(); this.state = { scrollTop: 0, visibleData: [], }; } handleScroll = () => { const { scrollTop } = this.tableRef.current; this.setState({ scrollTop }, () => { this.updateVisibleData(); }); }; updateVisibleData = () => { const { originalData, rowHeight } = this.props; const { scrollTop } = this.state; const tableHeight = this.tableRef.current.clientHeight; const visibleRowCount = Math.ceil(tableHeight / rowHeight); const startIndex = Math.floor(scrollTop / rowHeight); const endIndex = startIndex + visibleRowCount; this.setState({ visibleData: originalData.slice(startIndex, endIndex) }); }; render() { const { columns, rowHeight } = this.props; const { visibleData } = this.state; return ( <div ref={this.tableRef} onScroll={this.handleScroll} style={{ height: '500px', overflow: 'auto' }} > <Table columns={columns} dataSource={visibleData} pagination={false} scroll={{ y: rowHeight * this.props.originalData.length }} rowKey={(record) => record.id} /> </div> ); }}优化渲染性能

使用 window.requestAnimationFrame：在滚动事件处理函数中，通过 requestAnimationFrame 包裹数据更新逻辑，将渲染任务合并到浏览器重绘前执行，减少不必要的重绘和回流。示例调整：

handleScroll = () => { const { scrollTop } = this.tableRef.current; requestAnimationFrame(() => { this.setState({ scrollTop }, () => { this.updateVisibleData(); }); });};

避免频繁更新状态：在 updateVisibleData 中，可通过防抖（debounce）或节流（throttle）控制更新频率，例如使用 Lodash 的 _.throttle 限制每 16ms（约 60FPS）更新一次。

选用第三方虚拟列表库

若自定义开发成本较高，可集成第三方虚拟列表库（如 react-virtualized、react-window），需重点关注以下方面：

稳定性与维护性：选择长期维护、社区活跃的库（如 react-window 由 React 团队官方维护）。
兼容性：确保库与 Ant Design 3.x 及项目其他依赖（如 React 版本）兼容。
集成方式：通过自定义 rowRenderer 或 cellRenderer 将库的虚拟列表能力与 Antd Table 结合。

以 react-window 为例的集成思路：

使用 FixedSizeList 或 VariableSizeList 管理数据渲染。
在 rowRenderer 中返回 Antd Table 的行内容（需手动构建行结构，可能牺牲部分 Table 原生功能）。
通过 outerRef 获取滚动容器，监听滚动事件并同步到外部（若需保留 Table 的滚动行为）。

其他优化建议

分页加载：若业务允许，直接使用 Table 的 pagination 分页功能，减少单次渲染数据量。
数据分片：将大数据拆分为多个小块，按需加载（如滚动到底部时加载下一页数据）。
简化行内容：减少行内复杂组件（如嵌套表格、图表），降低渲染开销。

通过上述方法，可显著提升 Ant Design 3.x Table 处理大数据量的渲染性能，具体方案需根据项目需求和技术栈灵活选择。

您可能感兴趣问答

Collapsible

热门标签

热点问答