React 组件通信新姿势：用 useContext 实现“按需取用”的全局共享

鱼鱼块
59 阅读7分钟

React useContext：告别“快递式”传参，拥抱“共享存储”的优雅

引子：当组件开始“传话”

想象一下这个场景：你要告诉坐在房间另一头的朋友一句话，但你们中间隔了五个人。你得先告诉第一个人，他再传给下一个，这样一个接一个，最后才能传到朋友耳朵里。在 React 的世界里，这就是传统的 props 逐层传递。

看看这段代码：

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

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

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

user 这个数据就像接力棒一样，从 Page 传到 Header，再传到 UserInfo。如果中间有十层组件呢？维护起来简直是一场噩梦。

初识 useContext：你的“全局云存储”

React 团队当然也意识到了这个问题，于是带来了 Context API，而 useContext 就是使用它的现代化方式。它的核心思想很简单：创建一个共享的数据空间，任何需要数据的组件都可以直接从中获取，无需中间人传话。

让我们重构上面的例子。首先，在应用顶层创建一个“数据容器”：

//App.jsx
import { createContext } from 'react';

export const UserContext = createContext(null);

export default function App(){
  const user = { name: "Andrew" }; 
  
  return(

    <UserContext.Provider value={user}>
      <Page/>
    </UserContext.Provider>
  )
}

在 React 中，当我们需要在多个组件之间共享数据时，可以使用 createContext 来创建一个专门的共享数据空间。这个空间就像一个中央存储库，所有需要这些数据的组件都可以直接访问它，而不需要通过层层传递。

  • createContext(null) 创建了一个名为 UserContext 的上下文容器
  • UserContext.Provider 是一个特殊组件,它包裹需要访问共享数据的子组件,value 属性指定了要共享的数据

Provider 的工作原理

UserContext.Provider 组件有几个关键特点：

  1. 包裹性：它包裹所有需要访问共享数据的子组件
  2. 数据注入：通过 value 属性将数据注入到上下文中
  3. 自动更新：当 value 改变时，所有使用该上下文的组件都会重新渲染

上述两段代码进行对比，我们可以看到，使用 Context 后，中间的 Page 和 Header 组件完全不需要关心 user 数据，它们只需要专注于自己的渲染逻辑。只有真正需要用户数据的 UserInfo 组件才通过 useContext 直接获取数据。

现在，在任何深度的子组件中，我们都可以直接“访问”这个共享空间：

// UserInfo.jsx - 直接消费数据
import { useContext } from 'react';
import { UserContext } from '../App';

export default function UserInfo(){
  // 一句话：从 UserContext 中取出当前值
  const user = useContext(UserContext);
  
  return <div>{user.name}</div>; // 直接使用，无需 props
}

看，UserInfo 不再需要从 Header 接收 user，Header 也无需从 Page 接收。它们都直接“知道”数据在哪里。这就像从“快递寄送”升级到了“云存储+随时下载”。

运行代码：

image.png UserInfo组件成功接收到了user数据

进阶：不只是数据，更是能力

useContext 更强大的地方在于，它可以传递的不仅仅是数据，还可以是 函数，从而实现跨组件的行为调用。

主题切换：一个生动的例子

让我们看一个完整的主题切换实现。首先，我们创建一个专门管理主题的“上下文模块”：

项目目录：

src/
├── components/                # 可复用的 UI 组件
│   └── Header.jsx             # 头部组件
├── contexts/                  # React Context 上下文管理
│   └── ThemeContext.jsx       # 主题上下文（用于全局主题切换）
├── pages/                     # 页面级组件（每个页面一个文件）
│   └── Page.jsx               # 某个页面组件
├── App.jsx                    # 应用主组件（通常包含路由或布局）
└── theme.css                  # 主题相关的样式

// ThemeContext.jsx
import { createContext, useState, 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');
  };
  
  // 当主题变化时，同步到 HTML 元素上（用于 CSS 变量等）
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);
  
  return (
    // 提供 theme 和 toggleTheme 给所有子组件
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

构建主题提供者组件

export default function ThemeProvider({children}){

我们定义了一个名为 ThemeProvider 的函数组件。这个组件的特殊之处在于它接受一个 children 属性，这意味着它可以包裹其他组件，形成一个组件树。

定义主题切换功能

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

toggleTheme 函数实现了主题切换的逻辑。它通过调用 setTheme 来更新状态：

  • 接收当前主题值 t
  • 如果当前是 'light'，则切换为 'dark'
  • 如果当前是 'dark'，则切换为 'light'

这里使用了函数式更新 (t) => ...，这确保我们总是基于最新的状态值进行计算。

同步主题到 DOM

useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
}, [theme]);

