跨越组件层级的"任意门"：React Context 与自定义 Hooks 完全入门指南

你是否曾经为了一行数据，在几十个组件之间反复传递 props，感觉自己像个快递员？本文将带你认识 React 的两大"偷懒神器"------Context 和自定义 Hooks，让你从此告别"搬运工"式编码。

---

一、问题的起源：组件之间如何"打电话"？

想象你正在搭建一个乐高城堡。每一块积木就是一个 React 组件，它们组合在一起，构成整个应用页面。现在的问题是：如果最顶层的一块积木有一份"全局地图"（比如当前的主题是深色还是浅色），而最底层的一块积木需要知道这份地图才能决定自己的颜色，这中间隔着几十层积木------怎么办？

在 React 的世界里，这叫做组件通信。

1.1 父子通信：最直接的"喊话"

React 遵循单向数据流 的原则------数据只能从父组件流向子组件。父组件通过 props（你可以理解为"属性包裹"）把数据交给子组件。这就像爸爸给儿子递东西，只需要伸手就好。

// 父组件
function Parent() {
  const message = "你好，儿子";
  return <Child msg={message} />;  // 通过 props 传递
}

// 子组件
function Child({ msg }) {
  return <div>{msg}</div>;  // 直接使用
}

这种模式简单又直观，React 官方也大力推荐。但问题来了------

1.2 爷孙通信：一场"接力赛"

当你需要把数据从爷爷传给孙子时，事情开始变得微妙：

function GrandParent() {
  const theme = "dark";
  return <Parent theme={theme} />;  // 先给爸爸
}

function Parent({ theme }) {
  return <Child theme={theme} />;   // 再给儿子
}

function Child({ theme }) {
  return <GrandChild theme={theme} />; // 再给孙子------但这还没完！
}

你会发现，中间那些组件（比如 Parent）可能自己根本不需要 theme 这个数据，但为了把它传给下面的后代，它们不得不充当"搬运工"。在开发实践中，当一个应用的组件树深达五层、十层甚至更多时，这种模式会让代码变得极其冗余，维护起来苦不堪言。React 社区给这个问题起了个形象的名字------Props Drilling（属性钻探），就像一口深井，你得一层一层地把数据"钻"下去。

1.3 兄弟通信和陌生人通信：更复杂的场景

如果你想让两个毫无亲缘关系的组件共享数据（比如页面顶部的导航栏和侧边栏的购物车图标同时显示用户头像），靠 props 就完全行不通了。在传统方案里，你可能需要引入 Redux、MobX 这样的全局状态管理库------它们功能强大，但对于中小型项目来说，颇有"杀鸡用牛刀"的感觉。

React 团队很早就意识到了这个痛点。于是，在 React 16.3 版本中，Context API 正式登场，成为官方钦定的"跨层级通信"解决方案。

---

二、Context：组件树的"广播电台"

2.1 一个生动的比喻

请你想象这样一个场景：一栋五层教学楼里，校长要广播一条通知------"今天下午全校大扫除"。在没有广播系统之前，校长只能把话传给一楼年级组长，年级组长再传给班主任，班主任再告诉学生。而有了广播电台（Context）之后，校长只需要对着话筒说一句话，全校任何一个角落的喇叭都能同时收到。

在 React 中：

• 校长 = Provider（提供者）------它"广播"数据
• 喇叭 = useContext（消费者）------它"收听"数据
• 广播频率 = createContext（创建上下文）------定义广播的"频道"

2.2 三步搭建你的"广播系统"

在这个演示项目中，我们以"主题切换"为经典案例，完整展示了 Context 的使用流程。让我们一步步拆解：

第一步：创建频道 ------ createContext

// ThemeContext.jsx
import { createContext } from 'react';

export const ThemeContext = createContext("light");

这一行代码做了什么事？它创建了一个名为 ThemeContext 的上下文对象，并设置了默认值 "light"（浅色主题）。你可以把这个默认值理解为"万一校长今天没广播，喇叭里播什么"------当组件树中没有 Provider 提供数据时，消费组件就会拿到这个兜底值。

小白提醒 ：createContext("light") 里的 "light" 是一个字符串，你也可以传数字、对象、数组，甚至一个函数------Context 不挑数据类型。

第二步：架设发射塔 ------ Provider

