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>
      <button
        style={{
          background: theme === "dark" ? "#333" : "#EEE",
          color: theme === "dark" ? "white" : "black",
        }}
      >
        当前主题: {theme}
      </button>

      {/* 方式二：适用于class组件 */}
      <ThemeContext.Consumer>
        {(theme) => {
          return (
            <button
              style={{
                background: theme === "dark" ? "#333" : "#EEE",
                color: theme === "dark" ? "white" : "black",
              }}
            >
              当前主题: {theme}
            </button>
          );
        }}
      </ThemeContext.Consumer>
    </div>
  );
}

export default ThemedButton;