React Bootstrap Tabs中如何卸载Tab组件仅挂载激活项实现挂载时发起API请求

React Bootstrap Tabs 默认会把所有Tab对应的面板内容都渲染在DOM中，仅通过CSS样式隐藏非激活面板，因此非激活Tab内的组件不会触发卸载/重新挂载流程，写在组件挂载生命周期里的API请求只会在Tabs首次加载时执行一次，切换Tab不会重复触发。

有两种成熟方案可以实现仅挂载激活Tab、切换时触发挂载请求的需求：

• 方案一：使用内置unmountOnExit属性（推荐）
  这是组件官方提供的原生能力，无需额外依赖，配置后非激活状态的Tab面板会自动从DOM树卸载，切换回对应Tab时才会重新挂载组件，组件内依赖空数组的useEffect、componentDidMount等挂载生命周期会正常触发，API请求会在Tab激活时自动执行。
  全局给所有Tab开启卸载逻辑，直接给根<Tabs>组件传入属性即可：

  import { Tabs, Tab } from 'react-bootstrap';
  import { useEffect, useState } from 'react';
  
  // Tab内的业务组件
  const OrderPanel = () => {
    const [orderList, setOrderList] = useState([]);
    useEffect(() => {
      // 仅组件挂载（对应Tab激活）时触发请求
      fetch('/api/orders').then(res => res.json()).then(setOrderList);
    }, []);
    return <div>订单列表内容</div>;
  };
  
  const Page = () => {
    return (
      <Tabs
        defaultActiveKey="order"
        unmountOnExit // 核心配置
        className="mb-3"
      >
        <Tab eventKey="order" title="我的订单">
          <OrderPanel />
        </Tab>
        <Tab eventKey="favorite" title="我的收藏">
          <FavoritePanel />
        </Tab>
      </Tabs>
    );
  };
  

  如果只需要给部分Tab开启卸载逻辑，把unmountOnExit属性加到对应<Tab>项上即可，其余Tab仍保持常驻不卸载的状态。如果使用的是v1.x老版本React Bootstrap，把属性加在<Tab.Pane>上即可生效。
• 方案二：手动控制条件渲染（兼容所有版本）
  如果使用的版本过低不支持unmountOnExit属性，可以手动控制激活的Tab key，通过条件渲染只挂载当前激活Tab的内容，实现效果和原生属性完全一致：

  const Page = () => {
    const [activeKey, setActiveKey] = useState('order');
    return (
      <Tabs
        activeKey={activeKey}
        onSelect={(key) => setActiveKey(key)}
        className="mb-3"
      >
        <Tab eventKey="order" title="我的订单">
          {activeKey === 'order' && <OrderPanel />}
        </Tab>
        <Tab eventKey="favorite" title="我的收藏">
          {activeKey === 'favorite' && <FavoritePanel />}
        </Tab>
      </Tabs>
    );
  };
  

注意事项 #

• 开启Tab卸载逻辑后，切走Tab时组件内的所有本地状态（比如表单输入值、列表滚动位置、临时弹窗状态）会随组件卸载被重置，切回时会回到组件初始状态，如果需要保留这类状态不要开启该能力。
• 如果配置后不生效，检查是否手动给Tab面板加了强制显示的自定义样式，或者升级React Bootstrap到稳定版本即可。

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