React Context 跨层传值前置React useRef 与 DOM目标会建 Provider useContext知道什么时候不该用 Context。引言props 适合父子父把值传给直接孩子。跨很多层时顶栏主题开关 → 深层 Panel层层 props 叫prop drilling又吵又脆。Context做「依赖注入」上面 Provider 放一份值任意深层用useContext取中间组件不用接力。本篇 demo主题 light/darkToolbar切换Panel直接读主题变色。动手完整代码react2/11-context/democdreact2/11-context/demonpminstallnpmrun dev点「切换」看工具栏文案和面板底色一起变。1. 三步create → Provider → useContexttype Theme light | dark const ThemeCtx createContext{ theme: Theme; toggle: () void } | null(null) function ThemeProvider({ children }: { children: ReactNode }) { const [theme, setTheme] useStateTheme(light) const toggle () setTheme((t) (t light ? dark : light)) return ( ThemeCtx.Provider value{{ theme, toggle }} {children} /ThemeCtx.Provider ) } function useTheme() { const ctx useContext(ThemeCtx) if (!ctx) throw new Error(useTheme 必须在 ThemeProvider 内) return ctx }步骤干什么createContext建上下文默认值常用null配合自定义 hook 做「必须在 Provider 内」检查Provider value{...}把当前值注入子树useContext/useTheme消费封装 hook 可读性更好2. 深层组件直接消费function Toolbar() { const { theme, toggle } useTheme() return ( div classNamerow span当前主题{theme}/span button typebutton onClick{toggle}切换/button /div ) } function Panel() { const { theme } useTheme() return ( section style{{ background: theme dark ? #0f172a : #fff }} p深层组件也能读到 Context不必层层 props。/p /section ) } export default function App() { return ( ThemeProvider Toolbar / Panel / /ThemeProvider ) }App只包一层 Provider中间没有「theme 透传」。3. 适合 / 不适合适合不适合主题、locale、当前用户每个按键都变的表单字段依赖注入式配置只传一两层就能搞定的数据低频、横切关注点高频大树更新易牵动整棵消费者高频客户端状态 → 拆多个 Context或上 Zustand15 篇。服务端列表 / 详情 → TanStack Query07 篇别硬塞 Context。4. 常见坑做法问题Provider 外用useTheme拿到null/ 抛错检查挂载位置value{{ theme, toggle }}每次新建对象所有消费者可能跟着重渲染可useMemo稳住 value或拆成「状态 Context 派发 Context」什么都塞一个大 Context一处改、全家刷按域拆分用 Context 代替近距离 props过度设计可读性变差demo 在练什么createContext Provider 自定义useTheme跨组件读写主题无 props 钻取建立「低频横切用 Context」的选型直觉自己改一改再加一个LocaleContext或把value用useMemo包起来观察渲染。下一篇React useReducer 复杂状态