告别手动“搬运“props！React useContext + 自定义Hooks实战指南

组件嵌套深如海，props传递累成狗。useContext一招解千愁，自定义Hooks让代码更优雅。

写在前面

如果你写过React项目，一定经历过这样的场景：明明只是想让深层子组件拿到一个简单的用户信息，却要在中间四五层组件里一遍遍传递props，代码里充斥大量"工具人"组件。这就是典型的props drilling问题——数据传递像接力赛，中间层组件只负责搬运，自己却根本用不上这些数据。

别说你没吐槽过："这数据非得从爷爷传到孙子，中间还隔着七八层，改一个字段要改五六个文件......"

今天我们就用useContext来解决这个痛点，再搭配自定义Hooks让代码优雅度直接拉满。

一、组件通信之痛：props drilling有多烦人？

React的数据流是单向的，父组件通过props把数据传给子组件。这种设计清晰可控，但一旦组件嵌套层次加深，问题就来了：

// 爷爷组件 function GrandPa() { const theme = 'dark'; return <Father theme={theme} />; } // 爸爸组件：我只是个搬运工啊！ function Father({ theme }) { return <Son theme={theme} />; } // 儿子组件：其实我才是真正用数据的人 function Son({ theme }) { return <div className={theme}>终于拿到主题了...</div>; }

爷爷传给爸爸，爸爸再传给儿子。如果中间还有更多层级，这种"手动搬运"简直让人抓狂。更糟糕的是，当你重构代码时，改一个props名可能要牵连十几个文件。

说白了就是：组件层次深了，层层传递就成了纯粹的体力活。

二、useContext：跨越层级的"数据快递"

useContext的出现就是为了解决这个问题。它像一条"数据专线"，直接连接数据提供者和消费者，中间组件完全不用管。

三步走，搞定useContext

第一步：创建上下文

// ThemeContext.jsx import { createContext } from 'react'; // 参数是默认值，当组件没有被Provider包裹时使用 export const ThemeContext = createContext('light');

第二步：Provider提供数据

用Context.Provider包裹组件树，通过value属性注入数据：

// App.jsx import { ThemeContext } from './ThemeContext'; import Page from './components/Page'; function App() { const theme = 'dark'; return ( // 所有子组件都能访问到 theme，不管嵌套多深 <ThemeContext.Provider value={theme}> <Page /> </ThemeContext.Provider> ); }

第三步：useContext消费数据

在任意层级的子组件中，用useContext获取数据：

// components/Page.jsx import { useContext } from 'react'; import { ThemeContext } from '../ThemeContext'; function Page() { const theme = useContext(ThemeContext); return <div>当前主题：{theme}</div>; } // components/Child.jsx —— 更深层的组件照样直接拿 import { useContext } from 'react'; import { ThemeContext } from '../ThemeContext'; function Child() { const theme = useContext(ThemeContext); return <button className={theme}>按钮</button>; }

看到了吗？Page和Child直接跨过中间组件拿到了theme，中间层不需要任何props传递。

useContext像WiFi——数据信号覆盖整个子树，需要的人连上就能用，不需要的人毫无感知。

三、自定义Hooks：给useContext再套一层"皮肤"

直接用useContext已经很爽了，但还不够优雅。每次都要import { useContext }+import { ThemeContext }，重复代码有点多。

这时候自定义Hooks就派上用场了。

// hooks/useTheme.js import { useContext } from 'react'; import { ThemeContext } from '../ThemeContext'; export function useTheme() { return useContext(ThemeContext); }

就这么几行代码，封装后使用起来简洁多了：

// Before：啰嗦版 import { useContext } from 'react'; import { ThemeContext } from '../ThemeContext'; const theme = useContext(ThemeContext); // After：清爽版 import { useTheme } from '../hooks/useTheme'; const theme = useTheme();

命名规范：自定义Hook必须以use开头，这是React的约定，也是ESLint插件识别Hook的依据。

自定义Hooks到底好在哪？

有人说"这不就是个普通函数封装吗？"——还真不只是。

普通函数只能封装逻辑，而自定义Hook可以封装React的响应式能力（useState、useEffect等）。换句话说，自定义Hook能把"带有状态和副作用的逻辑"整体抽离出来复用。

