记得第一次封装自定义Hook是为了处理表单输入。项目里有十几个表单，每个都要处理输入值、验证和提交状态。重复代码写到手软，终于决定抽象成useForm Hook。这个Hook返回输入值、错误信息和处理函数，在任何表单组件里直接调用就行，代码量直接减半。

自定义Hook本质上就是个JavaScript函数，只不过它内部可以调用其他Hook。命名必须以use开头，这样React才能自动检查Hook的使用规范。比如useToggle就是个经典例子，它在布尔状态间切换，按钮、下拉菜单、模态框都能用到：

在组件中使用时，一行代码搞定切换逻辑：

实际项目中，数据获取的需求太常见了。useFetch Hook封装了加载状态、错误处理和数据缓存，让组件只关注渲染逻辑：

组件里调用起来特别清爽：

监听窗口大小变化也是个高频需求。useWindowSize Hook返回当前窗口尺寸，并在窗口 resize 时自动更新：

在响应式组件里直接获取实时尺寸：

自定义Hook还能组合使用。比如useLocalStorage Hook，把状态同步到localStorage，它内部就同时使用了useState和useEffect：

写自定义Hook时要注意几个坑。一是条件判断里不能调用Hook，二是Hook只能在函数组件或自定义Hook里调用。还有，使用useCallback包装返回的函数避免不必要的重渲染也很重要。

现在团队里已经积累了不少实用的自定义Hook。useDebounce处理防抖，useThrottle处理节流，usePrevious记录上一次状态，每个都解决了特定的业务场景。项目代码变得更容易维护，新功能开发时先看看Hook库里有没有现成的，没有就封装一个新的，既提升效率又保证一致性。

自定义Hook让关注点分离得更彻底。组件负责UI渲染，Hook处理状态逻辑，两者通过简单的函数调用连接。这种开发体验，用过就真的回不去了。