React 18 Context API 实战：跨组件通信与状态管理

1. React 18 Context API 实战解析：跨组件方法调用方案

在React开发中，组件通信一直是核心课题。当我们需要在深层嵌套的组件中调用父组件或其他组件的方法时，传统的props逐层传递方式不仅繁琐，还会造成代码冗余。React Context API提供了一种优雅的解决方案，让我们可以像使用"全局共享盒子"一样在组件间传递方法和数据。

这个方案特别适合以下场景：

• 需要在多层嵌套组件中共享状态或方法
• 避免props drilling（属性层层传递）带来的代码臃肿
• 实现跨组件的方法调用而不破坏组件独立性
• 在功能组件中实现类似全局事件总线的效果

2. 项目结构与核心文件准备

2.1 基础环境搭建

首先确保你已安装Node.js（建议版本16+），然后通过以下命令创建React 18项目：

bash复制npx create-react-app context-demo --template typescript
cd context-demo
npm start

提示：虽然本教程使用JavaScript，但添加TypeScript模板可以获得更好的类型提示。如果不需要，可以去掉--template typescript参数。

2.2 项目文件结构

我们需要创建三个核心文件：

code复制src/
├── context/             # 上下文相关文件
│   └── AppContext.js    # 上下文定义文件
├── components/          # 组件目录
│   ├── ProviderA.js     # 方法提供组件
│   └── ConsumerB.js     # 方法消费组件
└── App.js               # 应用入口文件

这种结构将上下文逻辑与组件分离，更符合实际项目的最佳实践。

3. 上下文(Context)的创建与封装

3.1 创建上下文文件

在src/context/AppContext.js中，我们定义上下文的基本结构：

javascript复制import { createContext, useContext } from 'react';

// 定义上下文类型（TypeScript用户可添加interface）
const AppContext = createContext({
  sayHello: (name) => {
    console.log(`Default hello to ${name}`);
  }
});

// 封装自定义Hook
export const useAppContext = () => {
  const context = useContext(AppContext);
  if (!context) {
    throw new Error('useAppContext必须在A