企业官网建设流程全解析

• 前端
• UI组件

导读

本文聚焦 rsuite 组件库中<Table>的虚拟化（virtualized）能力，讲解如何通过一个virtualized属性为成千上万条数据提供高性能渲染，并在此基础上实现"滚动到底部自动加载更多"的无限滚动方案。读完本文，你将掌握虚拟滚动的启用方式、核心属性（virtualized、height、onScroll、shouldUpdateScroll等）的语义与搭配技巧，并可直接复用仓库文档中的完整示例代码。

虚拟滚动表格概述

rsuite 的<Table>组件（源码位于 src/Table/Table.tsx）是围绕底层表格库rsuite-table的一层 React 封装（当前仓库package.json中锁定依赖版本为^5.19.2）。它对外暴露四个组合子组件：

• Table.Column：定义一列的宽度、对齐方式、是否固定等；
• Table.HeaderCell：表头单元格；
• Table.Cell：数据单元格，通过dataKey绑定行数据字段；
• Table.ColumnGroup：列分组。

当数据量达到数百、上千行时，如果一次性渲染全部 DOM 节点，页面的初始渲染时间、滚动时的重排与绘制开销都会明显上升。虚拟滚动（virtualized rendering）的核心思路是：只渲染视口（及缓冲区）内可见的行，滚动时动态回收与创建节点，从而让表格性能与总数据量解耦。rsuite 官方文档（docs/pages/components/table-virtualized/zh-CN/index.md）将这一能力概括为"为大量数据提供虚拟化渲染支持，以提高性能"。

快速开始：一行代码开启虚拟化

开启虚拟化非常简单，只需在<Table>上追加virtualized布尔属性：

<Table virtualized />

在 src/Table/Table.tsx 的封装实现中可以看到，组件会将所有剩余 props 直接透传给rsuite-table的RsTable（同时注入rtl、locale与默认开启的loadAnimation），因此virtualized会原样作用于底层表格的渲染管线：

const CustomTable = React.forwardRef(function Table(props, ref) { const { propsWithDefaults, rtl, getLocale } = useCustom('Table', props); const { locale: overrideLocale, loadAnimation = true, ...rest } = propsWithDefaults; const locale = getLocale('common', overrideLocale); return <RsTable {...rest} rtl={rtl} ref={ref} locale={locale} loadAnimation={loadAnimation} />; });

值得注意的是，虚拟化依赖一个确定的行高才能正确计算可视区域，因此建议配合固定的rowHeight（默认值由底层表格提供）使用，避免因行高不定导致滚动条长度与渲染位置漂移。

演示一：千行数据的虚拟滚动

官方文档提供了完整的"虚拟滚动"演示（片段源码见 docs/pages/components/table-virtualized/fragments/virtualized.md）。其做法是：先用mockUsers(1000)生成 1000 条测试数据，再渲染一个高度为 400px、带固定 Id 列的多列表格：

import { Table } from 'rsuite'; import { mockUsers } from './mock'; const { Column, HeaderCell, Cell } = Table; const data = mockUsers(1000); const App = () => { return ( <Table virtualized height={400} data={data}> <Column width={70} align="center" fixed> <HeaderCell>Id</HeaderCell> <Cell dataKey="id" /> </Column> <Column width={130}> <HeaderCell>First Name</HeaderCell> <Cell dataKey="firstName" /> </Column> <Column width={130}> <HeaderCell>Last Name</HeaderCell> <Cell dataKey="lastName" /> </Column> <Column width={100}> <HeaderCell>Gender</HeaderCell> <Cell dataKey="gender" /> </Column> <Column width={100}> <HeaderCell>Age</HeaderCell> <Cell dataKey="age" /> </Column> <Column width={200}> <HeaderCell>City</HeaderCell> <Cell dataKey="city" /> </Column> <Column width={200}> <HeaderCell>Email</HeaderCell> <Cell dataKey="email" /> </Column> </Table> ); }; ReactDOM.render(<App />, document.getElementById('root'));

示例中的关键属性拆解

其中mockUsers(length)是文档站点自带的模拟数据生成器（实现见 docs/utils/mock.ts），每条记录包含id、firstName、lastName、gender、age、city、email等字段，恰好覆盖上面各列dataKey。在实际项目中，你可以用接口返回的真实数据替换它，其余用法完全一致。

列布局：宽度、固定列与自适应

• 固定列：给需要横向滚动时保持可见的列加fixed（示例中的 Id 列），它会被固定在表格左侧；
• 列宽自适应：当列数少而表格宽度富余时，可为某列设置flexGrow={1}（在下一个无限滚动示例中可见），让该列占满剩余宽度，这是虚拟表格布局中常用的弹性手段；
• 宽度通过Column的width属性显式声明，虚拟滚动框架据此计算横向滚动范围。

演示二：无限滚动加载（Infinite Loader）

"无限滚动加载"是虚拟表格最常见的实战形态：初始只加载少量数据，当用户滚动到接近底部时自动请求下一批数据并追加。官方文档（docs/pages/components/table-virtualized/zh-CN/index.md）明确说明："使用无限滚动加载，当用户滚动到表格底部时可以加载更多数据"。

完整示例源码见 docs/pages/components/table-virtualized/fragments/infinite-loader.md：

