什么是 useContext Hook？
useContext 是 React 中的一个 Hook，用于在函数组件中访问 React Context 的值。Context 是 React 提供的一种机制，让你可以在组件树中共享数据，而无需通过 props 一层层传递。
简单来说，useContext 帮你轻松获取全局数据（比如主题、用户信息、语言设置），特别适合处理需要在多个组件间共享的状态。
为什么需要 useContext？
在 React 中，数据通常通过 props 从父组件传递到子组件。但如果组件树很深，层层传递 props 会变得繁琐（称为 props drilling）。Context 提供了一种方式，让你直接在任何子组件中访问共享数据，而 useContext 是用来在函数组件中获取这些数据的。
适用场景：
- 主题切换（比如暗黑模式/亮色模式）
- 用户信息（比如登录状态、用户名）
- 语言或地区设置
- 全局配置或状态
useContext 的基本用法
要使用 useContext，需要以下步骤：
- 创建 Context：使用
React.createContext()创建一个 Context 对象。 - 提供数据：用
<Context.Provider>包裹组件树，提供共享数据。 - 消费数据：在函数组件中使用
useContext获取 Context 的值。
基本语法
import { useContext } from 'react';// 假设有一个 Context
const MyContext = React.createContext();function MyComponent() {const value = useContext(MyContext); // 获取 Context 的值return <div>{value}</div>;
}
完整示例：主题切换
下面通过一个主题切换的例子，带你一步步理解 useContext 的用法。
1. 创建 Context
import { createContext } from 'react';// 创建一个 ThemeContext，初始值可以是任何数据
const ThemeContext = createContext('light');
2. 提供 Context 数据
在父组件中，用 <ThemeContext.Provider> 提供数据给子组件。
import { useState } from 'react';function App() {const [theme, setTheme] = useState('light');return (<ThemeContext.Provider value={theme}><Toolbar /><button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>切换主题</button></ThemeContext.Provider>);
}
<ThemeContext.Provider>包裹了子组件，value属性指定了共享的数据（这里是theme）。- 子组件（比如
Toolbar）可以访问theme。
3. 在子组件中使用 useContext
在任意子组件中，用 useContext 获取 theme 的值。
import { useContext } from 'react';function Toolbar() {return (<div><ThemedButton /></div>);
}function ThemedButton() {const theme = useContext(ThemeContext); // 获取主题值return (<button style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>我是 {theme} 主题的按钮</button>);
}
运行效果：
- 点击
App中的按钮切换theme（从 'light' 到 'dark' 或反之）。 ThemedButton会根据theme值动态更新样式。- 不需要通过 props 层层传递，
ThemedButton直接从 Context 获取数据。
更复杂的例子：结合对象和函数
Context 不仅可以共享简单值，还可以共享对象、函数等复杂数据。比如，共享用户信息和一个更新用户的方法。
示例代码
import { createContext, useContext, useState } from 'react';// 创建 Context
const UserContext = createContext();function App() {const [user, setUser] = useState({ name: '小明', age: 18 });// 提供用户数据和更新函数const userContextValue = {user,updateUser: newUser => setUser(newUser),};return (<UserContext.Provider value={userContextValue}><UserProfile /></UserContext.Provider>);
}function UserProfile() {const { user, updateUser } = useContext(UserContext); // 获取 user 和 updateUserreturn (<div><p>姓名: {user.name}</p><p>年龄: {user.age}</p><button onClick={() => updateUser({ name: '小红', age: 20 })}>更新用户信息</button></div>);
}
运行效果：
UserProfile直接访问user和updateUser，无需 props。- 点击按钮会更新用户信息，组件自动重新渲染。
useContext 的注意事项
-
确保在 Provider 范围内使用
如果在useContext访问 Context 时，组件不在<Context.Provider>包裹范围内，会得到 Context 的默认值（在createContext时指定的值）。const MyContext = createContext('默认值'); function Component() {const value = useContext(MyContext); // 如果没有 Provider，返回 '默认值'return <div>{value}</div>; } -
不要频繁更改 Context 值
Context 的value变化会导致所有依赖该 Context 的组件重新渲染。如果value频繁变化（比如对象每次渲染都重新创建），可能影响性能。解决办法：使用
useMemo优化value：const value = useMemo(() => ({ user, updateUser }), [user]); return <UserContext.Provider value={value}>...</UserContext.Provider>; -
Context 不是状态管理的全部解决方案
对于复杂的状态管理，useContext通常需要搭配useReducer或外部库（如 Redux、Zustand）。useContext更适合简单共享数据。 -
不要滥用 Context
Context 适合全局数据，但不适合所有场景。如果只需要父子组件通信，优先使用 props，因为 Context 会让代码耦合更复杂。
useContext vs. 其他 Hooks
-
和
useState的区别：useState管理组件内部状态，useContext访问全局共享数据。 -
和
useEffect的关系：useContext获取数据，useEffect可用于根据 Context 值触发副作用（比如根据用户 ID 发起 API 请求）。const user = useContext(UserContext); useEffect(() => {fetch(`https://api.example.com/users/${user.id}`).then(res => res.json()).then(data => console.log(data)); }, [user.id]);
总结
useContext的作用：在函数组件中访问 Context 的值，解决 props 层层传递问题。- 使用步骤：
- 用
createContext创建 Context。 - 用
<Context.Provider>提供数据。 - 用
useContext(Context)在子组件获取数据。
- 用
- 常见场景：主题切换、用户信息、语言设置等。
- 注意事项：确保在 Provider 范围内使用，优化性能，避免滥用。