React Context API 入门指南

React 的 Context API 是一种无需 prop drilling的全局状态管理方案，常用于传递主题、用户权限等跨层级数据。以下是核心知识点：

📌 基本用法

1. 创建 Context

   const MyContext = React.createContext();
   

   

   React_Context_API

2. Provider 提供数据
   在顶层组件包裹 MyContext.Provider，通过 value 属性传递数据：

   <MyContext.Provider value={{ theme: 'dark' }}>
     <App />
   </MyContext.Provider>
   

3. Consumer 获取数据
   在子组件中通过 MyContext.Consumer 直接消费数据：

   <MyContext.Consumer>
     {(context) => <div>当前主题：{context.theme}</div>}
   </MyContext.Consumer>
   

🧠 使用场景

• 全局变量（如语言、主题）的传递
• 避免多层嵌套 prop 传递
• 替代 Redux 简单场景（不推荐复杂状态管理）

⚠️ 注意事项

• 不要过度使用：Context API 会引发组件间隐式依赖，影响可维护性
• 性能优化：使用 useMemo 或 useCallback 包裹 value 避免重复渲染
• 类型安全：配合 TypeScript 定义 Context 类型

📚 进阶学习

想深入了解如何结合 Redux 使用 Context API？
点击查看 React 与 Redux 联合使用教程

（图示：Context Provider 层级结构）