React中如何根据选中Tab按需调用对应Rest API？该方案是否高效？

1. 选中Tab的捕获与按需请求实现 #

你当前代码里已经通过selectedTab状态绑定了TabGroup的activeIndex，这个状态就是当前选中Tab的标识，默认0对应Tab A，1对应Tab B。你可以通过useEffect监听这个状态的变化，结合缓存标记实现按需请求，完整实现代码如下：

首先定义所需状态：

import { useState, useEffect } from 'react';

// 选中Tab索引、两个Tab的数据集、已加载Tab标记（避免重复请求）
const [selectedTab, setTab] = useState(0); // 默认选中Tab A
const [tabAdata, setTabAdata] = useState(null);
const [tabBdata, setTabBdata] = useState(null);
const [loadedTabs, setLoadedTabs] = useState(new Set());
// 如果公共请求链结果不随Tab变化，可额外加状态缓存公共结果
const [commonRes, setCommonRes] = useState(null);

然后封装请求逻辑，复用公共API链：

const getApiResources = async (tabType) => {
  // 先处理公共API调用链，已缓存的话直接用缓存结果
  let finalCommonRes = commonRes;
  if (!finalCommonRes) {
    // 这里写你原来的公共API调用链逻辑
    // finalCommonRes = await 公共请求结果
    setCommonRes(finalCommonRes);
  }

  // 根据Tab类型执行最后一步请求
  if (tabType === 'A') {
    const res = await fetch("/TabAdata");
    const data = await res.json();
    setTabAdata(data);
  } else if (tabType === 'B') {
    const res = await fetch("/TabBdata");
    const data = await res.json();
    setTabBdata(data);
  }

  // 标记当前Tab已加载，后续切换不再重复请求
  setLoadedTabs(prev => new Set(prev).add(tabType));
}

添加监听逻辑，Tab切换时触发请求：

useEffect(() => {
  const currentTab = selectedTab === 0 ? 'A' : 'B';
  // 仅未加载过的Tab才发起请求
  if (!loadedTabs.has(currentTab)) {
    getApiResources(currentTab);
  }
}, [selectedTab, loadedTabs]);

最后调整Tab组件的渲染逻辑，增加加载状态兼容：

<TabGroup 
  activeIndex={selectedTab}
  onActiveIndexChange={(valueIndex) => setTab(valueIndex)}
  variant="primary"
>
  <Tab label='Tab A'>
    <div>
      {tabAdata ? <Grid data={tabAdata}/> : <div>数据加载中...</div>}
    </div>
  </Tab>
  <Tab label='Tab B'>
    <div>
      {tabBdata ? <Grid data={tabBdata}/> : <div>数据加载中...</div>}
    </div>
  </Tab>
</TabGroup>

2. 方案效率评估 #

这种按需加载的处理方式效率很高，优势非常明显：

• 相比原来预加载两份数据的逻辑，用户如果只访问单个Tab，完全不会触发另一个Tab的请求，既节省了带宽和服务器资源，也加快了首次页面加载速度。
• 搭配loadedTabs缓存逻辑后，用户来回切换Tab不会重复发起请求，兼顾了切换时的响应速度。
• 公共API链做了缓存复用，不会因为切换Tab重复执行相同的前置请求，完全适配你两个Tab仅最后一步请求不同的业务场景。

如果后续Tab数量扩展到3个及以上，你可以把Tab数据、加载状态统一用数组/对象管理，进一步简化代码。

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