React 自定义 Hooks 实战：用 useMouse 理解响应式封装

前言

在 React 环境中，组件通信与逻辑复用是两个主要命题。组件通信涉及父子单向数据流、兄弟关系、跨层级传递等痛点；useContext 解决了深层嵌套的传值问题。而自定义 Hooks则从另一个维度切入——它关注的不是“数据怎么传”，而是“逻辑怎么复用”。

这篇文章以项目中的 useMouse 为例，拆解自定义 Hook 的设计思路：如何将一个涉及 DOM 事件、副作用、响应式状态的场景抽象成干净、可复用的 Hook。

组件通信的“问题地图” —— 痛点直击

在 React 中。组件通信呈层级分明的程序：

• 父子通信单向数据流，靠 props 逐层下传，适合简单场景。
• 兄弟通信需要共同的父组件做中转，或者借助状态管理。
• 爷孙 / 陌生关系层层传递既啰嗦又低效，useContext 跨越层级直接消费数据。怎么说呢，
• 上下文三步走 —— CreateContext → Provider → useContext

Pain point: 当业务增长后这种“把数据往下搬”的方式会导致属性链爆炸式增长”。维护成本飙升，

Pain point: 跨层级共享能力时又往往需要额外的 Provider 与 Consumer，代码结构被迫引入大量样板。

Pain point: 更糟糕的是一些“能力”比如监听鼠标位置、窗口尺寸等副作用，如果直接写在组件里再通过 props 或 context 传递。就会出现重复注册、忘记清理导致内存泄漏、业务耦合度过高.

自定义 Hooks

自定义 Hooks 的设计哲学 —— 把“能力”抽离出来

A Hook 要想真正产生作用，需要满足三条朴素标准：

1. #useXxx 前缀 —— React 的约定，让 linter 能校验 Hook 规则。
/hooks 目录下 —— 属于架构层，不是某个组件的附属品。 响应式状态 + 副作用 + 清理机制

This 三条构成了自定义 Hook 的“一面旗帜”：它不是普通函数。而是一个

拆解 useMouse: 一个完整的 Hook 闭环

import { useState,useEffect } from 'react';export const useMouse = => {
const = useState;说起来，const = useState;说起来，useEffect => {
function handleMouseMove {
setX;setY，}
document.addEventListener;说起来，return => {
document.removeEventListener;}，},);return { x,y };}，

. 状态声明 —— 响应式的起点

const = useState;const = useState;

Pain point: 如果不使用 null) 初始化，会导致首次渲染时出现“未定义坐标闪烁”或 UI 报错。

The initial null) acts as a semantic flag: **尚未获取到鼠标位置**。调用方可以据此决定展示“等待状态”还是实际坐标，实现真正意义上的响应式更新。

. 副作用注册与回收 —— 生命周期闭环

useEffect => {
function handleMouseMove {
setX;setY，}
document.addEventListener;
return => {
document.removeEventListener;}，},);

• Pain point – 重复注册： 若把监听写在每个使用该功能的组件内部。每次渲染都会重新绑定事件，导致性能急剧下降。
• Pain point – 内存泄漏： 忘记在组件卸载时移除监听会让浏览器一直保留对已销毁 DOM 的引用，最终导致内存占满。
• Pitfall 防御：  ) 空依赖数组确保 effect 在挂载/卸载阶段各执行一次；老实说，返回函数负责自动清理，实现 “一次注册、一次销毁”。
• Pitfall 补充： {setX}/{setY}) 本身是稳定引用。无需再写进依赖数组，从而避免不必要的重新订阅。

. 暴露接口 —— 最小化契约

return { x,y };怎么说呢，

The hook only exposes read‑only values. The setters stay private because **外部不应该也不能手动修改鼠标坐标**。这正是封装——内部状态只能由副作用驱动，外部只负责消费。

再看消费端，一个干净的 App.jsx

import { useMouse } from './hooks/useMouse';function App {
const { x,y } = useMouse;return (

{x && y?`x: ${x},y: ${y}` : '鼠标未移动'}

);}
export default App;

• Pain point – 引入复杂性： 使用自定义 Hook 后只需要一行代码即可获得全局鼠标坐标，无需再写任何事件绑定或 context 包裹。
• Pain point – 条件渲染噪声： 利用 x && y?，: …) 简洁地处理初始 null 状态，让 UI 自动进入 “加载/空态”。
• Pitfall 防御： #关注点分离: App 完全不关心如何监听。只关心 “我有坐标，我怎么展示”。

从 useMouse 到更广阔的 Hooks 图景

」。一样思路可以迁移到以下常见需求：

• #useNetworkStatus ：网络在线/离线监控。#useForm ：表单校验与提交抽象。#useInterval ：定时器统一管理。不过，#useLocalStorage ：本地缓存同步。

  小结

. / li
: "响 应 式" 、 "抽 象" 、 "封 装" 贯穿始终 / li