[!info] related notes

• 所属 MOC: React MOC
• 上位主题: react-hooks, react
• 易混淆概念: React 中的 props、state 和 ref
• 延伸阅读: React中的Context与状态管理边界

React useContext

useContext 用于读取并订阅某个 Context 提供的值。它主要解决的是跨层级传值问题，而不是替代所有状态管理方案。

一句话定义

当一份数据需要被很多层后代消费，而中间组件并不真正关心它时，useContext 可以减少层层传 props 的负担。

典型场景

• 主题
• 当前登录用户
• 语言环境
• 全局配置

它解决的核心问题

避免 props drilling，也就是父组件把值一层层往下传，中间组件只是转手并不真正使用。

最小例子

const ThemeContext = createContext<'light' | 'dark'>('light')

function Page() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  )
}

function Toolbar() {
  const theme = useContext(ThemeContext)
  return <div>当前主题: {theme}</div>
}

这里 Toolbar 可以直接读取祖先 Provider 提供的值，而不用层层透传。

它不解决什么

• 不自动让复杂状态更新变简单
• 不自动提供完善的调试和时间旅行能力
• 不等于完整状态管理架构

什么时候适合用

• 数据范围明确
• 读取频率高，但业务流程不算复杂
• 更关心“共享传递”而不是“复杂状态演化”

为什么它不能无限膨胀

Context 更像“跨层传值通道”，不是“把所有状态塞进去就完事”的方案。

如果 Provider 的值频繁变化，所有消费它的组件都可能跟着受影响。

所以更稳的做法通常是：

• Provider 的值尽量清晰、稳定
• 不要把完全无关的状态堆进同一个 Context
• 复杂全局状态要单独考虑边界和更新策略

常见误区

• 把所有全局状态都塞进一个巨大 Context
• 以为用了 Context 就不需要考虑状态拆分和性能边界

最短记忆方式

Context 更像“跨层传值通道”，不是全局状态垃圾桶。

Related notes

• React MOC
• React中的钩子
• React状态管理方案选型