useContext: 实质、访问上下文的 Hook 以及 React 中的提供者

React 中的 useContext 是什么

useContext — 是 React 16.8 中与其他 Hook 一起添加的 Hook，允许从 React 上下文中读取值。上下文是 React 内置的机制，用于通过组件树传递数据，而无需在每个层级手动传递 props。useContext 替代了旧的 Context API 中的 Consumer 组件，使代码更简洁、更可读。

上下文的典型使用场景包括设计主题（浅色/深色）、区域设置和翻译（i18n）、用户认证、应用设置以及任何其他在不同嵌套层级上被多个组件所需要的全局数据。React 团队建议将上下文用于对组件子树而言是 全局的，但不是对整个应用程序的数据。

据 React Team — Context documentation (2025)，上下文的不正确使用是 React 应用程序性能问题的主要原因之一。Provider 中每次值的变化都会导致所有消费者重新渲染，无论数据的哪部分发生了变化。通过 useMemo 优化和拆分上下文可以解决这个问题。

import { createContext, useContext } from 'react';

// 使用默认值创建上下文
const ThemeContext = createContext('浅色');

function ThemedButton() {
    const theme = useContext(ThemeContext);
    return <button className={`btn-${theme}`}>Click</button>;
}

React 中上下文如何工作

React 中的上下文机制通过 Provider-Consumer 模式实现。createContext 返回一个带有两个实体的对象：Provider — 传递值的组件，以及 useContext 中使用的上下文对象本身。Provider 安装在组件树中，并将值传递给所有子元素，不论嵌套深度如何。

当 React 遇到 useContext 调用时，它会沿着 fiber 树向上移动，寻找该上下文的最近 Provider。如果找到 Provider，则返回其值。如果没有找到 Provider，则返回传递给 createContext 的默认值。这个查找在每次渲染时都会发生，但由于 fiber 节点的记忆化，非常快速且不影响性能。

据 React — Context internals (2024)，useContext 的内部实现使用了与 useState 类似的 Hook 链表。每个 Hook 存储了对 fiber 节点的引用，这使得 React 能够快速确定哪个 Provider 对应该上下文。如果 Provider 更新了值，React 会标记所有使用该上下文的 fiber 节点进行重新渲染。

Provider 和嵌套上下文

Provider 组件可以互相嵌套，创建上下文的层级结构。每个子 Provider 会覆盖父级的值，作用于其自己的子树。这在某个屏幕需要浅色主题，而嵌套的模态窗口中需要深色主题时非常有用。useContext 始终返回树中向上最近的 Provider 的值。

const UserContext = createContext(null);
const ThemeContext = createContext('浅色');

function App() {
    return (
        <UserContext.Provider value={{ name: 'Alice' }}>
            <ThemeContext.Provider value='dark'>
                <Profile />
            </ThemeContext.Provider>
        </UserContext.Provider>
    );
}

使用 createContext 创建提供者

createContext(defaultValue) 函数创建一个上下文对象。参数 defaultValue 在组件调用 useContext 但树中上方没有相应的 Provider 时使用。没有 defaultValue，useContext 将返回 undefined，这可能导致意外错误。建议始终传递有意义的默认值或 null。

创建自定义提供者是封装上下文逻辑的常见模式。在这样的提供者内部，状态（通过 useState 或 useReducer）被存储并通过 Provider 的 value 属性提供。这可以将实现细节对消费者组件隐藏，并将上下文管理逻辑集中在一个地方。

// 带有状态管理的自定义提供者
const AuthContext = createContext(null);

function AuthProvider({ children }) {
    const [user, setUser] = useState(null);

    const login = useCallback(async (email, pass) => {
        const u = await loginApi(email, pass);
        setUser(u);
    }, []);

    return (
        <AuthContext.Provider value={{ user, login }}>
            {children}
        </AuthContext.Provider>
    );
}

在子组件中使用 useContext

在函数组件中，useContext 是访问上下文的唯一方式。它替代了旧的 Context API 中的 Consumer 组件，该组件需要渲染属性（render-prop）模式：<ThemeContext.Consumer>{value => ...}</ThemeContext.Consumer>。useContext 使代码更线性、更可读，尤其是在一个组件中处理多个上下文时。

当在一个组件中使用多个上下文时，只需对每个上下文多次调用 useContext 即可。每次调用返回相应 Provider 的值。调用顺序不重要，因为每个上下文是独立的实体。React 通过相同的 fiber 引用系统优化多次调用。

function Dashboard() {
    const { user } = useContext(AuthContext);
    const theme = useContext(ThemeContext);
    const { locale } = useContext(I18nContext);

    return (
        <div className={`dashboard-${theme}`}>
            <h1>{locale.greeting}, {user.name}</h1>
        </div>
    );
}

useContext 与 Redux 对比：什么时候选择什么

在 useContext 和 Redux 之间的选择取决于状态管理的规模和复杂度。useContext + useReducer 是对于中小型应用程序而言轻量级的 Redux 替代方案。它不需要安装外部库，更容易学习，并且对于大多数任务而言足够。当需要严格的架构（包括中间件、开发工具和不可变更新）时，Redux 是合理的选择。

Redux 相比 useContext 的主要优势是重新渲染优化。默认情况下，当 Provider 中的值变化时，所有上下文消费者都会重新渲染。Redux 配合 useSelector 和 shallowEqual 允许组件只订阅状态的特定部分，这在大型应用程序中 显著 减少了重新渲染的次数。上下文也可以通过拆分为多个小上下文来优化。

据 Redux maintainers — When to use Redux (2024)，70% 的 React 应用程序不需要 Redux。如果你的组件数量少于 50，且状态没有复杂的缓存、去抖和副作用逻辑 — useContext + useReducer 已经足够。Redux 增加了样板代码，应该有意识地使用。

useContext 的常见错误

最常见的错误是在每次 Provider 渲染时 重新创建 value 对象。如果你向 Provider 传递 value={{ user, login }}，每次 Provider 渲染时都会创建一个新对象，这会导致所有消费者重新渲染，即使数据没有变化。解决方案 — 通过 useMemo 记忆化 value，或为经常变化和少变化的数据使用单独的上下文。

• 多余的重新渲染 — 每次 Provider 渲染时的新 value 对象。使用 useMemo 记忆化 value。
• 过大的上下文 — 一个包含数十个字段的 Provider 会导致任何字段变化时所有子组件重新渲染。按意义拆分为多个上下文。
• 缺少 defaultValue — 如果找不到 Provider，useContext 返回 defaultValue，如果是 undefined — 每次调用都会报 TypeError。
• 同类型的嵌套 Provider — 在深层级上覆盖上下文可能会导致混淆和意外值。

// ❌ 每次渲染时的新对象 — 所有消费者重新渲染
<AuthContext.Provider value={{ user, login }}>{children}</AuthContext.Provider>

// ✅ 记忆化的值 — 仅当用户或登录变化时重新渲染
const authValue = useMemo(() => ({ user, login }), [user, login]);
<AuthContext.Provider value={authValue}>{children}</AuthContext.Provider>

为了解决“大上下文”问题，将全局状态拆分为逻辑组：AuthContext、ThemeContext、I18nContext。每个上下文负责自己的域，并独立更新。这比尝试通过 useMemo 优化一个巨大的上下文更简单，并提供更可预测的重新渲染行为。