标准答案

  1. Context 主要解决跨层级传值,不是通用性能优化工具,也不是所有状态管理的替代品。
  2. Provider 的 value 引用变化后,依赖这个 Context 的消费者会重新渲染。
  3. 把用户信息、主题、权限、全局配置、表单草稿和列表状态都放进一个大 Context,会导致很多无关组件被牵连。
  4. 拆分方式包括按领域拆 Context、把频繁变化状态下沉、稳定 value 引用、把读写能力分离。
  5. 复杂服务端数据、缓存、分页和重试状态更适合交给 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 同时承载多个变化频率完全不同的业务领域。

作者信息