React Context — 跨组件共享数据

用 Context 替代 props 逐层传递，全局主题/语言/用户 · 难度：高级 · +20XP

Context — 解决 props drilling

当数据需要传很多层时（祖→父→子→孙），中间组件被迫接收并转发。Context 让祖先提供数据，任意后代直接消费。

三步使用 Context

// 1. 创建
const ThemeCtx = React.createContext("light");
// 2. 祖先提供
<ThemeCtx.Provider value="dark">
  <App />
</ThemeCtx.Provider>
// 3. 任意后代消费
const theme = useContext(ThemeCtx);

完整示例：主题切换

function App() {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeCtx.Provider value={{ theme, setTheme }}>
      <Header />
      <Content />
    </ThemeCtx.Provider>
  );
}
function Header() {
  const { theme, setTheme } = useContext(ThemeCtx);
  return <div className={theme}>...</div>;
}