一、为什么需要自定义Hook？话说回来，

想象一下你正在搭建一座乐高城堡。说起来，如果每次需要一扇窗户。都要从基础开始烧制玻璃、切割木框、安装铰链…，那工程得有多浩大？聪明的做法是的观点是，提前做好标准化的窗户模块需要时直接拿来用。

自定义Hook在React中扮演的就是这个"标准化模块"的角色。

在传统React开发中，我们常常遇到这样的困境：

而自定义Hook的出现，让这一切变得优雅：

• 将通用逻辑抽离成独立的Hook函数
• 一处编写，处处复用
• 逻辑与视图分离，代码更清晰

二、自定义Hook的主要规则

三、实战案例一：useHover —— 让交互状态"触手可及"

需求分析

假设需要在多个组件中实现 "鼠标悬停 "效果。传统做法是在每个组件中重复编写：

// 传统写法 - 每个组件都要重复
function Button {
const = useState
return (

setHovered}
onMouseLeave={ => setHovered}
{
hovered?'松开我' : ' hover 我'
}
)
}

主要实现

// hooks/useHover.js
import { useState,cloneElement } from "react"
export default function useHover {
// 状态管理：追踪悬停状态
const = useState
// 事件包装器：保留原有事件处理函数
const onMouseEnter = => {
return => {
originalOnMouseEnter?
. // 先执行原有逻辑
setState // 再更新悬停状态
}
}
const onMouseLeave = => {
return => {
originalOnMouseLeave?.
setState
}
}
// 支持函数组件或元素两种传入方式
if {
element = element
}
// 克隆元素并注入事件处理
const el = cloneElement(element,{
onMouseEnter: onMouseEnter。onMouseLeave: onMouseLeave
})
return // 返回提高后的元素和状态
}

使用示例

// App3.js
import useHover from './hooks/useHover'
export default function App3 {
// 方式一：传入渲染函数
const element = => {
return 

Hover me!{hovered && 'Thanks!'}

}
const = useHover;return (

{hoverable}
{hovered?'ok' : 'no'}

)
}

设计亮点解析

这个 Hook 的设计有三个巧妙之处：

• 事件链保护 :使用 originalOn Mouse Enter?. 确保原有事件处理不被覆盖
• 灵活传入 :支持直接传入元素或渲染函数,适应不同场景
• 双重返回 :既返回提高后的元素,也返回状态值。调用方按需取用

四 、实战案例二 :useMounted State —— 感知组件 的"生命脉搏"

场景痛点

> 在异步操作频繁 的场景 中，我们经常遇到这样的问题 :组件已经卸载，但异步回调还在执行，试图更新已不存在 的状态，导致内存泄漏或警告。

>⚠️典型错误:Warning: Can't perform a React state update on an unmounted component.