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

自定义 Hook 是 React 中一种优雅复用状态逻辑与副作用的约定式实践——它并非 JavaScript 原生特性，而是一个以 `use` 开头的普通函数，内部可自由调用 `useState`、`useEffect` 等内置 Hook，并返回所需的数据或方法；它不涉及 UI 复用或组件结构变更，专为解决跨组件重复逻辑（如响应式尺寸监听、表单控制、本地存储同步、API 请求封装等）而生，既保持了函数的简洁性与可测试性，又严格遵循 Hook 规则（如顶层调用、命名规范、独立状态隔离），让开发者聚焦于业务意图而非样板代码，是构建可维护、可扩展 React 应用的关键利器。

自定义 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学习网公众号，一起学习编程~