Ant Design 的 Tabs 切换时为什么内容会闪烁或重新渲染？

程哲 Dev 提问于 2026-03-27 20:56:22 阅读 3

组件

我在用 Ant Design 的 Tabs 组件，发现每次切换 Tab 时，对应的内容组件都会重新 mount，导致数据重新请求、输入框内容丢失。明明没用 forceRender={false} 啊？

我试过给每个 TabPane 加 key，也试过把子组件提出来缓存，但还是不行。是不是哪里配置错了？

const App = () => {
  return (
    <Tabs defaultActiveKey="1">
      <Tabs.TabPane tab="Tab 1" key="1">
        <MyForm />
      </Tabs.TabPane>
      <Tabs.TabPane tab="Tab 2" key="2">
        <MyChart />
      </Tabs.TabPane>
    </Tabs>
  );
}

我来解答赞 1 收藏

反馈

1 条解答

程序员培聪 Lv1

这问题我遇到过，Ant Design 默认会在 Tab 切换时卸载不显示的 Tab 内容，要想避免重新渲染就得用 forceRender。你提到没用 forceRender={true}，那肯定不行啊。

直接在 Tabs 组件上加上这个属性：

const App = () => {

  return (

    <Tabs defaultActiveKey="1" forceRender={true}>

      <Tabs.TabPane tab="Tab 1" key="1">

        <MyForm />

      </Tabs.TabPane>

      <Tabs.TabPane tab="Tab 2" key="2">

        <MyChart />

      </Tabs.TabPane>

    </Tabs>

  );

}

另外提醒下，虽然这样会占用更多内存，但对用户体验来说效率更高，毕竟不用重复请求数据和重绘界面。

要是你还想进一步优化性能，可以把每个 Tab 的内容单独 memo 化处理，不过这就得看具体需求了。反正先把 forceRender 打开准没错。

2026-03-27 21:04