Context API 是什么？它解决了 React 中的哪些问题？

Context API 是 React 框架中的一个功能，允许在组件树中高效共享数据而不需手动逐级传递 props。它适用于主题切换、用户偏好设置等全局状态共享场景。

作用

解决核心问题：

• Props Drilling（属性钻孔）问题：在 React 组件树中，如果多个深层层嵌套的组件需要相同数据（如用户登录信息或主题配置），传统方式需要通过 props 逐级传递，导致代码冗长和维护困难。Context API 避免了这种低效问题，简化数据流架构。
• 不必要的重复渲染优化：在大型应用中，props 传递可能导致无关组件更新，浪费渲染资源；Context 的精确定播机制 (Provider/Consumer) 只更新依赖数据的组件，提升了性能。

实现原理

Context API 通过三部分工作：

1. 创建 Context: 建立共享数据通道。
2. 设置 Provider: 在顶层用包裹式组件广播数据。
3. 使用 Consumer 获取: 子在件中直接订阅使用共享数据。 简化步骤如下：

// Step 1: 创建上下文 (创建数据通道)
const ThemeContext = React.createContext('light'); // 设置默认值

// Step 2: 提供器发送数据 (在父组件使用 Provider)
function App() {
  return (
    <ThemeContext.Provider value="dark">
      // 需共享状态区域，如嵌套的子组件
      <ChildComponent />
    </ThemeContext.Provider>
  );
}

// Step 3: 消费者获取数据 (在消费组件中使用 hook)
function ChildComponent() {
  const theme = useContext(ThemeContext); // 直接获取数据
  return <div>主题是：{theme}</div>;
}

优势与适用

• 适合简单应用场景：轻量状态共享工具 (如主题切换、语言包) 在中等规模项目中表现最佳。
• 相比复杂方案更轻: 无需外部状态库如 Redux，减少包尺寸和维护成本。 但需注意性能：深层 Context 更新可能引起树更新过多。常用场景见主题共享等.