React Context 是用于 跨组件共享状态 的核心机制，特别适合全局状态管理场景。通过 Context，可以避免 props 层层传递的繁琐，提升代码可维护性。

基本用法 ✅

  1. 创建 Context
    使用 React.createContext() 定义上下文对象，例如：

    const ThemeContext = React.createContext();

  2. Provider 包裹子组件
    在顶层组件中通过 Provider 传递值，例如：

    <ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

  3. Consumer 获取值
    在子组件中通过 Consumer 订阅上下文，例如：

    <ThemeContext.Consumer>
  {(theme) => <p>当前主题：{theme}</p>}
</ThemeContext.Consumer>

实战案例 🛠️

以「主题切换」为例，通过 Context 实现全局样式切换：

  • 定义上下文：ThemeContext
  • 创建 Provider 组件：ThemeProvider
  • 在子组件中使用 Consumer 动态渲染 UI
  • 结合 CSS 变量实现样式隔离
React_Context

注意事项 ⚠️

  • 避免滥用 Context，过度使用可能导致组件间耦合度升高
  • 对于复杂状态管理，建议结合 Redux 使用
  • Context 与 Hooks 结合时需注意性能优化

扩展学习 📚

想深入了解 Context API 的高级特性？
👉 点击这里查看 Context API 深度解析

Provider_Consumer