Context：跨层传参的「广播」，不是全局 Redux替代品

知识背景

Props 一层层向下传（prop drilling）在深层组件树里很冗长。Context 让中间层不必显式传递，由 Provider 注入值、下层 useContext 读取。
典型用途：主题、当前语言、轻量用户态、路由/表单库内部。Context 的值变化时，消费该 Context 的组件都会重渲染（除非拆分 Context 或配合 memo + 稳定 value技巧）。

---

知识详解与通俗解释

1. 最小示例

const ThemeCtx = createContext('light');

function App() {
  return (
    <ThemeCtx.Provider value="dark">
      <Toolbar />
    </ThemeCtx.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeCtx);
  return <span>{theme}</span>;
}

2. 性能注意：value 每次是新对象会拖垮子树

// 不好：每次 App 渲染都是新对象，所有消费者都更新
<Ctx.Provider value={{ user, token }}>

// 较好：useMemo 合并 value，或拆成多个 Context
const auth = useMemo(() => ({ user, token }), [user, token]);
<AuthCtx.Provider value={auth}>

通俗说：Context 像公司广播：广播稿天天换全文，全楼人都得抬头听；拆频道（多个 Context）或稳定广播稿（memo 对象）能减少骚动。

3. 何时不该只用 Context

高频更新、复杂异步数据流、时间旅行调试——更适合 Redux / Zustand / React Query 等；Context 更适合中低频、范围明确的共享。

4. 默认值与多层 Provider

createContext(default) 仅在没有匹配 Provider时生效；外层 Provider 可覆盖内层，类似 CSS 就近原则。

---

总结

• Context 解决 跨层传递，不是替代所有全局状态。
• value 引用稳定性决定重渲染范围，是性能关键。
• 大应用常见模式：服务器状态用请求库，客户端全局用专用 store，主题/语言用 Context。