React路由切换时多数据获取的最佳实践及方案咨询

我是前端开发新手，正在摸索最佳实践。之前在组件里用useEffect获取服务器数据，功能正常，但路由切换时组件重渲染会触发重复请求——这些数据基本不会变，属于没必要的请求。我考虑给每个API调用单独用useContext Hook，但担心这是不良实践，想求建议。

我的代码示例：

const ServiceContext = React.createContext<any>(null);

export const useServices = () => {
  return React.useContext(ServiceContext);
};

export const ServiceProvider = ({children}) => {
  const [services, setServices] = React.useState(null);

  React.useEffect(() => {
    const fetchServices = async () => {
      try {
        const services = await dataProvider.getList("services");
        setServices(services.data);
      } catch (err) {
        console.log(err);
        setServices(null);
      }
    };
    fetchServices();
  }, []);
  return (
    <ServiceContext.Provider value={services}>
      {children}
    </ServiceContext.Provider>
  );
};

Context嵌套方式：

export const ClientContextProvider = ({children}) => {
  return (
          <ServiceProvider>
           <Provider2>
            <Providerx....>
             {children}
            </Providerx....>
           </Provider2>
          </ServiceProvider>
   );
};

目前只需要3个Context对应3份数据，但怕后续数量增多导致应用启动过重，想找适合大型项目的方案。查了文档和论坛没找到答案。

编辑1：
我找了个临时方案，不确定可行不。单独建文件：

let data = null;

export const GetData = async () => {
  if (data === null) {
    data = await fetch();
  }
  return data;
};

组件里使用：

const [data, setData] = React.useState(null);

React.useEffect(() => {
  const fetchData = async () => {
    const fetchedData = await GetData();
    setData(data);
  };
  fetchData();
}, []);

编辑2：
感兴趣的开发者可以了解react-query库，它能处理这类数据缓存、重复请求问题。

1. 当前方案的问题 #

• 单个API对应一个Context：这种做法会导致Context爆炸，每个数据都套一层Provider，嵌套层级越来越深，维护成本飙升，而且每个Provider都会在应用启动时触发请求，确实会让启动负载变大。
• 全局变量缓存方案：思路对但缺陷明显：全局变量不会随组件卸载清理，没有过期、失效机制；如果数据需要更新（哪怕很少），没法主动触发重新请求；服务端渲染场景下还有内存泄漏风险。

2. 大型项目最优解：专业数据请求库 #

像你提到的react-query（现名TanStack Query）就是专门解决这类问题的工具，核心能力就是自动缓存、避免重复请求、管理数据生命周期，完全不用自己写Context或全局变量。

用它改写你的场景，代码会简洁很多：

import { useQuery } from '@tanstack/react-query';

const fetchServices = async () => {
  const response = await dataProvider.getList("services");
  return response.data;
};

// 组件内使用
const { data: services, isLoading, error } = useQuery({
  queryKey: ['services'], // 缓存的唯一标识
  queryFn: fetchServices,
  staleTime: Infinity, // 数据基本不变，设置为永不过期
});

不管路由切换多少次，只要缓存存在就不会重复发请求；后续需要更新数据时，只需调用refetch或调整staleTime即可，完全不用维护Context或全局变量。

3. 无第三方库的优化方案 #

如果暂时不想引入新库，可以把相关API请求合并到一个Context里，而非每个API单独建Context。比如把所有静态数据的请求放在一个StaticDataContext中，在Provider里一次性或按需请求，减少Context数量：

const StaticDataContext = React.createContext({
  services: null,
  otherData: null,
});

export const useStaticData = () => React.useContext(StaticDataContext);

export const StaticDataProvider = ({ children }) => {
  const [services, setServices] = React.useState(null);
  const [otherData, setOtherData] = React.useState(null);

  // 请求services
  React.useEffect(() => {
    const fetchServices = async () => {
      try {
        const res = await dataProvider.getList("services");
        setServices(res.data);
      } catch (err) {
        console.log(err);
      }
    };
    if (!services) fetchServices();
  }, [services]);

  // 请求otherData
  React.useEffect(() => {
    const fetchOtherData = async () => {
      try {
        const res = await dataProvider.getList("otherData");
        setOtherData(res.data);
      } catch (err) {
        console.log(err);
      }
    };
    if (!otherData) fetchOtherData();
  }, [otherData]);

  return (
    <StaticDataContext.Provider value={{ services, otherData }}>
      {children}
    </StaticDataContext.Provider>
  );
};

这样只用一个Provider就能管理多份静态数据，避免Context嵌套过多的问题。

总结 #

• 不建议每个API单独用Context，会导致Context爆炸；
• 全局变量缓存方案有局限性，不适合长期维护；
• 优先推荐TanStack Query（原react-query）这类专业数据请求库，一站式解决缓存、重复请求、数据更新等问题，适配大型项目需求；
• 若不想用第三方库，就合并相关数据到单个Context中，减少Provider数量。

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