// App2.jsx
import { useState } from 'react';
import { ThemeContext } from './ThemeContext';
import Page from './components/Page';

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <Page />
      <button onClick={() => setTheme("dark")}>切换主题</button>
    </ThemeContext.Provider>
  );
}

这里有两个关键细节值得注意：

1. Provider 是一个组件 ：它像一个透明的"罩子"，包裹住所有需要接收数据的子孙组件。在本例中，<Page /> 以及 Page 内部的所有子组件（Child、GrandChild......）都在这个"广播范围"内。

2. value 是动态的 ：我们把 React 的 useState 状态 theme 传给了 value。这意味着------只要 theme 一变化（比如用户点击了"切换主题"按钮），所有订阅了这个 Context 的组件都会自动重新渲染，拿到最新的值。这就是 React 响应式的魅力：数据变了，界面自动跟着变，你不用写一行手动更新的代码。

值得一提的是，Provider 不一定非要放在整个应用的最外层。你可以把不同的 Provider 嵌套在不同的区域------比如"主题 Provider"只包裹设置页面，"用户信息 Provider"只包裹个人中心------非常灵活。

第三步：打开收音机 ------ useContext

// components/Child.jsx
import { useTheme } from '../hooks/useTheme';

function Child() {
  const theme = useTheme();
  return (
    <>
      Child
      <button className="theme">按钮{theme}</button>
    </>
  );
}

这里的 useTheme 是我们封装的自定义 Hook（后面会详细讲），它的本质就是：

// hooks/useTheme.js
import { useContext } from 'react';
import { ThemeContext } from '../ThemeContext';

export function useTheme() {
  return useContext(ThemeContext);
}

就这样，一行 useContext(ThemeContext)，无论这个组件埋在多深的地方，它都能直接读到 Context 里存的值，完全不需要中间组件的帮忙。

2.3 那个被注释掉的"痛苦回忆"

在这个项目的 App2.jsx 中，有一段被注释掉的代码非常耐人寻味：

// function App() {
//   return(
//     <>
//     <Parent>
//       <Child>
//         <GrandChild>
//           <GreatGrandChild></GreatGrandChild>
//         </GrandChild>
//       </Child>
//     </Parent>
//     </>
//   )
// }

Parent → Child → GrandChild → GreatGrandChild，整整四层嵌套。如果没有 Context，要把一个值从最外层传到最内层，你需要写至少三次 props 传递。而有了 Context 之后，GreatGrandChild 直接一个 useContext 就能拿到数据，中间那三层完全不需要知道这件事。作者把这段代码注释掉，然后用 Context 方案取而代之，本身就是对"Props Drilling 之痛"最生动的注解。

---

三、自定义 Hooks：把"聪明"封装起来

如果说 Context 解决了"数据在哪"的问题，那自定义 Hooks 就解决了"逻辑怎么复用"的问题。

3.1 Hooks 是什么？为什么要在前面加"自定义"？

React 内置了一批 Hooks（钩子函数），比如：

• useState：给组件加上"记忆"------记住一个值，并能在它变化时触发重新渲染
• useEffect：给组件加上"副作用"------在合适的时机执行外部操作（发网络请求、监听事件、操作 DOM 等）
• useContext：给组件加上"读心术"------直接读取祖先提供的 Context 数据

但 React 允许你基于这些内置 Hooks，自己造"组合技"------这就是自定义 Hook 。它的约定很简单：函数名必须以 use 开头 （比如 useMouse、useTheme、useFetch），这样 React 的 ESLint 插件就能识别它，并在你"犯规"时给出警告。

这个项目精心设计了两个自定义 Hook，分别展示 Hooks 封装的不同维度。

3.2 useTheme：一层优雅的"包装纸"

// hooks/useTheme.js
import { useContext } from 'react';
import { ThemeContext } from '../ThemeContext';

export function useTheme() {
  return useContext(ThemeContext);
}

只有三行代码，但意义非凡。为什么不在每个组件里直接写 useContext(ThemeContext) 呢？

原因有三：

1. 解耦 ：如果将来 ThemeContext 的导入路径变了，或者你想换一种读取方式，只需改这一个文件，而不是几十个组件。
2. 语义化 ：useTheme() 比 useContext(ThemeContext) 更"说人话"------读代码的人一眼就知道这是在获取主题。
3. 扩展性 ：如果你以后想在获取主题的同时做点什么（比如记录日志、做权限校验），在 useTheme 里加就行了，所有使用它的组件自动获得新能力。

