最近在做组件重构时，发现很多同学对 useContext 又爱又怕：想用它解决多层传值的麻烦，又怕踩坑导致性能问题。今天我就结合自己写的实战代码，带你彻底搞懂 useContext 的用法、避坑指南，以及它在项目中的最佳实践。
🔍 为什么要用 useContext？
在 React 中，如果父组件要给深层子组件传值，传统方式只能一层一层通过 props 传递，这就是 “Props 钻取”，代码会变得冗余且难以维护。
举个例子：
这种多层传递不仅代码冗余，而且只要中间组件不需要这个 theme，就会显得非常多余。
而 useContext 就是为了解决这个问题而生的 —— 它可以让你在组件树中直接共享数据，无需手动通过 props 逐层传递。
🛠️ 实战：用 useContext 实现主题切换
我写了一个极简的主题切换示例，包含完整的 useContext 用法，你可以直接复制运行：
运行效果
- 初始显示 “当前主题：light”，
ThemeBox是蓝色背景； - 点击 “切换主题”，立刻显示 “当前主题：dark”，
ThemeBox变成深色背景； - 子组件
ThemeText和ThemeBox没有通过props接收任何数据，却能拿到最新的主题状态。
⚠️ 避坑指南：useContext 常见误区
1. ❌ 滥用 Context
useContext 不是万能的，它只适合共享全局通用数据（比如用户信息、主题、语言设置）。如果是局部组件的普通数据，直接用 props 传值更清晰。
2. ❌ Context 数据变化触发全局重渲染
只要 Provider 的 value 发生变化，所有使用 useContext 读取该数据的组件都会重新渲染。如果 value 是对象 / 数组，即使内容不变但引用变化，也会触发重渲染。
优化方案：用 useMemo 缓存 value，避免不必要的重渲染：
3. ❌ 误解默认值的作用
createContext('light') 中的默认值，只有当组件没有被对应的 Provider 包裹时才会生效，不是 Provider 没传值时的兜底。
4. ❌ 多层 Provider 就近匹配
如果有多层同名 Provider，组件会读取最近的那一层的 value，而不是最外层的。这一点在复杂组件树中需要特别注意。
🎯 最佳实践总结
- 合理拆分 Context：不要把所有数据都放在一个 Context 里，按功能拆分（比如
ThemeContext、UserContext），避免不必要的重渲染。 - 配合 useReducer 管理复杂状态：如果 Context 中的状态需要复杂的逻辑处理，建议用
useReducer来管理，让状态变更更可预测。 - 性能优化：对于大型应用，可结合
React.memo和useMemo来减少不必要的重渲染。 - 避免在 Context 中传递函数：如果必须传递函数，用
useCallback缓存函数，避免每次渲染都创建新的函数引用。
