useContext 加自定义 Hook 为啥这么优雅？它如何解决全局状态难题？

在React开发中，当我们需要在嵌套层级较深的组件间共享状态时，开发者常常面临“prop drilling”的困境。这种通过props逐层传递数据的方式，不仅让代码变得冗长难维护，更会导致组件间产生不必要的耦合。随着项目规模扩大，这种状态传递方式很快就会成为阻碍开发效率的瓶颈。

useContext是React提供的官方解决方案，它允许组件直接访问上下文环境中的值，无需通过中间组件传递props。这种特性特别适合主题配置、用户认证信息等需要全局共享的数据。


// 创建上下文
const ThemeContext = createContext('light');

// 顶层组件提供值
<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

// 任意子组件获取值
const theme = useContext(ThemeContext);

当context值变化时，只有消费该context的组件会重新渲染。这种精确更新的特性避免了传统状态管理方案中常见的全局渲染问题。

自定义Hook允许我们将组件逻辑提取为可复用的函数，这种能力与useContext结合使用时，可以创建出即插即用的状态模块。

通过将context的创建、更新逻辑封装到自定义Hook中，开发者可以获得更清晰的代码结构：


function useTheme() {
  const context = useContext(ThemeContext);
  const [theme, setTheme] = useState(context);
  
  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return [theme, toggleTheme];
}

上下文层：负责状态存储和分发
逻辑层：自定义Hook处理业务逻辑
视图层：组件专注UI渲染

场景	实现方案
主题切换	颜色方案+样式控制
多语言支持	翻译词典管理
用户会话	登录状态全局共享

只将真正需要全局共享的状态放入context，局部状态仍推荐使用useState管理。

使用memoization缓存计算结果
分离高频更新和低频更新的context
对复杂对象使用useMemo包裹

结合TypeScript使用时，可以通过泛型参数确保类型安全：


interface AuthContextType {
  user: User | null;
  login: (credentials: LoginData) => Promise<void>;
}

const AuthContext = createContext<AuthContextType>(null!);

当应用复杂度达到一定程度时，可以考虑以下方案作为补充：