ai讲React 18 + Context API 极简教程 解决深层组件调用父组件里其他组件方法

教程目标

实现一个最简单的效果：

• 创建 2 个组件（A 和 B）
• 用 Context 在组件 A 里存一个 "打招呼" 的方法
• 组件 B 不通过 props，直接调用这个方法

前置准备

确保你有一个 React 18 项目（执行 npx create-react-app my-context-demo 快速创建），我们只需要 3 个文件：

plaintext

src/
├── MyContext.js   # 定义 Context
├── ComponentA.js  # 提供方法的组件
└── App.js         # 主组件（包含 A 和 B）

---

步骤 1：创建 Context（核心文件）

Context 就像一个 "全局共享盒子"，先创建这个盒子。

新建 src/MyContext.js：

jsx

// 1. 导入 React 内置的两个核心方法
import { createContext, useContext } from 'react';

// 2. 创建 Context 盒子（默认值随便写，只是占位）
const MyContext = createContext({
  sayHello: () => {} // 要共享的方法
});

// 3. 封装一个简化使用的 Hook（新手不用写重复代码）
export const useMyContext = () => {
  return useContext(MyContext); // 从盒子里取东西
};

// 4. 导出 Context 的 Provider（用来往盒子里装东西）
export const MyContextProvider = MyContext.Provider;

步骤 2：写主组件 App.js（整合所有内容）

这是唯一的主文件，包含组件 A（定义方法）和组件 B（调用方法）。

修改 src/App.js：

jsx

import { MyContextProvider } from './MyContext';

// 组件 A：定义要共享的方法
const ComponentA = () => {
  // 这是要共享的核心方法
  const sayHello = (name) => {
    alert(`你好呀，${name}！`);
  };

  return (
    // 关键：用 Provider 包裹需要共享的组件，把方法放进 Context
    <MyContextProvider value={{ sayHello: sayHello }}>
      <div style={{ padding: 20 }}>
        <h3>我是组件 A</h3>
        {/* 组件 B：直接用 Context 里的方法 */}
        <ComponentB />
      </div>
    </MyContextProvider>
  );
};

// 组件 B：调用 Context 里的方法（不用传 props）
const ComponentB = () => {
  // 导入我们封装的 Hook，取出方法
  const { sayHello } = useMyContext();

  return (
    <div style={{ marginTop: 10, border: '1px solid #ccc', padding: 10 }}>
      <h4>我是组件 B</h4>
      {/* 点击按钮调用方法 */}
      <button onClick={() => sayHello('小明')}>点我打招呼</button>
    </div>
  );
};

// 主 App 组件
function App() {
  return <ComponentA />;
}

// 别忘了导入 Hook！
import { useMyContext } from './MyContext';

export default App;

步骤 3：运行测试

1. 启动项目：npm start
2. 打开浏览器，点击「点我打招呼」按钮
3. 会弹出提示框：你好呀，小明！ ✅

---

核心原理（一句话讲懂）

代码部分	作用
createContext	造一个 "共享盒子"
MyContextProvider	往盒子里装东西（方法 / 数据），并划定 "谁能拿"（包裹的组件）
useMyContext	从盒子里取东西（任意被包裹的组件都能取，不用传 props）

总结

1. Context 核心用法：创建 → 用 Provider 存数据 / 方法 → 用 useContext 取；
2. 核心优势：组件间不用层层传 props，直接共享数据 / 方法；
3. 最简流程 ：
   • 写 MyContext.js 定义 Context 和 Hook；
   • 用 Provider 包裹组件，传入要共享的内容；
   • 目标组件用 Hook 取出内容直接用。