标准答案
- Context 主要解决跨层级传值,不是通用性能优化工具,也不是所有状态管理的替代品。
- Provider 的 value 引用变化后,依赖这个 Context 的消费者会重新渲染。
- 把用户信息、主题、权限、全局配置、表单草稿和列表状态都放进一个大 Context,会导致很多无关组件被牵连。
- 拆分方式包括按领域拆 Context、把频繁变化状态下沉、稳定 value 引用、把读写能力分离。
- 复杂服务端数据、缓存、分页和重试状态更适合交给 React Query 这类数据层工具,而不是 Context。
题目解析
这道题的重点是更新范围。Context 越大、value 越频繁变化,越容易让页面里大量消费者一起更新。
Context 更适合低频、全局、语义稳定的数据,例如主题、语言、登录用户摘要和权限标记。
如果 Context 中的数据有复杂请求生命周期、缓存失效和并发刷新需求,通常应该拆到专门的数据请求层。
代码示例
下面把主题和当前用户拆成两个 Context,避免用户变化影响只关心主题的组件。
TSX
const ThemeContext = createContext<Theme>('light')
const CurrentUserContext = createContext<User | null>(null)
function AppProviders({ children }: { children: ReactNode }) {
const theme = useTheme()
const currentUser = useCurrentUser()
return (
<ThemeContext.Provider value={theme}>
<CurrentUserContext.Provider value={currentUser}>
{children}
</CurrentUserContext.Provider>
</ThemeContext.Provider>
)
}常见误区
- 把 Context 当成全局 store,所有页面状态都往里面放。
- Provider 每次渲染都传入新对象,导致消费者无意义重渲染。
- 一个 Context 同时承载多个变化频率完全不同的业务领域。