光说不练假把式，来看一个更实战的例子。

四、实战：封装一个useMouse Hook

需求很简单：实时监听鼠标位置，在页面上显示坐标。

初版代码：逻辑全写在组件里

// App.jsx import { useState, useEffect } from 'react'; function App() { const [x, setX] = useState(null); const [y, setY] = useState(null); useEffect(() => { function handleMouseMove(e) { setX(e.clientX); setY(e.clientY); } document.addEventListener('mousemove', handleMouseMove); // 🔴 千万记得清理！组件卸载时要移除事件监听 return () => { document.removeEventListener('mousemove', handleMouseMove); }; }, []); return ( <div> {x !== null && y !== null ? `x: ${x}, y: ${y}` : '鼠标未移动'} </div> ); }

功能是实现了，但有两个问题：

1. 这段逻辑跟UI耦合在一起，换个组件想用就得重写一遍
2. useEffect的清理工作很容易被遗忘（定时器、事件监听、Web Worker等都需要手动回收）

抽离成自定义Hook

把鼠标追踪逻辑封装到useMouse：

// hooks/useMouse.js import { useState, useEffect } from 'react'; export function useMouse() { const [x, setX] = useState(null); const [y, setY] = useState(null); useEffect(() => { function handleMouseMove(e) { setX(e.clientX); setY(e.clientY); } document.addEventListener('mousemove', handleMouseMove); // 清理函数：组件卸载时移除事件监听 return () => { document.removeEventListener('mousemove', handleMouseMove); }; }, []); // 空依赖数组，只在挂载时执行一次 return { x, y }; }

然后在组件里用一行代码搞定：

// App.jsx import { useMouse } from './hooks/useMouse'; function App() { const { x, y } = useMouse(); return ( <div style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> {x !== null && y !== null ? `x: ${x}, y: ${y}` : '鼠标未移动'} </div> ); }

封装带来的价值：

• 任何组件想用鼠标位置，一行const { x, y } = useMouse()搞定
• 清理逻辑封装在Hook内部，使用者不用担心内存泄漏
• 未来要加节流、加日志，只需改Hook，所有使用它的组件自动受益

五、综合实战：useContext + 自定义Hooks = 真香

把两者结合起来，就是最佳实践：

📁 hooks/ ├── useTheme.js # 封装ThemeContext消费逻辑 └── useMouse.js # 封装鼠标追踪逻辑 📁 components/ ├── Page.jsx # 用useTheme获取主题 └── Child.jsx # 用useTheme获取主题 📁 ThemeContext.jsx # 创建Context 📁 App.jsx # Provider提供数据 + useMouse演示

代码结构清晰，职责分离，每个文件只做一件事。使用时的体验：

function Child() { const theme = useTheme(); // 一行拿主题，深层次组件也不怕 const { x, y } = useMouse(); // 一行拿鼠标坐标 // 专注业务逻辑，跟数据获取方式解耦 }

六、总结：一张图看懂useContext

┌─────────────────────────────────────┐ │ App (Provider) │ │ ┌─────────────────────────┐ │ │ │ value={{ theme, user }}│ │ │ └───────────┬─────────────┘ │ │ │ │ │ ┌─────────▼─────────┐ │ │ │ Page (中间层) │ ← 完全不 │ │ │ 不碰theme数据 │ 用传递 │ │ └─────────┬─────────┘ props │ │ │ │ │ ┌─────────▼─────────┐ │ │ │ Child (消费者) │ ← 直接 │ │ │ useTheme()拿数据 │ useContext │ │ └───────────────────┘ │ └─────────────────────────────────────┘

核心要点

什么时候该用useContext？

• ✅ 主题切换、用户信息、多语言等全局共享数据
• ✅ 组件嵌套3层以上，props传递明显变繁琐
• ⚠️ 频繁变化的数据要慎用，因为Provider value变化会导致所有消费组件重渲染

最后一句

useContext解决的是"数据怎么传"的问题，自定义Hooks解决的是"逻辑怎么复用"的问题。两者配合，你的React代码才会真正优雅起来。

如果这篇文章对你有帮助，欢迎点赞收藏，也欢迎在评论区分享你在项目中遇到的"props传递噩梦"😂