在 React 开发中，跨层级的数据共享往往是最让人抓狂的问题。无论是深层主题切换、全局使用者信息还是实时坐标，都需要在不同组件间流转。

一、痛点：深层组件间的数据共享难题

1️⃣ 传统方式：父子 props + 状态提高

React 最初设计的是单向数据流父组件通过 props 向子传值，子通过回调通知父。这种方式在浅层结构下可行。但当组件树变得深且复杂时却会出现以下痛点：

• Prop Drilling: 必须把同一份状态一路逐层传递，即使中间组件根本不需要。
• 维护成本高: 任何一次改动都可能导致链路被打断或漏传。
• 代码冗余与可读性差: 多个相同数据的重复 props 声明让文件膨胀。

2️⃣ 例子：主题切换中的搬运工问题

└─ Page // 需要 me 吗？不需要但必须帮忙往下传
└─ Child // 同上
└─ GrandChild // 真正需要 me

即便 是唯一真正使用 的地方。& 都不得不成为“搬运工”，这正是 Prop Drilling 的典型表现。

二、useContext：跨层级直接消费的方法

1️⃣ 上下文的主要理念

• Create once at root: 在最外层注入共享数据。
• No caring about depth: 任意后代都能直接读取，无需知道自己处于哪一层。
• Simplify component tree: 消除多余的 props 声明，让业务逻辑更聚焦。

2️⃣ useContext Hook 的作用与优势

三、三步上手：createContext → Provider → useContext

① createContext 创建上下文对象

// ThemeContext.js
import { createContext } from 'react';export const ThemeContext = createContext;// 默认值

为什么要默认值？

- 当某个消费组件位于 Provider 外部时它会自动使用此默认值；这为调试和 fallback 提供了便利。

② Provider 包裹目标树

// App.jsx
import { useState } from 'react';import { ThemeContext } from './ThemeContext';import Page from './components/Page';function App {
const = useState;return (


 setTheme}>切换主题

);}
export default App;

• 关键点：
• Provider 范围可控： – 容器不是必需全局化，而是按需求包裹必要范围。
• value 动态变化： – UI 随之更新，无需手动刷新。

③ useContext 消费上下文

* 页面内置自定义 Hook 用于统一访问逻辑：

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

* 两个不同层级示例：

// Page.jsx
import Chlid from './Chlid';import { useTheme } from '../hooks/useTheme';其实，const Page = => {
const me = useTheme;return (
<>
Page {me}

);
}，export default Page;// Chlid.jsx
import { useTheme } from '../hooks/useTheme';function Chlid {
const me = useTheme;return (
<>
Child
按钮{me}
);}
export default Chlid;

• - 无需 props 穿透，任何深度均可直接调用 useTheme.

四、自定义 Hook：封装业务逻辑与副作用的常用方法

为什么要自定义 Hook？

• 避免重复代码：)。
• 集中维护：。
• 语义化表达：。说起来，

Hook 的约定与结构

• 放置在 'hooks/'目录下独立管理。
  **主要价值**：除了普通函数封装。它还能把 React 响应式状态、副作用等功能一起打包，使得业务代码更加专注。**典型场景**：

  • 状态同步 + effect 清理
  • 跨页面通用逻辑

  示例

  • useMouse - 鼠标坐标监听
  • useAuth - 使用者登录状态

  ✅ 实战案例 —— 响应式鼠标坐标

  🎯 用途

  监听鼠标移动并实时显示坐标，在任何需要交互反馈的位置都能复用。

  📦 定义 Hook

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

  export const useMouse = => { const = useState;const = useState;

  // 注册事件监听并在卸载时清理 useEffect => { const handleMove = e => { setX;setY，};document.addEventListener;不过，

  return => {
  document.removeEventListener;}，

  },);怎么说呢，

  return { x,y };}，

  📄 使用方式

  jsx // App.jsx import { useMouse } from './hooks/useMouse';

  function App { const { x,y } = useMouse;

  return (

  从="">x来看，${x}。y:${y} : '鼠标移动'}

  }

  export default App;

  🔍 主要要点

  步骤	描述
  响应式状态	useState 保存坐标。实现自动重渲染
  副作用注册	useEffect 确保只注册一次
  资源清理	返回函数移除事件监听，防止内存泄漏
  返回值	对象解构方便调用

  ---

  ✅ 用何种工具？

  • Prop Drilling 疲惫？
    • 用 +useContext 消除多余 props。
  • 想复用复杂逻辑？按理说，
    • 自定义 Hook 把响应式状态和副作用抽象出来。怎么说呢，

  📌 主要流程回顾

  text createContext → Provider → Consumer

  🎉 一句话

  当你面对深层嵌套或想让同一份数据在多个地方无缝共享时用 与 useContext；当你想把一段含有副作用、依赖或状态管理的业务抽象成可复用单元时用自定义 Hook——二者结合，就是现代 React 应用保持简洁、高效与可维护性的关键武器。