createContext - 技术栈

createContext 是 React 的一个核心 API，用于创建上下文（Context），主要作用是在组件树中共享数据，避免通过 props 逐层传递。

基本概念

1. 什么是 Context

Context 提供了一种在组件树中跨层级传递数据的方法，无需手动在每个层级传递 props。

2. 主要用途

主题管理（如明暗主题切换）
用户认证状态
语言国际化
全局配置
API 服务共享

在你的代码中的分析

1. 创建 Context

复制代码

const EnvContext = createContext<EnvContextType | undefined>(undefined);

创建一个名为 EnvContext 的上下文
泛型参数 EnvContextType | undefined 定义了上下文值的类型
undefined 是默认值，表示在没有 Provider 时的值

2. Provider 组件

复制代码

export const EnvProvider = ({ children }: { children: ReactNode }) => {
  const [envConfig] = useState<EnvConfigType>(env);
  const [appService, setAppService] = useState<AppService | null>(null);

  React.useEffect(() => {
    envConfig.getAppService().then((service) => setAppService(service));
  }, [envConfig]);

  return (
    <EnvContext.Provider value={{ envConfig, appService }}>
      {children}
    </EnvContext.Provider>
  );
};

作用：

封装了 envConfig 和 appService 的状态管理
通过 Provider 向所有子组件提供这些数据
异步获取 appService 并更新状态

3. 使用 Context 的 Hook

复制代码

export const useEnv = (): EnvContextType => {
  const context = useContext(EnvContext);
  if (!context) throw new Error('useEnv must be used within EnvProvider');
  return context;
};

作用：

提供一个便捷的方式获取 Context 数据
包含安全检查，确保在正确的范围内使用

使用示例

在组件中使用

复制代码

function MyComponent() {
  const { envConfig, appService } = useEnv();
  
  // 可以直接使用，无需通过props传递
  console.log(envConfig.apiBaseUrl);
  console.log(appService?.version);
  
  return <div>...</div>;
}

Context vs Props 传递对比

传统 Props 传递（问题）

复制代码

// 需要逐层传递
<App>
  <Layout envConfig={envConfig}>
    <Header envConfig={envConfig}>
      <Navigation envConfig={envConfig}>
        <MenuItem envConfig={envConfig} />
      </Navigation>
    </Header>
  </Layout>
</App>

Context 方式（解决方案）

复制代码

// 顶层提供数据
<EnvProvider>
  <App>
    <Layout>
      <Header>
        <Navigation>
          <MenuItem /> {/* 直接使用 useEnv() 获取 */}
        </Navigation>
      </Header>
    </Layout>
  </App>
</EnvProvider>

优势

简化数据流：避免 props drilling
集中管理：全局状态在一个地方管理
类型安全：TypeScript 提供完整类型检查
性能优化：只有使用该 Context 的组件会在值变化时重新渲染

注意事项

不要过度使用：Context 适合全局数据，不适合频繁变化的局部状态
合理拆分：不同类型的数据使用不同的 Context
性能考虑：Context 值变化会导致所有消费者重新渲染

在你的代码中， EnvContext 很好地封装了环境配置和应用服务，为整个应用提供了统一的配置访问方式。