Antd TreeNode上的重新租赁太多

Question

我在我的React应用程序中使用了ANTD树组件。 在某个时候，我需要具有自定义标题，因此我通过将自定义组件传递给ANTD树组件上可用的“ Titlerender”道具来添加此功能。
现在问题是当我打开树（任何级别）时，我对Treenode组件上的重新渲染感到疯狂。=

打开树并检查日志在这里

这是自然行为吗？

import { Tree } from "antd";
import "antd/dist/antd.css";
const treeData = [
  {
    title: "parent 1",
    key: "0-0",
    children: [
      {
        title: "parent 1-0",
        key: "0-0-0",
        children: [
          {
            title: "leaf",
            key: "0-0-0-0"
          }
        ]
      }
    ]
  }
];

const Title = (props) => {
  console.log("render");
  return <h5>{props.title}</h5>;
};

export default () => (
  <Tree
    treeData={treeData}
    titleRender={(nodeData) => {
      return <Title title={nodeData.title} />;
    }}
  />
);

Answer 1

有一种方法可以减少titlerender调用的数量。为此，您可以设置Motion和虚拟 props props to false。可能是这样的：

<Tree
    virtual={false}
    motion={false}
    titleRender={titleRender}
    treeData={treeData}
/>

我做了简单 demo app 为此。我们可以看到大约400-500 titlerender在我们展开/折叠的顶部节点时调用。如果我们设置Motion和虚拟 props profs to false，我们将获得约10-30 titlerender呼叫。

此外，还有 at ant Design github repository of aw ant Design Github repository of ab > titlerender 性能。