import { Table, Loader, Box } from 'rsuite'; const { Column, HeaderCell, Cell } = Table; const FixedLoader = () => ( <Loader content="Loading..." style={{ display: 'flex', justifyContent: 'center', position: 'absolute', bottom: '0', background: 'var(--rs-body)', width: '100%', padding: '4px 0' }} /> ); const fetchData = (start, length) => { return Array.from({ length }).map((_, index) => { return { index: start + index, texts: faker.lorem.paragraph() }; }); }; const tableHeight = 400; const App = () => { const [data, setData] = React.useState(fetchData(0, 50)); const [loading, setLoading] = React.useState(false); const loadMore = () => { setLoading(true); setTimeout(() => { setData([...data, ...fetchData(data.length, 50)]); setLoading(false); }, 1000); }; const handleScroll = (x, y) => { const contextHeight = data.length * 46; const top = Math.abs(y); if (contextHeight - top - tableHeight < 300) { loadMore(); } }; return ( <Box pos="relative"> <Table virtualized shouldUpdateScroll={false} height={tableHeight} data={data} onScroll={handleScroll} > <Column width={100}> <HeaderCell>Index</HeaderCell> <Cell dataKey="index" /> </Column> <Column width={200} flexGrow={1}> <HeaderCell>Texts</HeaderCell> <Cell dataKey="texts" /> </Column> </Table> {loading && <FixedLoader />} </Box> ); }; ReactDOM.render(<App />, document.getElementById('root'));

无限滚动的三个关键设计

1. 滚动位置判断（onScroll）：Table的onScroll(x, y)回调在滚动时触发，y为纵向滚动位移。示例中的判断逻辑为：

   const contextHeight = data.length * 46; // 当前数据的总内容高度（按每行 46px 估算） const top = Math.abs(y); // 已滚过的距离 if (contextHeight - top - tableHeight < 300) { loadMore(); // 距底部不足 300px 时触发加载 }

   即"剩余未滚动区域小于阈值（这里取 300px）"时触发加载，比严格滚动到底再加载有更好的体验连续性，可避免加载期间用户"无内容可滚"。

2. 数据追加（loadMore）：在示例中用setTimeout模拟 1 秒网络延迟；真实项目中应替换为fetch/axios请求分页接口。追加时用[...data, ...fetchData(data.length, 50)]保留旧数据并拼接新批次，每次加载 50 条。文档页面完整代码（docs/pages/components/table-virtualized/index.tsx）同时导入了Loader、Box、faker等依赖，用于支撑该演示的交互与 mock 数据。

3. shouldUpdateScroll={false}：这是无限滚动场景的重要配置。开启虚拟化后，追加数据会引起内容总高度变化，导致滚动条位置被自动重置；显式关闭该行为，才能让用户停留在当前阅读位置继续向下滚动，避免"加载后跳回顶部"的体验问题。

加载状态的可视化

示例中加载提示没有用Table内置的 loading 状态，而是通过Box pos="relative"包裹表格，并把一个绝对定位、固定于底部的<Loader content="Loading..." />叠加在表格视口下方：

• position: 'absolute'+bottom: '0'使其悬浮在表格底部；
• background: 'var(--rs-body)'借用 rsuite 主题变量，保证在不同主题下背景色与表格一致；
• loading && <FixedLoader />只在请求进行时渲染，避免空转。

从源码看虚拟化的封装路径

为便于读者进一步深挖实现，这里梳理出与虚拟化相关的仓库线索：

• 组件入口与 props 透传：src/Table/Table.tsx 中CustomTable将virtualized、height、data、onScroll、shouldUpdateScroll等属性原样交给rsuite-table的RsTable，同时自动注入rtl、locale、loadAnimation；
• 组合子组件定义：src/Table/TableCell.tsx、src/Table/TableColumn.tsx、src/Table/TableHeaderCell.tsx、src/Table/TableColumnGroup.tsx，其中CellProps明确了dataKey支持string | keyof Row的绑定方式；
• 样式与测试：src/Table/styles/index.scss 提供表格样式，src/Table/test/Table.spec.tsx 等测试覆盖表格渲染行为；
• 底层依赖：仓库package.json声明"rsuite-table": "^5.19.2"，虚拟滚动的行级渲染回收、滚动条长度计算等底层逻辑由该库完成，rsuite 负责统一 API 与主题接入。

从源码结构可以推断：rsuite 有意将virtualized设计为"即开即用"的能力——上层不需要感知行渲染细节，只需保证height与rowHeight合理，虚拟化即可透明生效。

实战建议与注意事项

1. 何时需要虚拟化：当单表数据量达到数百行以上、出现明显卡顿或 DOM 节点过多时开启。示例中的 1000 行只是基线，实际可支撑的数据量取决于每行复杂度与运行设备。
2. 行高稳定性：虚拟滚动依赖确定行高来计算可视行数与滚动条高度；若行内容高度不固定（如自动换行、图片加载），应先为行内容设计固定高度或固定裁剪策略。
3. 与无限滚动搭配：优先组合virtualized + shouldUpdateScroll={false} + onScroll，滚动阈值（示例为 300px）与每批条数（示例为 50 条）应根据接口延迟与表格高度调优，阈值太小容易"断档"，太大则可能提前加载过多。
4. 固定列与弹性列：fixed列适合主键/操作列；flexGrow适合让内容列填满剩余宽度，二者与虚拟化可以安全共存。
5. 加载反馈：参考示例用绝对定位的Loader做底部加载提示，比全局 loading 遮罩更贴合"滚动加载"的交互语义。

通过virtualized属性、onScroll触发条件与shouldUpdateScroll的配合，你可以在 rsuite 中轻松构建出既流畅又省内存的千行级数据表格，并将其平滑扩展为无限滚动加载的完整方案。

• 前端
• UI组件