您现在的位置是：首页 > 学识问答网站首页学识问答

核心答案是 hook 也就是钩子，在前端开发领域，最主流就是 React 自带的 Hooks 函数式钩子体系，除此之外还有 Vue 的组合式 API 也就是 Composition API，它本质也是 hook 思想的实现，同时还有很多基于 hook 思想的第三方框架和库，比如 ahooks React Query SWR VueUse 这些，hook 的核心设计思路就是把状态逻辑和生命周期逻辑抽离成可复用函数，不再依赖类组件，让代码逻辑可以独立封装复用，很多初学者容易混淆，以为 hook 只是 React 独有的概念，实际上 hook 是一种编程设计范式，Vue 等其他框架也实现了同类机制，不同框架的 hook 写法 调用规则 依赖机制有区别，学习的时候要分清原生框架内置 hook，还有第三方封装 hook 库，内置 hook 是框架原生提供，第三方库是开发者基于原生 hook 二次封装，用来减少重复业务代码。

主流框架 Hook 对照表

框架 / 库名称	所属技术栈	类型	核心特点
React Hooks	React	框架原生内置 hook	函数组件使用，包含 useState useEffect 等基础 hook
Composition API	Vue3	框架原生内置 hook	setup 语法糖，提供 ref reactive watch 等钩子函数
ahooks	React	第三方 hook 库	基于 React Hooks 封装大量业务通用 hook
VueUse	Vue3	第三方 hook 库	基于 Composition API 封装海量通用工具 hook
React Query	React	第三方数据请求 hook 库	专门处理请求缓存 加载 重试相关 hook
SWR	React	第三方数据请求 hook 库	轻量数据获取 hook，stale while revalidate 策略

分框架详细讲解

React 原生 Hooks 框架体系

React 是最早推广 hook 概念的主流前端框架，在 React16.8 版本正式推出 Hooks，它的定位就是在函数组件里面使用状态和副作用，不需要写 class 类组件，基础内置 hook 清单如下

1 useState 管理组件本地状态

2 useEffect 处理副作用，请求接口 定时器 监听事件

3 useContext 跨层级读取上下文数据

4 useReducer 复杂状态管理，替代多组 useState

5 useRef 获取 dom 元素 保存可变引用

5 useMemo 缓存计算结果，减少重复计算

6 useCallback 缓存函数引用，优化子组件渲染

7 useImperativeHandle 配合 forwardRef 暴露子组件方法

8 useLayoutEffect 同步执行副作用，在 dom 绘制之前运行

9 useId 生成稳定唯一 id，React18 新增 hook

Vue3 Composition API 钩子体系

Vue3 的组合式 API 就是 Vue 版本的 hook 实现，在 setup 里面编写，也支持自定义 hook，官方命名一般叫组合式函数，核心内置钩子清单

1 ref 定义响应式基础类型变量

2 reactive 定义响应式对象

3 watch 监听数据变化执行回调

3 watchEffect 自动收集依赖立即执行副作用

4 computed 计算属性

5 onMounted 组件挂载生命周期钩子

6 onUpdated 组件更新之后触发

7 onUnmounted 组件卸载清理

7 onBeforeMount onBeforeUpdate 生命周期前置钩子

Vue 里面自定义 hook 就是普通函数，一般命名以 use 开头，和 React 自定义 hook 命名习惯保持一致，可以把业务逻辑抽离，在多个组件复用。

第三方 Hook 库介绍

ahooks 是阿里团队维护的 React hook 库，在原生 React Hooks 基础上封装，比如 useDebounce 防抖 hook useRequest 请求 hook useToggle 开关状态 hook，适合后台管理系统开发，减少重复写基础逻辑。

VueUse 是 Vue 生态热门工具库，基于 Vue3 组合式 API，封装了几百个通用 hook，包含 useStorage 本地存储 useWindowSize 监听窗口尺寸 useDebounceFn 防抖函数，是 Vue3 项目高频使用库。

React Query 和 SWR 属于专门的数据请求类 hook 框架，不再手动写 useEffect 发起请求，内置缓存 自动重试 后台刷新 加载状态管理，解决接口请求重复渲染问题。

自定义 Hook 开发要点

不管是 React 还是 Vue，自定义 hook 都遵循统一思路，把重复的状态 监听 副作用逻辑封装成独立函数，命名以 use 开头，内部调用框架原生 hook，然后把状态和方法 return 出去，在组件里面调用这个自定义 hook，实现逻辑复用，这个就是 hook 框架最核心的扩展方式。

选型判断步骤

第一步 确认项目技术栈是 React 还是 Vue3

第二步 如果是 React，优先使用 React 原生 Hooks，业务通用逻辑引入 ahooks，接口请求场景选择 React Query 或者 SWR

第三步 如果是 Vue3，优先使用 Composition API，通用工具逻辑引入 VueUse

第四步 不要跨技术栈混用，React hook 不能直接在 Vue 项目运行，Vue 组合式函数也不能在 React 里面使用

【常见问题】

问题 1 hook 的框架里面 Vue 有没有对应的 hook 框架

回答 1 hook 的框架里面 Vue3 有对应的 hook 实现，也就是 Composition API 组合式 API，还有第三方 VueUse 这个 hook 工具库，属于 Vue 生态的 hook 框架。

问题 2 hook 的框架里面 ahooks 属于原生 hook 吗

回答 1 hook 的框架里面 ahooks 不属于原生 hook，它是基于 React 原生 Hooks 二次封装的第三方 hook 库，底层还是依赖 React 自带 hook 机制。

问题 3 hook 的框架 React Query 是完整前端框架吗

回答 1 hook 的框架 React Query 不是完整前端框架，它是专门做数据请求的 hook 库，需要搭配 React 框架一起使用，本身不能独立运行项目。

问题 4 hook 的框架 React Hooks 和 VueUse 可以通用吗

回答 1 hook 的框架 React Hooks 和 VueUse 不能通用，React Hooks 属于 React 技术栈，VueUse 是 Vue3 技术栈，底层响应式机制不一样，不能跨项目混用。

【免责申明】

本内容基于前端主流开源框架公开文档编写，库版本持续迭代，API 会随版本更新发生变动，实际开发请以对应框架官方最新文档为准。