antd的tree渲染大数据数据

当渲染大量数据时，可以采用虚拟滚动的方式来优化性能。Antd的Tree组件提供了loadData方法和treeDataSimpleMode配置项来支持虚拟滚动。

使用loadData方法

loadData方法可以异步加载子节点数据，可以在需要展开子节点时调用该方法来异步加载数据。在调用loadData方法前，需要设置treeDataSimpleMode为true，以告诉Tree组件数据的格式。

示例代码：

import { Tree } from 'antd';

const { TreeNode } = Tree;
const treeData = [
  {
    title: 'Node1',
    key: '1',
  },
  {
    title: 'Node2',
    key: '2',
  },
];

const Demo = () => {
  const onLoadData = treeNode =>
    new Promise(resolve => {
      if (treeNode.children) {
        resolve();
        return;
      }
      setTimeout(() => {
        treeNode.children = [
          {
            title: 'Child Node',
            key: `${treeNode.key}-0`,
          },
        ];
        resolve();
      }, 1000);
    });

  return (
    <Tree loadData={onLoadData} treeDataSimpleMode>
      {renderTreeNodes(treeData)}
    </Tree>
  );
};

const renderTreeNodes = data =>
  data.map(item => {
    if (item.children) {
      return (
        <TreeNode title={item.title} key={item.key} dataRef={item}>
          {renderTreeNodes(item.children)}
        </TreeNode>
      );
    }
    return <TreeNode {...item} />;
  });

export default Demo;

使用treeDataSimpleMode配置项

treeDataSimpleMode配置项用于指定Tree组件的数据格式，将其设置为true后，数据项只需要包含key、title、children三个属性即可。

示例代码：

import { Tree } from 'antd';

const { TreeNode } = Tree;
const treeData = [
  {
    title: 'Node1',
    key: '1',
    children: [
      {
        title: 'Child Node',
        key: '1-0',
      },
    ],
  },
  {
    title: 'Node2',
    key: '2',
    children: [
      {
        title: 'Child Node',
        key: '2-0',
      },
    ],
  },
  //... 大量数据
];

const Demo = () => {
  return (
    <Tree treeData={treeData} treeDataSimpleMode />
  );
};

export default Demo;

以上两种方式都可以用于优化Antd的Tree组件渲染大量数据时的性能问题。