Ant Design 树表格渲染优化：超过 1000 行的性能提升

要通过 Ant Design 的 table 组件完成树表格渲染，可以使用 TreeTable 组件，并设置 rowKey 属性为每行数据的唯一标识。然后，可以在 componentDidMount 生命周期方法中获取当前时间，并在 componentDidUpdate 生命周期方法中再次获取当前时间，并计算渲染时间差。\n\n以下是一个示例代码：\n\njsx\nimport React, { Component } from "react";\nimport { Table } from "antd";\n\nclass TreeTableExample extends Component {\n state = {\n dataSource: [] // 假设这是树表格数据源\n };\n\n componentDidMount() {\n console.time("renderTime");\n }\n\n componentDidUpdate() {\n console.timeEnd("renderTime");\n }\n\n render() {\n const { dataSource } = this.state;\n\n const columns = [\n // 列配置\n ];\n\n return (\n <Table\n dataSource={dataSource}\n columns={columns}\n rowKey="id" // 假设 id 为每行数据的唯一标识\n expandable={{\n // 树形展开配置\n }}\n pagination={false}\n />\n );\n }\n}\n\nexport default TreeTableExample;\n\n\n在控制台中，将会打印出渲染时间，以便您可以查看渲染树表格所需的时间。