切换主题
Context Hook
字数
658 字
阅读时间
3 分钟
上下文 Hook 允许从祖先组件接收信息，而无需将其作为 props 传递。
useContext
基础用法
tsx
// 1. 创建 Context
const ThemeContext = createContext('light')
// 2. 提供 Context
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
)
}
// 3. 消费 Context
function ThemedButton() {
const theme = useContext(ThemeContext)
return <button className={theme}>按钮</button>
}实际应用示例
tsx
// 用户信息 Context
const UserContext = createContext({
user: null,
login: () => {},
logout: () => {}
})
// Provider 组件
function UserProvider({ children }) {
const [user, setUser] = useState(null)
const login = (userData) => {
setUser(userData)
}
const logout = () => {
setUser(null)
}
return (
<UserContext.Provider value={{ user, login, logout }}>
{children}
</UserContext.Provider>
)
}
// 在需要用户信息的组件中使用
function UserProfile() {
const { user, logout } = useContext(UserContext)
if (!user) return <div>请登录</div>
return (
<div>
<h2>{user.name}</h2>
<button onClick={logout}>退出登录</button>
</div>
)
}
// 应用入口
function App() {
return (
<UserProvider>
<UserProfile />
</UserProvider>
)
}使用场景
- 全局主题配置
- 用户认证信息
- 语言偏好设置
- 全局状态管理
- 共享数据或函数
注意事项
Context 适用于需要在组件树中广泛共享的数据。过度使用 Context 可能导致组件复用性降低。因此，对于局部状态，推荐使用 props 传递或状态提升。
Context vs 状态管理库（valtio、zustand等）的区别
Context
- 是 React 原生的依赖注入机制
- 主要用于传递数据，不包含状态管理功能
- 每次 Context 值变化，所有消费该 Context 的组件都会重新渲染
- 适用于：
- 静态数据或低频更新的数据
- 主题、语言等全局配置
- 较小规模的应用
Valtio
- 基于 Proxy 的响应式状态管理
- 可以像普通对象一样直接修改状态
- 精确更新，只有使用到的属性变化才会触发重渲染
- 适用于：
- 需要频繁更新的复杂状态
- 对性能要求较高的场景
ts// Valtio 示例 const state = proxy({ count: 0 }) state.count++ // 直接修改
Zustand
- 极简的状态管理库
- 基于 hook 的 API 设计
- 支持状态分片，可以只订阅部分状态
- 适用于：
- 中大型应用的状态管理
- 需要良好性能和可维护性的场景
ts// Zustand 示例 const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })) }))
选择建议：
- 简单的全局配置 → Context
- 复杂的状态管理 → Zustand/Valtio
- 需要响应式特性 → Valtio
- 需要更好的性能和扩展性 → Zustand
Ryan.G