组件嵌套深如海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 ); }功能是实现了但有两个问题这段逻辑跟UI耦合在一起换个组件想用就得重写一遍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 │ │ └───────────────────┘ │ └─────────────────────────────────────┘核心要点知识点一句话总结props drilling层次深了层层传递props就是体力活改起来要命createContext创建一个数据管道定义数据的形状和默认值Provider在组件树顶层注入数据所有子树都能访问useContext在任意子组件中消费数据不再需要中间层传递自定义Hook以use开头封装响应式逻辑让代码更干净、更可复用副作用清理useEffect里绑定了事件/定时器别忘了return清理函数什么时候该用useContext✅ 主题切换、用户信息、多语言等全局共享数据✅ 组件嵌套3层以上props传递明显变繁琐⚠️ 频繁变化的数据要慎用因为Provider value变化会导致所有消费组件重渲染最后一句useContext解决的是数据怎么传的问题自定义Hooks解决的是逻辑怎么复用的问题。两者配合你的React代码才会真正优雅起来。如果这篇文章对你有帮助欢迎点赞收藏也欢迎在评论区分享你在项目中遇到的props传递噩梦