Context 让你与整个 subtree 共享一个值,而无需通过每个级别传递 props(prop drilling)。你创建一个 context,用其 Provider 包装一个 subtree,任何后代都可以用 useContext 读取它。
jsx
= ();
() {
(
);
}
() {
theme = ();
;
}
低频率、"全局式" 的数据,许多组件需要:theme, current user, locale, feature flags。
当 Provider 的 value 改变时,每个 消费该 context 的组件都会重新渲染——没有办法只订阅它的一部分。两个实际后果:
// ❌ a NEW object every render → all consumers re-render every time
<Ctx.Provider value={{ user, setUser }}>
// ✅ memoize the value so it only changes when it really changes
const value = useMemo(() => ({ user, setUser }), [user]);
<Ctx.Provider value={value}>
对于频繁变化或大型状态,将 context 分成较小的片段,或使用支持选择性订阅的 store(Zustand/Redux)。Context 是一个依赖注入工具,不是完整的状态管理器。