模块三实验自定义 Hook 设计模式与状态逻辑解耦
自定义 Hooks 工业级封装实验
学习如何将跨组件的生命周期事件、定时器控制与浏览器存储抽象为干净的可复用 Hook。
useDebounce防抖搜索控制
避免用户快速按键时触发密集的网络 API 请求，在输入停顿 500ms 后才分发最终结果。
实时输入值: ""
防抖生效值 (500ms): ""
实际发起请求次数: 0 次
useWindowSize响应式视口监听
自动监听 window.resize 事件，并在组件销毁时执行 removeEventListener 避免内存泄漏。
当前浏览器视口尺寸:
1200 × 800 px
🖥️ Desktop 桌面设备模式useLocalStorage状态持久化绑定
将 React 响应式 State 与浏览器 LocalStorage 深度绑定，刷新页面数据不丢失。
✓ 请在上方修改内容并刷新浏览器页面验证，数据将从 LocalStorage 自动复原。