React 组件通信进阶：从 Prop Drilling 到 useContext 的优雅转型React 组件通信进阶：

React 组件通信进阶：从 Prop Drilling 到 useContext 的优雅转型

在 React 开发中，组件通信是核心课题。我们最熟悉的通信方式是“父传子”，但在复杂的应用场景下，这种方式往往会让我们陷入困境。本文将探讨如何通过 useContext 解决跨层级通信的难题。

一、痛点：什么是 Prop Drilling（属性钻取）？

在传统的 React 数据流中，数据是单向传递的。如果一个深层嵌套的组件（如 UserInfo）需要最顶层组件（如 App）的数据，我们必须通过中间层级逐层传递。

示例：冗长的传递路径

function App() {
  const user = { name: "Andrew" };
  return <Page user={user} />;
}

function Page({ user }) {
  return <Header user={user} />;
}

function Header({ user }) {
  return <UserInfo user={user} />;
}

function UserInfo({ user }) {
  return <div>{user.name}</div>;
}

这种模式的问题在于：

路径太长：中间组件（如 Page 和 Header）其实并不需要这些数据，但它们必须充当“传声筒”。
维护困难：一旦数据结构改变，所有中间层级都需要修改代码。
性价比低：传递过程繁琐，增加了代码的耦合度。

二、解决方案：Context API

为了解决上述问题，React 提供了 Context。它的核心思想是：在最外层提供一个数据容器，让任何层级的子组件都能“主动查找”并消费数据，而不是被动接收。

1. 创建上下文容器

首先，我们需要使用 createContext 创建一个容器。

import { createContext } from 'react';
// 创建并导出 Context 对象
export const UserContext = createContext(null);

2. 提供数据 (Provider)

在顶层组件中，使用 Provider 组件包裹子树，并通过 value 属性注入共享数据。

export default function App() {
    const user = { name: "Andrew" };
    return (
        // Provider 是数据提供者，value 是共享的值
        <UserContext.Provider value={user}>
            <Page />
        </UserContext.Provider>
    );
}

3. 消费数据 (useContext)

在任何需要数据的子组件中，只需调用 useContext 钩子即可，无需经过中间组件。

import { useContext } from 'react';
import { UserContext } from '../App';

function UserInfo() {
    // 主动获取数据，不再依赖 props 传递
    const user = useContext(UserContext);
    return <div>{user.name}</div>;
}

三、实战进阶：动态主题切换 (ThemeProvider)

Context 不仅可以传递静态数据，还可以配合 useState 传递状态和修改状态的函数，实现全局状态管理。

封装 ThemeProvider

我们可以将 Context 的逻辑封装在一个独立的组件中，使代码更具模块化。

import { useState, createContext, useEffect } from 'react';

export const ThemeContext = createContext(null);

export default function ThemeProvider({ children }) {
    const [theme, setTheme] = useState('light');

    const toggleTheme = () => {
        setTheme((t) => (t === 'light' ? 'dark' : 'light'));
    };

    // 监听 theme 变化，同步修改 DOM 属性
    useEffect(() => {
        document.documentElement.setAttribute('data-theme', theme);
    }, [theme]);

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

在组件中使用

export default function Header() {
    const { theme, toggleTheme } = useContext(ThemeContext);

    return (
        <div>
            <h2>当前主题: {theme}</h2>
            <button onClick={toggleTheme}>切换主题</button>
        </div>
    );
}

四、总结：Context 的核心逻辑

本质是闭包：Context 在底层利用了闭包的思想，让子组件能够访问到定义在父级作用域中的状态。
主动查找 vs 被动接收：
- Props：子组件是被动的，必须等待父组件把数据传下来。
- Context：子组件拥有了“找数据”的能力，只要在 Context 的范围内，随时可以按需取用。
使用场景：
- 用户信息（登录状态）。
- 主题皮肤（黑夜/白天模式）。
- 多语言配置（国际化）。
- 任何需要跨越多个层级共享的全局状态。

注意：虽然 Context 很好用，但不要滥用。对于简单的父子通信，Props 依然是最清晰、性能最好的选择。只有当“路径太长”影响开发效率时，才是 Context 大显身手的时候。

React 组件通信进阶：从 Prop Drilling 到 useContext 的优雅转型