antd Table 组件加载中loading状态实战从基础用法到源码级原理【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-designloading是 ant-design Table 组件中控制页面是否加载中的核心属性适用于远程数据请求、初始化加载等场景。本文将结合 loading.md 演示文档 与 Table 组件源码带你掌握loading的完整用法、底层实现机制以及与异步数据请求的实战配合方案。快速上手用loading属性控制表格加载状态在 ant-design 的 Table 演示文档 中给出了loading属性最基础的使用方式为Table传入一个布尔类型的loading属性当其为true时表格进入加载中状态为false时恢复正常显示。完整的示例代码如下import { Table, Button } from antd; const columns [{ title: 姓名, dataIndex: name }, { title: 年龄, dataIndex: age }, { title: 住址, dataIndex: address }]; const data [{ key: 1, name: 胡彦斌, age: 32, address: 西湖区湖底公园1号 }, { key: 2, name: 胡彦祖, age: 42, address: 西湖区湖底公园1号 }, { key: 3, name: 李大嘴, age: 32, address: 西湖区湖底公园1号 }]; const App React.createClass({ getInitialState() { return { loading: false }; }, toggleLoading() { this.setState({ loading: !this.state.loading }); }, render() { return ( div Table columns{columns} dataSource{data} loading{this.state.loading} / Button typeprimary onClick{this.toggleLoading}切换 loading 状态/Button /div ); } }); ReactDOM.render(App /, mountNode);示例中的关键设计模式值得注意loading的值被存放在组件的state中通过按钮的onClick事件调用toggleLoading()使用setState进行翻转。这种状态驱动的方式意味着loading是一个完全受 React 状态流控制的属性——你既可以用组件内部 state 控制它也可以从父组件传入 props 控制它。loading属性 API 说明在 Table 组件文档 的 API 表格中loading属性的正式定义如下参数说明类型默认值loading页面是否加载中Booleanfalse与loading配合使用时建议同时关注以下相邻属性它们共同决定了加载状态的展示效果pagination分页器配置。从源码角度看加载指示器的定位高度会根据是否有分页而动态调整详见下文原理分析dataSource数据数组通常与loading一起经历请求中 → 数据到达的状态变化columns表格列的配置描述数组。源码级原理loading在 Table 内部如何工作要真正理解loading的行为需要深入到 Table 组件的实现 components/table/index.jsx。属性声明与默认值在getDefaultProps()中loading被赋予默认值falseindex.jsx 第 61 行getDefaultProps() { return { dataSource: [], prefixCls: ant-table, useFixedHeader: false, rowSelection: null, className: , size: large, loading: false, // 默认不处于加载状态 bordered: false, indentSize: 20, onChange: noop, locale: {} }; }同时在propTypes中声明了类型约束loading: React.PropTypes.boolindex.jsx 第 76 行也就是说传入非布尔值时在开发环境下会收到 PropTypes 警告。渲染分支用 Spin 包裹整个表格loading的核心逻辑位于渲染阶段index.jsx 第 614-622 行let table ( div Table {...this.props} data{data} columns{columns} className{classString} expandIconColumnIndex{(columns[0] columns[0].key selection-column) ? 1 : 0} expandIconAsCell{expandIconAsCell} / {emptyText} /div ); if (this.props.loading) { // if there is no pagination or no data, // the height of spin should decrease by half of pagination const paginationPatchClass (this.hasPagination() data data.length ! 0) ? ant-table-with-pagination : ant-table-without-pagination; const spinClassName ${paginationPatchClass} ant-table-spin-holder; table Spin className{spinClassName}{table}/Spin; }从源码结构可以看出三个关键点loading为true时整个表格含空数据占位会被Spin组件包裹Spin 是 antd 的加载指示器组件会在表格上方渲染旋转动画加载指示器的高度定位是智能的源码注释明确指出当没有分页或没有数据时Spin 的高度需要减去分页的一半。因此代码通过hasPagination()和当前页数据是否为空动态拼接ant-table-with-pagination或ant-table-without-pagination两个类名loading不影响表格渲染本身表格数据仍然会被渲染出来只是叠加了视觉上的加载遮罩效果。配套样式半透明遮罩与居中 Spin加载效果的视觉呈现由 style/components/table.less 中的-loading规则定义第 109-129 行-loading { position: relative; .{table-prefix-cls}-body { background: #fff; opacity: 0.5; // 表格主体半透明突出加载中的视觉状态 } .{table-prefix-cls}-spin-holder { height: 20px; line-height: 20px; left: 50%; top: 50%; margin-left: -30px; position: absolute; // 绝对定位使 Spin 在表格中央 } .{table-prefix-cls}-with-pagination { margin-top: -20px; // 有分页时向上偏移 } .{table-prefix-cls}-without-pagination { margin-top: 10px; // 无分页时向下偏移 } }这段样式与源码中的类名切换逻辑一一对应表格主体ant-table-body在加载时降为 50% 透明度Spin 指示器通过绝对定位居中于表格中央并依据有无分页微调垂直位置保证视觉重心始终落在数据区域。实战进阶loading与远程数据请求的标准配合模式在实际业务中loading几乎总是与异步数据请求成对出现。antd 官方在 远程加载数据示例 中给出了标准模式发起请求前将loading置为true请求成功回调中将其置回false并在同一流程中更新数据源、分页信息。const Test React.createClass({ getInitialState() { return { data: [], pagination: {}, loading: false, }; }, handleTableChange(pagination, filters, sorter) { const pager this.state.pagination; pager.current pagination.current; this.setState({ pagination: pager }); this.fetch({ pageSize: pagination.pageSize, currentPage: pagination.current, sortField: sorter.field, sortOrder: sorter.order, ...filters, }); }, fetch(params {}) { console.log(请求参数, params); this.setState({ loading: true }); // 请求开始进入加载状态 reqwest({ url: demo/data.json, method: get, data: params, type: json, success: (result) { const pagination this.state.pagination; pagination.total result.totalCount; this.setState({ loading: false, // 请求完成退出加载状态 data: result.data, pagination, }); } }); }, componentDidMount() { this.fetch(); // 组件挂载后立即发起首次请求 }, render() { return ( Table columns{columns} dataSource{this.state.data} pagination{this.state.pagination} loading{this.state.loading} onChange{this.handleTableChange} / ); } });这一模式包含三个要点可直接迁移到任何数据驱动的业务场景请求生命周期与loading状态严格对应setState({ loading: true })放在请求发出之前setState({ loading: false })放在请求成功回调之中保证加载指示器覆盖整个请求窗口期分页、筛选、排序参数变化会重新触发请求通过onChange(pagination, filters, sorter)回调重组请求参数并再次fetch()而loading会自动随每次请求重新拉起——这正是loading属于状态而非一次性配置的体现静态数据模拟注意该示例请求的是本地静态data.json真实项目中请替换为实际服务端接口。需要补充说明的是antd 在0.11.0版本后已移除dataSource的远程模式loading状态的控制完全交由开发者自行实现因此上述手动管理 loading 状态的方式即是官方推荐的标准做法。使用建议与注意事项默认关闭显式开启loading默认值为false仅在确实存在异步数据加载时才需要置为true结合空数据处理当dataSource为空数组时表格会渲染ant-table-placeholder占位区域显示默认文案暂无数据及frown图标index.jsx 第 592-601 行。加载中的表格同样会被 Spin 覆盖因此建议在请求期间用loading遮罩请求完成后自然过渡到空数据占位避免闪烁确保每行数据有唯一 key与loading无关但同样关键dataSource中的数据需要携带key属性否则请通过rowKey指定主键详见 Table 文档的注意事项否则表格在状态切换包括加载态切换时可能出现渲染异常类型约束传入的loading必须是布尔值React.PropTypes.bool不要传入字符串或数字以免触发类型警告或出现意料之外的 truthy 判断。小结loading是 antd Table 组件中最常用的状态属性之一通过一个布尔值即可获得完整的加载中视觉反馈。它的实现并不复杂——源码在渲染时依据该属性用Spin包裹整个表格并通过动态类名配合 LESS 样式完成遮罩半透明与指示器居中的效果。掌握它与异步请求的配合模式请求前置 true、回调置 false即可为任何数据驱动的表格页面提供流畅、专业的中断反馈体验。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考