React中在主路由调用API并使用Loader是否为最佳实践？

现有实现的问题与副作用 #

你贴的在App根组件用空依赖useEffect触发请求、加载态返回Spinner的写法，属于可运行的基础实现，但不是最佳实践，存在明确缺陷：

• 首屏闪烁：useEffect会在组件首次挂载到DOM后才执行，意味着页面会先渲染一次空的App组件，甚至可能短暂渲染出无数据的路由内容，再切换到加载态，弱网下体验很差。
• 数据共享麻烦：初始化接口返回的全局配置、用户权限等数据是全应用通用的，存在App组件本地状态里的话，子组件要拿就得层层透传props，平白增加维护成本。
• 无异常处理：没有覆盖请求失败的分支，一旦接口报错，页面会永久卡在加载态，用户没有重试或获取错误提示的通道。
• 路由状态脱节：路由层感知不到全局初始化进度，后续做路由守卫、权限跳转时，很容易出现路由已经切换、但全局数据还没就绪的逻辑冲突。

分场景替代方案 #

轻量小项目：修正根组件调用逻辑 #

如果项目规模小，不想引入额外的路由能力或复杂状态管理，可以在现有写法基础上补全缺陷，不需要重构：

• 把请求触发时机提前到模块加载阶段，不等App组件挂载就发起请求，省掉首次空渲染的等待时间
• 用React Context收敛初始化状态，所有子组件可以直接拿数据，不用透传props
• 补全错误态和重试逻辑
  参考实现：

import "./styles.css";
import { Routes, Route } from "react-router-dom";
import { createContext, useContext, useSyncExternalStore } from "react";

// 模块加载时立刻发起初始化请求，和组件渲染、JS执行并行
const initDataPromise = fetchAppInitConfig();
// 轻量全局状态，不需要额外引入状态库
let appInitState = {
  loading: true,
  data: null,
  error: null
};
const listeners = new Set();
initDataPromise
  .then(res => {
    appInitState = { loading: false, data: res, error: null };
    listeners.forEach(cb => cb());
  })
  .catch(err => {
    appInitState = { loading: false, data: null, error: err };
    listeners.forEach(cb => cb());
  });

const InitDataContext = createContext(null);
export const useInitData = () => useContext(InitDataContext);

function useAppInitState() {
  return useSyncExternalStore(
    listener => {
      listeners.add(listener);
      return () => listeners.delete(listener);
    },
    () => appInitState
  );
}

export default function App() {
  const { loading, data, error } = useAppInitState();

  if (loading) return <Spinner />;
  if (error) return <ErrorPage onRetry={() => window.location.reload()} />;

  return (
    <InitDataContext.Provider value={data}>
      <Routes>
        <Route path="/" element={<HomePage />} />
      </Routes>
    </InitDataContext.Provider>
  );
}

中大型路由项目：使用路由层Loader能力 #

如果使用React Router v6.4及以上版本，官方提供的路由Loader机制是更适配的方案，专门解决路由渲染前的数据拉取需求：

• Loader会在路由匹配完成后、组件渲染前执行，完全避免空渲染闪烁
• 加载态、错误态可以直接通过路由配置项声明，不需要自己写条件判断
• 所有子路由可以通过官方Hook直接拿到初始化数据，不需要自己做状态同步
  参考实现：

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import HomePage from "./pages/Home";
import Spinner from "./components/Spinner";
import ErrorPage from "./components/ErrorPage";

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomePage />,
    // 根路由loader处理初始化请求
    loader: async () => {
      const initData = await fetchAppInitConfig();
      return initData;
    },
    // 加载阶段自动展示Spinner
    hydrateFallbackElement: <Spinner />,
    // 请求失败自动渲染错误页
    errorElement: <ErrorPage />
  }
]);

export default function App() {
  return <RouterProvider router={router} />;
}

高性能要求场景：进一步前置请求时机 #

如果对首屏加载速度有极致要求，可以把请求时机再往前提：

• 纯CSR项目可以在index.html中插入内联脚本，在加载JS业务包的并行阶段就发起初始化请求，等React代码执行完准备hydrate时，数据大概率已经返回，能大幅缩短首屏等待时间
• SSR/SSG项目直接在服务端渲染阶段拉取初始化数据，注入到HTML中，客户端hydrate时直接读取使用，完全不需要客户端额外发请求，也不会有加载态

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