useEffect Hook 用于处理副作用操作。在这个例子中：

  • 第一个参数是一个函数，在主题变化时执行
  • 第二个参数 [theme] 是依赖数组，表示当 theme 变化时才执行这个函数

函数内部，我们将当前主题值设置到 HTML 根元素的 data-theme 属性上。这样做的好处是：

  1. CSS 可以通过属性选择器应用不同的样式：[data-theme="light"] 和 [data-theme="dark"]
  2. 整个应用的样式可以基于这个属性统一切换
  3. 避免了在多个地方手动修改 DOM 样式

在应用入口处，我们用这个 ThemeProvider 包裹整个应用：

// App.jsx
import ThemeProvider from './contexts/ThemeContext';
import Page from './pages/Page';

export default function App(){
  return(
    <ThemeProvider> {/* 现在整个应用都能访问主题上下文了 */}
      <Page/>
    </ThemeProvider>
  );
}

现在，任何组件都可以直接使用或修改主题：

Header.jsx
import { useContext } from 'react';
import { ThemeContext } from '../contexts/ThemeContext';

export default function Header(){

  // 一次性获取主题状态和切换函数
  const { theme, toggleTheme } = useContext(ThemeContext);
  
  return(
    <div style={{ marginBottom: '24px' }}> 
      <h2>当前主题：{theme}</h2>
      <button className='button' onClick={toggleTheme}>
        切换主题
      </button>
    </div>
  );
}

这个模式的美妙之处在于：Header 组件不需要知道主题状态存储在哪里，也不需要知道如何修改它。它只是“调用”了上下文中的 toggleTheme 函数，就像按下一个遥控器按钮，整个应用的主题就改变了。

展示结果：

未命名的设计 (2).gif

为什么说这是“优雅”的解决方案？

1. 关注点分离

数据管理（在 Context 中）和 UI 呈现（在组件中）被清晰地区分开。组件只关心“显示什么”和“做什么”，不关心数据“从哪里来”或“怎么变”。

2. 可维护性

当需要修改数据时，你只需要在一个地方（Context）修改，所有使用它的组件都会自动更新。没有复杂的 props 链条需要跟踪。

3. 灵活性

组件可以按需使用 Context。不需要数据的组件完全不用关心 Context 的存在。

最佳实践：如何组织你的 Context

良好的组织方式：

src/
├── components/     # 纯UI组件
├── contexts/       # 所有Context集中管理
├── pages/          # 页面组件
└── App.jsx         # 主组件，组合各种Provider

优点：

  1. 模块化：每个 Context 有自己的文件，职责清晰
  2. 可扩展：添加新 Context 时不会影响现有结构
  3. 易测试：每个 Context 可以独立测试

什么时候该用，什么时候不该用？

适合使用 useContext 的场景：

  • 主题、语言等全局设置
  • 用户身份认证信息
  • 全局状态（如购物车、通知）
  • 多层嵌套组件间的通信

可能不需要 useContext 的场景：

  • 父子组件直接通信（直接用 props）
  • 仅相邻组件通信（考虑组合组件或状态提升）
  • 非常复杂的状态管理

结语：回归简洁

React 的 useContext 不是银弹，但它解决了一个特定且常见的问题：如何在组件树的深层轻松访问共享数据。它让我们从“props 钻井”的痛苦中解放出来，回归到更声明式、更简洁的代码风格。

就像现实世界中，我们不会为了喝一杯水而记住整个供水管网，我们只需要知道水龙头在哪里。useContext 就是那个水龙头——简单、直接、可靠。

下次当你的组件开始需要“长途传话”时，不妨停下来想想：这是不是该建立一个“共享空间”的时候了？

记住这个核心公式：

useContext+ createContext = 跨层级通信的自由

当你理解了这个模式，你会发现 React 组件间的数据流动可以如此自然而优雅。

avatar
文章
阅读
粉丝