这正应了项目 README 里那句话："约定以 use 开头，模块化抽离放到 hooks 目录下"。这正是 React 架构思维的重要组成部分------把可复用的逻辑集中管理，而不是散落在几十个组件里。

3.3 useMouse：响应式与副作用的完美结合

这是这个项目中最值得细细品味的代码：

// hooks/useMouse.js
import { useState, useEffect } from 'react';

export const useMouse = () => {
  const [x, setX] = useState(null);
  const [y, setY] = useState(null);

  useEffect(() => {
    document.addEventListener('mousemove', handleMouseMove);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
    };

    function handleMouseMove(e) {
      setX(e.clientX);
      setY(e.clientY);
    }
  }, []);

  return { x, y };
};

我们逐层剖析这段代码，因为它几乎涵盖了自定义 Hook 的所有核心要点：

第一层：状态定义

const [x, setX] = useState(null);
const [y, setY] = useState(null);

useState 创建了两个"响应式变量"------x 和 y。初始值是 null，表示"鼠标还没动过"。当 setX 或 setY 被调用时，任何使用了这个 Hook 的组件都会自动重新渲染，拿到最新的坐标。这就是 React 的"响应式"：你不用操心怎么更新 DOM，只需告诉 React"数据变了"，它就帮你把界面刷新好。

第二层：副作用注册（useEffect）

useEffect(() => {
  document.addEventListener('mousemove', handleMouseMove);
  // ...
}, []);

useEffect 的第一个参数是一个函数，React 会在组件"挂载"（首次出现在页面上）之后执行它。这里它在整个网页（document）上注册了一个 mousemove 事件监听器。第三个参数 []（空数组）表示"这个副作用只执行一次"------只在组件刚出来的时候绑定事件，之后不管组件怎么重新渲染，都不会重复绑定。

第三层：清理函数------容易被忽视但至关重要

return () => {
  document.removeEventListener('mousemove', handleMouseMove);
};

这是 useEffect 里的一个"隐藏功能"：如果你在副作用函数的末尾 return 一个函数，React 会在组件"卸载"（从页面上消失）的时候自动调用它。这里用它来移除事件监听器。

为什么要这样做？想象一下，如果你忘了移除监听器，用户离开了这个页面，但鼠标事件还在后台默默地尝试更新一个已经不存在的组件------这就是经典的内存泄漏。正如项目 README 中特别强调的："函数组件卸载后，不会主动回收的------定时器、Worker、事件，需要手动回收。"

第四层：返回数据

return { x, y };

自定义 Hook 本质上就是一个函数，它把你需要的"干货"（这里是鼠标坐标）打包返回。就像自动售货机------投币（调用 Hook），出货（拿到数据），内部怎么运作的你不用管。

看看它怎么被使用：

// 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 && y ? `x: ${x}, y: ${y}` : '鼠标未移动'}
    </div>
  );
}

一行 const { x, y } = useMouse()，你就获得了一个全自动的鼠标追踪系统。你没有写一行关于事件监听、状态管理、清理回收的代码------这些脏活累活都被 useMouse 一揽子承包了。这就是自定义 Hook 的终极价值：把复杂性关在笼子里，只给使用者一个简单的把手。

3.4 自定义 Hook 和普通函数的区别

可能有读者会问：我把鼠标追踪的逻辑写成一个普通函数 getMousePosition()，在每个组件里调用它，不也能复用吗？

关键在于：React 的 Hooks 能携带"响应式"和"副作用"。普通函数做不到以下两点：

• 当数据变化时自动通知组件重新渲染（响应式）
• 在组件挂载/卸载/更新等生命周期节点自动执行逻辑（副作用）

打个比方：普通函数是一张快照------你叫它的时候，它给你一个瞬间的结果。而自定义 Hook 是一台监控摄像头------它持续追踪变化，并实时推送最新画面。

---

四、完整的项目架构：一切是如何串联的？

现在让我们从入口开始，纵观整个项目的"血液循环"：

main.jsx (入口)
    │
    ▼
App.jsx ←── useMouse() ── 监听全局鼠标，实时返回坐标
    │
    ▼
ThemeContext.Provider (广播"主题"数据)
    │
    ▼
