用途:帮助 React 开发者判断是否该使用 Context,并正确优化与组织 Context 代码。核心观点是 Context 常被过度使用,应先考虑更简单的替代方案。
何时使用:真正全局且稳定的数据(认证/用户、主题、i18n、权限);跨 3 层以上的 prop drilling;复合组件(局部、隔离的 Context,最推荐场景)。
何时不用:仅 1-2 层传参用普通 props;频繁变化的状态用 Zustand/Jotai;服务端数据(请求、缓存)用 React Query/TanStack Query;单分支数据用局部 useState;层级深但结构简单用组件组合。组件组合常被忽视,可让父组件不感知具体数据。
关键细节:只有直接调用 useContext 的组件才会在 context value 变化时重渲染,未消费 Context 的深层组件不受影响,不必对它们过度使用 memo()。
优化:两个正交问题需分别解决——消费者因 Provider 每次渲染而重渲染,用 useMemo 包裹 value;子组件因父组件重渲染而重渲染,用 memo() 包裹子组件。示例中 AuthProvider 用 useCallback 稳定 logout、useMemo 稳定 value,UserAvatar 用 memo 包裹。
复合组件:为紧耦合 UI 创建局部隔离 Context,避免消费者过多的问题。示例用 createContext、useTabs 自定义 Hook(无 Provider 时抛错)、Tabs 组件配合 useMemo,并挂载 Tabs.Tab 与 Tabs.Panel。Radix UI、Headless UI、React Aria 等库均采用此模式。
反模式:单一巨型 Context 会让任一字段变化重渲染所有消费者,应拆分为 ThemeProvider、AuthProvider、CartProvider 等独立嵌套。
限制:资料未提供安装命令、版本要求、性能基准或收费信息。