React.createContext的用法

在 React 中，React.createContext 是用来创建 Context（上下文）对象的工具。它是 Context API 的起点，定义了一个可以在组件树中共享数据的“容器”。但具体在什么情况下使用 createContext，取决于你的应用需求和数据流动的场景。以下是详细的解答，帮助你理解什么时候适合使用 createContext。

什么时候使用 `createContext`？

1. 需要在组件树中共享全局数据

当你的应用有一些需要在多个组件之间共享的数据，且这些组件可能分布在不同的层级时，createContext 是一个很好的选择。典型场景包括：

主题（Theme）：比如切换深色/浅色模式。
用户信息：登录状态、用户姓名、权限等。
语言设置：多语言应用的当前语言。
全局配置：API 端点、环境变量等。

例子：主题切换

import React, { useContext } from 'react';

// 创建 Context
const ThemeContext = React.createContext('light');

function Button() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme === 'light' ? '#fff' : '#333' }}>按钮</button>;
}

function App() {
  const [theme, setTheme] = React.useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <Button />
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>切换</button>
    </ThemeContext.Provider>
  );
}

适用场景：当你不想通过 props 一层层传递 theme 到深层组件。

2. 避免 Prop Drilling（属性钻透）

当某个数据需要在组件树的多个层级中使用，但中间的组件并不关心这些数据时，手动传递 props 会变得繁琐。这时可以用 createContext 创建一个 Context，让需要的组件直接访问。

例子：用户信息传递

import React, { useContext } from 'react';

const UserContext = React.createContext({ name: 'Guest' });

// 不使用 Context 的情况（Prop Drilling）
function AppWithoutContext() {
  const user = { name: 'Alice' };
  return <Parent user={user} />;
}
function Parent({ user }) {
  return <Child user={user} />;
}
function Child({ user }) {
  return <div>用户: {user.name}</div>;
}

// 使用 Context
function AppWithContext() {
  const user = { name: 'Alice' };
  return (
    <UserContext.Provider value={user}>
      <ParentWithContext />
    </UserContext.Provider>
  );
}
function ParentWithContext() {
  return <ChildWithContext />;
}
function ChildWithContext() {
  const user = useContext(UserContext);
  return <div>用户: {user.name}</div>;
}

适用场景：当组件层级较深，手动传递 props 变得麻烦或难以维护。

3. 简单替代状态管理库

在中小型应用中，如果你需要一个全局状态，但又不想引入 Redux、Mobx 等复杂的状态管理库，createContext 结合 useContext 和 useState（或 useReducer）可以实现类似功能。

例子：计数器状态管理

import React, { useContext, useState } from 'react';

const CountContext = React.createContext({ count: 0, setCount: () => {} });

function CountProvider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = useContext(CountContext);
  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>加 1</button>
    </div>
  );
}

function App() {
  return (
    <CountProvider>
      <Counter />
      <Counter /> {/* 多个组件共享同一个计数 */}
    </CountProvider>
  );
}

适用场景：小型项目中需要轻量级的全局状态管理。

4. 动态作用域的数据

当你需要在组件树的不同部分使用不同的值，但这些值属于同一类型或用途时，可以用 createContext 创建一个 Context，然后通过多个 Provider 提供不同的值。

例子：多主题区域

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedArea() {
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'light' ? '#fff' : '#333' }}>区域: {theme}</div>;
}

function App() {
  return (
    <div>
      <ThemeContext.Provider value="light">
        <ThemedArea /> {/* 浅色 */}
      </ThemeContext.Provider>
      <ThemeContext.Provider value="dark">
        <ThemedArea /> {/* 深色 */}
      </ThemeContext.Provider>
    </div>
  );
}

适用场景：当你需要为组件树的不同部分提供不同的 Context 值。

5. 组件库或模块化开发

如果你在开发一个组件库或模块，希望某些组件能共享状态或配置，但又不依赖外部状态管理，可以用 createContext 在模块内部创建 Context。

例子：表单组件库

import React, { useContext } from 'react';

const FormContext = React.createContext({ submitted: false });

function Form({ children, onSubmit }) {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <FormContext.Provider value={{ submitted }}>
      <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); onSubmit(); }}>
        {children}
      </form>
    </FormContext.Provider>
  );
}

function SubmitButton() {
  const { submitted } = useContext(FormContext);
  return <button type="submit" disabled={submitted}>提交</button>;
}

function App() {
  return (
    <Form onSubmit={() => console.log('提交了')}>
      <SubmitButton />
    </Form>
  );
}

适用场景：封装可复用的组件逻辑，内部组件需要共享状态。

什么时候不使用 `createContext`？

数据只在单一组件或父子组件间使用：直接用 props 或状态即可，没必要引入 Context。
频繁更新的小型数据：Context 值变化会导致所有订阅者重新渲染，如果数据更新很频繁且范围小，可能不如用 props 或局部状态。
复杂状态管理：在大规模应用中，如果状态逻辑复杂（如异步操作、依赖关系多），可能需要 Redux、Zustand 等专门的状态管理库。

总结

使用 createContext 的核心场景是：

全局共享数据：需要在多个组件间共享，且层级较深。
避免繁琐传递：替代 prop drilling。
轻量状态管理：中小型应用的全局状态。
动态作用域：为不同子树提供不同值。
模块封装：组件库或模块内部共享逻辑。

如果你只是需要在两三个组件间传递数据，props 就够了。但当数据跨越多层或需要全局访问时，createContext 就派上用场了。