Page.jsx ←── useTheme() ── 读取主题，显示 "Page light"
    │
    ▼
Child.jsx ←── useTheme() ── 读取主题，显示 "按钮 light"

• main.jsx 是应用的起点，把 <App /> 组件挂载到 HTML 页面的 <div id="root"> 上。
• App.jsx 同时使用了 useMouse（追踪鼠标）和 ThemeContext.Provider（广播主题）。注意：Provider 的范围只包裹了 <Page /> 和切换按钮，外面的内容不受影响------这就是 Context 的"按需覆盖"特性。
• Page.jsx 和 Child.jsx 虽然隔着父子层级，但它们获取主题的方式一模一样------都是调用 useTheme()。它们完全不需要知道 Provider 在哪一层，也不需要知道中间经过了哪些组件。Context 抹平了层级差异。

项目的技术栈也值得一提：

• Vite 作为构建工具（替代了老一代的 Webpack），启动速度和热更新都快得惊人
• React 19 是最新版本，拥有更好的性能和更多内置优化
• ESLint 负责代码质量检查，搭配 eslint-plugin-react-hooks 插件可以自动检测 Hook 的使用是否符合规范

---

五、核心知识点总结：一张"速查表"

概念	作用	关键字	一句话记忆
Props 传递	父→子通信	props	爸爸递给儿子，简单直接
Props Drilling	深层传递的痛点	-	每层都要帮忙递，中间层很无辜
createContext	创建共享数据的"频道"	createContext(default)	建一个全校都能听到的广播台
Provider	提供数据的"发射塔"	<Ctx.Provider value={data}>	校长对着话筒说话
useContext	消费数据的"收音机"	useContext(Ctx)	任何一个教室的喇叭都能听
自定义 Hook	封装可复用的逻辑	use 开头的函数	把复杂工序装进自动售货机
useState	给组件加"记忆"	const [val, setVal] = useState(init)	数据变了，自动通知界面刷新
useEffect	处理"副作用"	useEffect(fn, deps)	在合适的时机做事，离开时记得收尾

---

六、写给初学者的几点建议

1. 不要把 Context 当成"万能全局变量" Context 好用，但不要滥用。如果你的数据只需要在父子之间传一次，普通的 props 是更好的选择。Context 适合那些"很多组件、跨越很多层、都需要知道"的数据------主题、用户登录状态、语言偏好、全局配置等。

2. 自定义 Hook 是"组合"而非"发明" 你不需要发明新的 React API------自定义 Hook 的全部能力都来自于对内置 Hooks（useState、useEffect、useContext 等）的组合和编排。换句话说，你只是在写一个"编排了多个 React 特性的普通函数"。这个认知能极大地降低你入门的心智负担。

3. 一定要记得"清理"副作用 无论是事件监听、定时器、WebSocket 连接还是 Web Worker，只要你在 useEffect 里创建了，就记得在返回的清理函数里销毁。这个习惯会帮你省下无数调试"白屏"和"卡顿"问题的时间。

4. 善用 hooks 目录组织代码 这个项目把 useTheme 和 useMouse 放在 src/hooks/ 目录下，这是一个非常好的架构实践。当你的应用有十几个自定义 Hook 的时候，一个集中的目录就是你的工具箱------需要什么，到这里来找就行。

5. 先理解，再动手 如果你刚开始接触 React，建议按照这个顺序学习：useState → useEffect → useContext → 自定义 Hook。前两个是基石，后两个是建立在基石上的"高级玩法"。你可以在本地运行这个项目（npm run dev），一边改代码一边看效果------没有什么比亲手把一个值从爷爷组件传到曾孙组件更直观的了。

---

七、结语

回顾这个项目，它虽然代码量不大，但精确地展示了 React 开发中两个承上启下的核心能力：

• Context 让你从"组件树快递员"变成了"无线电报务员"------数据跨越层级，直达目标，中间层无需参与。
• 自定义 Hooks 让你从"复制粘贴工程师"变成了"工具制造者"------把一段逻辑写好、测好、封装好，然后在任何地方一键调用。

如果你能透彻理解并熟练运用这两项能力，你就已经跨越了 React 初学者到中级开发者的关键门槛。剩下的，就是在更多的实际项目中不断打磨和深化。

祝你写代码像写故事一样顺畅------每一行都有意义，每一层都有它的归宿。