风格活泼的网站设计北京网站seo优化推广
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;