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;
