自定义 Hook 是 React 中复用状态和副作用逻辑的机制，本质是命名以 use 开头、可调用其他 Hook 的普通函数，用于解决跨组件逻辑重复问题，不复用 UI 或改变组件结构。
自定义 Hook 是 React 中复用逻辑的机制，不是 JavaScript 原生功能，而是 React 的约定式实践——它本质是一个普通 JavaScript 函数，函数名以 use 开头，内部可以调用其他 Hook（如 useState、useEffect 等），用于封装和共享组件中可复用的状态逻辑。
自定义 Hook 解决什么问题
当多个组件需要相同的状态逻辑（比如监听窗口大小、处理表单输入、连接 WebSocket），直接复制粘贴代码会导致重复和难以维护。自定义 Hook 把这部分逻辑抽出来，让组件只关注“做什么”，而不是“怎么做”。
注意：它不复用 UI，也不影响组件结构，只复用状态和副作用逻辑。
怎么写一个自定义 Hook
只需一个函数，命名以 use 开头，内部调用 React Hook，并返回你需要的数据或方法。
React 组件生成器
下载
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
立即学习“Java免费学习笔记（深入）”；
- 函数必须是纯函数（无副作用，不修改外部变量）
- 只能在组件顶层或自定义 Hook 内部调用 React Hook
- 可以接收参数（如初始值、配置项），也可以返回任意值（对象、数组、函数等）
例子：封装一个监听窗口宽度的 Hook
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return width;
}
在组件中使用：
function MyComponent() {
const width = useWindowWidth();
return <div>当前窗口宽度：{width}px</div>;
}
常见注意事项
- 不要在条件语句或循环中调用自定义 Hook，必须保证每次渲染调用顺序一致
- Hook 名称必须以 use 开头，否则 ESLint 插件无法识别，可能引发 bug
- 自定义 Hook 之间可以互相调用（比如
useFetch内部调用useState和useEffect） - 它不创建闭包陷阱——每个组件调用都拥有独立的状态和 effect
典型实用场景
- useInput：封装受控输入框的 value 和 onChange
- useToggle：管理布尔状态及切换函数
- useLocalStorage：同步 state 到 localStorage
- useApi：封装数据请求、加载、错误状态
基本上就这些——它不复杂但容易忽略规则，核心就是“函数 + use 前缀 + 调用内置 Hook + 返回逻辑”。
