Ant Design Tabs组件首次渲染及切换时全量渲染子组件问题咨询

问题现象 #

• 首次渲染Tabs组件时，所有标签页的子组件都会被触发渲染，控制台输出：

  children 1 
  children 2 
  children 3 
  

• 切换标签页时，所有标签页的子组件仍会重复渲染，输出内容与首次一致
• 预期行为：首次渲染或切换标签页时，仅当前激活标签页的内容触发一次渲染

问题原因 #

1. 直接在items数组的每一项中定义children为JSX元素，会导致组件渲染时所有标签页的子组件被提前创建并执行内部代码（包括console.log），无论标签是否激活。
2. 错误使用了accessKey属性，该属性并非Ant Design Tabs用来控制标签页渲染的配置项，正确控制激活状态的属性是activeKey。

解决方案 #

方案1：利用组件内置的懒加载功能 #

Ant Design Tabs支持通过lazy配置实现标签页内容懒加载，仅在标签被激活时才渲染对应内容。修改代码如下：

// demo.js
const App = () => {
  const [tab, setTab] = React.useState("1");

  return (
    <Tabs
      onChange={(key) => setTab(key)}
      type="card"
      activeKey={tab}
      items={new Array(3).fill(null).map((_, i) => {
        const id = String(i + 1);
        return {
          label: `Tab ${id}`,
          key: id,
          lazy: true, // 开启当前标签页的懒加载
          children: (
            <div>
              {console.log(`children ${id}`)}
              <span>-----------------{id}</span>
            </div>
          )
        };
      })}
    />
  );
};

方案2：手动控制子组件渲染 #

如果需要更精细的渲染控制，可以通过判断当前激活的activeKey来决定是否渲染对应标签页内容：

// demo.js
const App = () => {
  const [tab, setTab] = React.useState("1");

  return (
    <Tabs
      onChange={(key) => setTab(key)}
      type="card"
      activeKey={tab}
      items={new Array(3).fill(null).map((_, i) => {
        const id = String(i + 1);
        return {
          label: `Tab ${id}`,
          key: id,
          children: tab === id ? (
            <div>
              {console.log(`children ${id}`)}
              <span>-----------------{id}</span>
            </div>
          ) : null
        };
      })}
    />
  );
};

关键注意点 #

• 替换accessKey为activeKey，这是Tabs组件控制当前激活标签页的标准属性。
• 开启lazy后，标签页内容只会在首次激活时渲染一次；若需要切换标签时重新渲染，可结合forceRender配置使用。

内容的提问来源于stack exchange，提问作者ulandch