JavaScript自定义钩子怎么用及实现方式

自定义 Hook 是 React 中一种优雅复用状态逻辑与副作用的机制，它并非 JavaScript 原生特性，而是遵循“以 use 开头、内部调用 React 内置 Hook、返回可复用逻辑”的约定式实践——既能彻底解决跨组件重复代码（如响应式窗口监听、表单控制、数据请求等）带来的维护难题，又严格隔离 UI 与逻辑、不改变组件结构；只要掌握命名规范、调用规则和纯函数原则，哪怕一个简单的 useWindowWidth 就能让你的组件瞬间变轻量、更专注业务表达。

自定义 Hook 是 React 中复用逻辑的机制，不是 JavaScript 原生功能，而是 React 的约定式实践——它本质是一个普通 JavaScript 函数，函数名以 use 开头，内部可以调用其他 Hook（如 useState、useEffect 等），用于封装和共享组件中可复用的状态逻辑。

自定义 Hook 解决什么问题

当多个组件需要相同的状态逻辑（比如监听窗口大小、处理表单输入、连接 WebSocket），直接复制粘贴代码会导致重复和难以维护。自定义 Hook 把这部分逻辑抽出来，让组件只关注“做什么”，而不是“怎么做”。

注意：它不复用 UI，也不影响组件结构，只复用状态和副作用逻辑。

怎么写一个自定义 Hook

只需一个函数，命名以 use 开头，内部调用 React Hook，并返回你需要的数据或方法。

• 函数必须是纯函数（无副作用，不修改外部变量）
• 只能在组件顶层或自定义 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 当前窗口宽度：{width}px;
}

常见注意事项

• 不要在条件语句或循环中调用自定义 Hook，必须保证每次渲染调用顺序一致
• Hook 名称必须以 use 开头，否则 ESLint 插件无法识别，可能引发 bug
• 自定义 Hook 之间可以互相调用（比如 useFetch 内部调用 useState 和 useEffect）
• 它不创建闭包陷阱——每个组件调用都拥有独立的状态和 effect

典型实用场景

• useInput：封装受控输入框的 value 和 onChange
• useToggle：管理布尔状态及切换函数
• useLocalStorage：同步 state 到 localStorage
• useApi：封装数据请求、加载、错误状态

基本上就这些——它不复杂但容易忽略规则，核心就是“函数 + use 前缀 + 调用内置 Hook + 返回逻辑”。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。