最近在准备技术面试，整理了几个常用的自定义 Hooks:useDebounceusePrevious 和 useRequest。乍一看它们都很简单，几十行代码就能实现。但仔细思考后发现，这些看似简单的封装背后其实蕴含着 React 设计哲学、性能调整和状态管理的主要思想。其实，

这篇文章是我的学习笔记，尝试从这三个 Hook 出发。探索它们解决的问题、设计思路，还有在什么场景下引入它们会让代码更优雅。

说到问题的起源，为什么需要自定义 Hooks?

在 React 引入 Hooks 之前，组件逻辑复用主要依赖高阶组件和 Render Props。但这两种模式都有个问题：嵌套层级过深，代码难以理解。Hooks 的出现让可以用函数的方式提取和复用组件逻辑。

自定义 Hook 的主要价值在于：封装带副作用的逻辑，让组件代码更声明式。怎么说呢，比如防抖、请求状态管理这些"脏活累活"，可以抽离到自定义 Hook 中。让组件只关注 "我要什么数据" 而不是 "我怎么拿到数据"。老实说，

主要概念探索

useDebounce: 控制变化频率的艺术

useDebounce 的使用场景很常见：搜索框输入、窗口 resize、滚动监听等高频触发的事件。怎么说呢，如果每次输入都发起请求，会造成不必要的性能开销和服务器压力。

// 环境:React +// 场景:搜索框实时搜索
import { useState } from 'react';import { useDebounce } from './useDebounce';说起来，function SearchBox {
const = useState;const debouncedKeyword = useDebounce;按理说，// Only trigger search when user stops typing for 500ms
useEffect => {
if {
fetchSearchResults;}
},)，其实，return (
 setKeyword}
placeholder="Search..."
/>
);}

实现原理:

useDebounce 的主要是利用 useEffect 的清理函数。每当 value 变化时先清除之前的定时器，再设置新的定时器。只有当 value 在 delay 时间内不再变化。定时器才会执行，更新 debouncedValue。

// 环境:React +// 关键点:useEffect 的清理函数
useEffect => {
const timer = setTimeout => {
setDebouncedValue;// Only update after delay
},delay);
return => clearTimeout;// Cleanup on every render
},);

这里有个值得思考的细节：为什么清理函数在每次渲染时都会执行？

我的理解是React 的 Effect 清理机制保证了 "副作用的及时撤销"。每次 value 变化时旧的定时器被清除,新的定时器才会生效。不过，这种模式避免了多个定时器同时存在导致的竞态问题。

权衡点:

• delay 太短 : 防抖效果不明显
• delay 太长 : 使用者体验差，响应迟钝
• 常见取值 : 搜索框 -500ms。滚动事件 -200ms

usePrevious : 时间旅行的小技巧

usePrevious 解决的是一个看似简单但实际很有用的问题 : 如何在组件中获取上一次渲染的值？

// 环境:React +// 场景:比较前后两次 props 的变化
function UserProfile {
const prevUserId = usePrevious;useEffect => {
if {
console.log;fetchUserData;}
},)，return 

User ID: {userId}
}

usePrevious 利用了 useRef 的两个特性 :

1. 引用的持久性 :ref.current 在组件的整个生命周期中都保持同一个引用
2. 修改不触发重渲染 : 改变 ref.current 不会导致组件重新渲染

// 环境:React +// 关键点:useRef 的持久性
function usePrevious {
const ref = useRef;useEffect => {
ref.current = value;// Update ref AFTER render
});return ref.current;// Return old value during render
}

这里的执行顺序很关键 :

1. 组件渲染时usePrevious 返回  ref.current 
2. 渲染完成后 useEffect  执行,将  ref.current  更新为当前值
3. 下次渲染时  ref.current  已经是 "上一次"的值了

 一个有趣的思考  :为什么  useEffect  不需要依赖数组？

因为我们希望 每次渲染后都更新   ref.current 。如果加了依赖数组，反而会导致某些情况下  ref.current  不更新。失去 "追踪前一个值"""""""""'的意义。其实，

& nbsp;& nbsp，& nbsp;& nbsp，useRequest :异步状态管理的简化方案 & nbsp;& nbsp，& nbsp;& nbsp，& nbsp;& nbsp，& nbsp;& nbsp，