当组件层级较深时，通过逐层传递 Props（Props Drilling）会让代码变得繁琐且难以维护。Context API 提供了一种“广播”机制，让数据可以直接跨越中间组件，被深层子组件消费，是 React 跨层级通信的核心方案。
Context API 完整用法
1. 创建 Context
使用 createContext 创建一个 Context 对象，可以传入默认值（当组件没有匹配到 Provider 时使用）。
import { createContext } from 'react';
// 创建 Context，默认值为 'light'
const ThemeContext = createContext('light');
export { ThemeContext };2. 提供数据：Provider
在需要共享数据的组件树最上层，使用 Provider 包裹子组件，通过 value 属性传递数据。value 可以是一个静态值，也可以是从 useState 或 useMemo 派生出的动态值。
import { useState } from 'react';
import { ThemeContext } from './ThemeContext';
import Toolbar from './Toolbar';
function App() {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={theme}>
<Toolbar onThemeChange={setTheme} />
</ThemeContext.Provider>
);
}3. 消费数据：useContext
在任意后代组件中，通过 useContext Hook 读取 Context 的当前值。
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';
function ThemedButton() {
const theme = useContext(ThemeContext);
return (
<button style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
{theme === 'dark' ? '暗色模式' : '亮色模式'}
</button>
);
}这样，ThemedButton 无需通过父组件传递 Props，就可以直接获取到当前主题。
实战示例：用户认证状态
在实际项目中，Context 非常适合管理登录状态、用户信息等全局数据。
const AuthContext = createContext(null);
function AuthProvider({ children }) {
const [user, setUser] = useState(null);
const login = async (email, password) => {
const res = await api.login(email, password);
setUser(res.user);
};
const logout = () => setUser(null);
const value = useMemo(() => ({ user, login, logout }), [user]);
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
function useAuth() {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth 必须在 AuthProvider 内使用');
}
return context;
}通过自定义 Hook useAuth，组件可以很自然地获取认证状态和方法：
function Dashboard() {
const { user, logout } = useAuth();
return (
<div>
<p>欢迎，{user.name}</p>
<button onClick={logout}>退出</button>
</div>
);
}适用场景
- 全局偏好：主题、语言、区域设置等。
- 用户信息：当前登录用户、权限列表。
- 服务容器：在依赖注入模式中，提供全局的 API 客户端、路由对象等。
- 跨组件共享的状态：避免深度 Props Drilling。
注意： Context 并不是所有共享状态的银弹。它更适合变化频率较低的值（如主题、用户信息）。对于高频变化的复杂状态（如购物车商品列表、实时数据流），更推荐使用状态管理库（如 Zustand、Redux Toolkit），它们提供了更精细的更新控制和性能优化。
性能问题与优化
Context 最常被诟病的就是其性能陷阱。当 Provider 的 value 发生变化时，所有使用了该 Context 的组件都会重新渲染，即使它们只依赖 value 中的一部分数据。
问题复现：
const AppContext = createContext();
function AppProvider({ children }) {
const [user, setUser] = useState({ name: 'Alice' });
const [theme, setTheme] = useState('light');
// value 是一个新对象，每次 AppProvider 重渲染都会重新创建
return (
<AppContext.Provider value={{ user, theme, setUser, setTheme }}>
{children}
</AppContext.Provider>
);
}即使某个组件只消费 theme，当 user 变化引起 AppProvider 重渲染时，{ user, theme } 成为一个新的引用，AppContext.Provider 会通知所有消费者重新渲染，导致只读 theme 的组件也跟随 user 更新而重新渲染。
优化方案1：拆分 Context
将不同关注点的状态分散到多个独立的 Context 中，每个 Context 只负责一个值（或一组强关联的值）。
const UserContext = createContext();
const ThemeContext = createContext();
function AppProvider({ children }) {
const [user, setUser] = useState({ name: 'Alice' });
const [theme, setTheme] = useState('light');
return (
<UserContext.Provider value={{ user, setUser }}>
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
</UserContext.Provider>
);
}这样，当 user 变化时，只有消费 UserContext 的组件重新渲染，消费 ThemeContext 的组件不受影响。
优化方案2：使用 useMemo 稳定 value 引用
如果必须使用单一的 Context，可以用 useMemo 将 value 对象缓存起来，只在依赖变化时才创建新对象。
const value = useMemo(() => ({ user, theme, setUser, setTheme }), [user, theme]);但注意，如果 user 或 theme 任何一个变化，value 依然会变。这只是避免因为父组件其他无关状态变化导致的不必要渲染。拆分为多个 Context 通常是最彻底的优化方式。
优化方案3：组件粒度控制
将 Context 消费者拆分为更小的组件，保持每个组件消费的数据颗粒度尽可能小。或者在消费者内部使用 useMemo / React.memo 来避免不必要的重渲染。但注意这并不能阻止 Context 变化后组件树的全部 render，优化主要依靠 Context 拆分。
React 18 中的并发特性对 Context 的影响
在 React 18 的并发渲染中，startTransition 可以标记状态更新为“非紧急”，但 Context 更新带来的渲染问题仍然存在。目前 Context 不是为高频更新设计的，如果你的状态经常变化（如每秒多次），应该迁移到独立的状态管理库。
总结
- Context API 解决了跨层级传递数据的问题，不破坏组件组合的灵活性。
- 适用全局主题、用户认证等低频变化的共享数据。
- 性能问题核心在于 Provider value 变化会触发所有消费者重新渲染，需要通过拆分 Context 和稳定 value 引用优化。
- 将 Context 的使用限制在真正需要全局共享且变化不频繁的场景，对于高频复杂状态，优先使用专业状态库。