【React Hook】深入浅出：10分钟理解useContext

我们知道，在 React 组件中无法直接进行跨组件的水平 Props 传递。若要传递数据，需要先将 Props 传递给父组件，再层层向下传递。例如在电商网站开发中，产品页面可能嵌套在推荐页面、首页等组件中。若要让购物车组件获取产品页面的 Props，需要跨越多个层级传递，这会导致两个问题：

部分组件无需使用 Props，却必须参与传递
组件重构时可能遗漏 Props 移除或导致逻辑混乱

相比 Redux，Context 提供了轻量级的数据共享方案，允许数据在组件树中水平传递。而 useContext 则提供了更简洁的方式实现数据共享。

什么是 useContext？

useContext 是 React 提供的 Hook，用于在组件中访问上下文（Context）数据。

其核心优势在于：无需逐层传递 Props，即可将数据直接提供给组件树深层组件。

如何使用 Context 和 useContext？

使用 Context 时，需要搭配两个核心概念：

Provider：数据提供容器，嵌套需要共享数据的组件范围
Consumer（或 useContext）：数据消费方，用于获取 Provider 提供的数据

以下对比两种使用模式，解析 useContext 的设计优势：

1. Provider + Consumer 的 Context 模式

实现流程：

创建文件夹与命名文件

在组件目录下创建store或state文件夹，在其中新建xxx-context.js文件（命名以小写开头，非组件命名规范）。

创建 Provider

引入 React 并创建 Context 对象：

javascript 复制代码

import React from 'react';
const XxxxContext = React.createContext(); // 非组件，数据容器

建立 Provider 组件

将 Provider 逻辑抽离为独立组件（如XxxxProvider），便于维护：
javascript 复制代码
```
export default function XxxxProvider({ children }) {
  return (
    <XxxxContext.Provider value={{ /* 共享数据 */ }}>
      {children}
    </XxxxContext.Provider>
  );
}
```
- value属性包含需要共享的数据（对象/基本类型均可）
- React 通过检测value变化决定是否重新渲染消费组件

嵌套接收组件树

在需要共享数据的顶层组件（如App.js）中引入XxxxProvider，嵌套目标组件树：

javascript 复制代码

import XxxxProvider from './store/xxx-context';

function App() {
  return (
    <XxxxProvider>
      <Layout /> {/* 从Layout开始的所有子组件均可访问Context */}
    </XxxxProvider>
  );
}

让组件接收 value 数据

使用Consumer组件消费数据，需通过函数组件获取上下文：
javascript 复制代码
```
<XxxxContext.Consumer>
  {(ctx) => (
    <div>购物车总数：{ctx.totalAmount}</div>
  )}
</XxxxContext.Consumer>
```
缺点：多层嵌套导致 JSX 结构冗长，可读性差。

2. Provider + useContext 的模式

前 4 步与 Consumer 模式完全一致，差异在于数据消费方式：

让组件接收 value 数据

使用 Hook 替代Consumer，代码更简洁：

javascript 复制代码

import XxxxContext from './store/xxx-context';

function CartComponent() {
  // 直接获取Context数据
  const ctx = useContext(XxxxContext);
  const { items, totalAmount } = ctx; // 解构数据

  return (
    <div>
      商品总数：{items.length}
      总金额：{totalAmount}
    </div>
  );
}

核心优势：

避免Consumer嵌套带来的层级混乱
直接在函数组件中通过变量获取数据，符合 React Hook 编程范式

使用 useContext 的必知必会

useContext 不适用于高频更新场景

局限性 ： Context 的设计初衷并非处理高频变化的数据（如每秒多次更新）。
替代方案：若需跨组件共享高频状态，建议使用 Redux 等状态管理库。

useContext 的双重嵌套机制

当需要在组件树的不同层级提供同一 Context 时，可嵌套多个 Provider：

javascript 复制代码

// 顶层Provider
<AppContext.Provider value={appData}>
  <Header />
  <MainContent>
    // 子层级Provider（覆盖顶层value）
    <AppContext.Provider value={overrideData}>
      <DeepComponent />
    </AppContext.Provider>
  </MainContent>
</AppContext.Provider>

深层组件会优先获取最近层级 Provider 的 value
适用于分模块管理不同作用域的共享数据

useContext 仅接收 Context 对象

注意事项 ：
useContext参数必须是React.createContext()返回的对象，不可传入其他 Hook 或函数 。

错误用法：

javascript 复制代码

// ❌ 错误：传入函数而非Context对象
const ctx = useContext(someFunction);

使用 useContext 时的多维度考量

虽然 useContext 能简化多层 Props 传递，但需注意适用场景：

不适合简单单向传递：若数据仅在父子组件间传递，直接使用 Props 更清晰
UI 组件建议用 Props：如模态框（Modal）的错误提示逻辑，使用 Props 传递状态更灵活，避免 Context 逻辑僵化
复杂状态拆分：若单个 Context 包含过多状态，建议拆分为多个独立 Context，降低维护成本