React组件通信——context（提供者/消费者）

Context 是 React 提供的一种组件间通信方式，主要用于解决跨层级组件 props 传递的问题。它允许数据在组件树中"跨级"传递，无需显式地通过每一层 props 向下传递。

一、Context 核心概念

1. 基本组成

• React.createContext：创建 Context 对象

• Context.Provider：提供数据的组件

• Context.Consumer 或 useContext：消费数据的组件

2. 工作原理

二、示例

创建 Context 文件（独立模块）

// contexts/ThemeContext.js
import { createContext } from 'react';// 1. 创建Context并导出
const ThemeContext = createContext('light'); // 默认值// 2. 导出Provider组件
export const ThemeProvider = ThemeContext.Provider;// 3. 直接导出Context对象
export default ThemeContext;

提供者文件

// App.js
import React, { useState } from "react";
import { ThemeProvider } from "./contexts/ThemeContext";
import ThemedButton from "./ThemeButton";function App() {const [theme, setTheme] = useState("dark");return (<ThemeProvider value={theme}><ThemedButton /><button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>切换主题</button></ThemeProvider>);
}export default App;

消费者文件

// ThemedButton.js
import React, { useContext } from "react";
import ThemeContext from "./contexts/ThemeContext";function ThemedButton() {// 方式一：使用从Context文件导入的同一个Context对象const theme = useContext(ThemeContext);return (<div><buttonstyle={{background: theme === "dark" ? "#333" : "#EEE",color: theme === "dark" ? "white" : "black",}}>当前主题: {theme}</button>{/* 方式二：适用于class组件 */}<ThemeContext.Consumer>{(theme) => {return (<buttonstyle={{background: theme === "dark" ? "#333" : "#EEE",color: theme === "dark" ? "white" : "black",}}>当前主题: {theme}</button>);}}</ThemeContext.Consumer></div>);
}export default ThemedButton;