自定义 Hook 是 React 中复用状态和副作用逻辑的机制，本质是命名以 use 开头、可调用其他 Hook 的普通函数，用于解决跨组件逻辑重复问题，不复用 UI 或改变组件结构。
自定义 Hook 是 React 中复用逻辑的机制，不是 JavaScript 原生功能，而是 React 的约定式实践——它本质是一个普通 JavaScript 函数，函数名以 use 开头，内部可以调用其他 Hook（如 useState、useEffect 等），用于封装和共享组件中可复用的状态逻辑。
自定义 Hook 解决什么问题
当多个组件需要相同的状态逻辑（比如监听窗口大小、处理表单输入、连接 WebSocket），直接复制粘贴代码会导致重复和难以维护。自定义 Hook 把这部分逻辑抽出来，让组件只关注“做什么”，而不是“怎么做”。
注意：它不复用 UI，也不影响组件结构，只复用状态和副作用逻辑。
怎么写一个自定义 Hook
只需一个函数，命名以 use 开头，内部调用 React Hook，并返回你需要的数据或方法。
立即学习“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 + 返回逻辑”。
