白话讲透 Hooks：Vue/React Hooks 区别 + 使用场景（新手也能懂）

原创已于 2025-12-09 12:23:40 修改 · 1.1k 阅读 ·

大模型引用 1 次

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

bolg

代码可运行

于 2025-12-09 12:18:33 首次发布

标签：#vue #react #hooks #前端进阶 #Composition API #前端开发

📝 本文全程大白话，无晦涩术语，帮新手彻底搞懂 Hooks 是什么、有啥用、Vue 和 React 的 Hooks 咋不一样，以及实际开发中该咋用。

文章目录

一、先掰扯清楚：Hooks 到底是个啥？（纯白话）

🍳 先抛掉官方定义，用生活例子讲：
你做饭的时候，是不是经常重复做「切葱花」「调酱汁」「刷锅」这些步骤？如果每次做饭都从头琢磨一遍，又费时间又容易错。所以聪明人会把这些重复步骤拆成「小工具」—— 切好的葱花装起来备用、调好的酱汁分瓶存着，下次做饭直接用就行。

Hooks 就是前端里的「复用小工具」：
我们写前端组件时，总会遇到重复逻辑（比如「获取登录用户信息」「监听页面滚动」「表单校验」），Hooks 就是把这些重复逻辑抽成独立的函数，哪个组件需要，直接调用这个函数就行，不用每次都复制粘贴、重新写一遍。

举个最直白的例子：
如果 3 个页面都要「获取用户信息并显示」，不用 Hooks 的话，你得在 3 个页面各写一遍「调接口、存数据、处理异常」的代码；用 Hooks 的话，把这些逻辑封装成 useUserInfo() 函数，3 个页面只需要一行 const user = useUserInfo() 就能复用所有逻辑。

二、Hooks 的核心作用（大白话总结）

🎯 说白了，Hooks 就干 3 件核心事，全是为了解决开发中的「痛点」：

1. 少写重复代码（最核心）

🔄 把多个组件共用的逻辑（比如请求数据、监听 DOM）抽成 Hooks，实现「一次编写，到处复用」，再也不用复制粘贴，也能避免改一处逻辑要改 N 个组件的坑。

2. 把复杂逻辑拆简单

🧩 一个组件如果又要请求数据、又要监听窗口大小、又要处理表单，代码会乱成一团。用 Hooks 可以把这些逻辑拆成多个小 Hooks（比如 useRequest() 处理请求、useWindowSize() 监听窗口、useForm() 处理表单），组件里只需要调用这些小 Hooks，代码瞬间清爽，好懂也好改。

3. 让「`无状态组件`」也能有「`状态`/`生命周期`」

React 早期的「函数组件」只能单纯渲染页面，没法存数据、没法监听组件「挂载/卸载」；
Vue 2 里的组件逻辑分散在 data/methods/mounted 等选项里，比如「用户信息相关逻辑」可能一半在 mounted 里、一半在 methods 里，不好归类；

✨ Hooks 就是来解决这些问题的 —— 不管是React 函数组件，还是Vue 组件，都能通过 Hooks 轻松管理状态、处理生命周期，逻辑还能按功能聚在一起。

三、Vue Hooks vs React Hooks 核心区别（新手能懂的对比）

⚖️ 先明确：

Vue 里的 Hooks 主要指「Composition API」（比如 ref/reactive/onMounted 这些）；
React Hooks 是 useState/useEffect/useCallback 这些；

二者核心目的都是「复用逻辑」，但用法、底层逻辑差很多，用表格对比更清晰：

对比维度	React Hooks	Vue Hooks（Composition API）
底层逻辑	🔄 基于「函数执行」：组件每次渲染都会重新跑一遍 Hooks，靠「依赖数组」控制执行时机； ⚠️ 有严格规则（比如 Hooks 只能写在函数顶层，不能放 if/循环里），不然会出bug	🧲 基于 Vue 独有的「响应式系统」：数据变了自动触发更新，不用依赖数组； ✅ 没调用顺序限制，能在 if/循环里用，更灵活
状态管理	📦 用 `useState` 存单个状态（要多个就多写几个）； 🔄 状态更新是「替换式」（比如 `setCount(count+1)`，新值覆盖旧值），还可能异步	🔄 用 `ref`（存单个值）/`reactive`（存对象/数组）； ✅ 状态是「直接改」（比如 `count.value++`），响应式自动生效，更直观
生命周期	📅 靠 `useEffect` 包揽所有生命周期（比如 `useEffect(()=>{}, [])` 对应挂载，return 里写卸载），所有生命周期逻辑混在一个 `useEffect` 里	📆 有专门的生命周期 Hooks（`onMounted`/`onUnmounted`/`onUpdated`），想写哪个写哪个，不用混在一起
复用逻辑	🧩 自定义 Hooks 是普通函数，返回值自己定（比如 `function useUser(){ const [user, setUser] = useState({}); return user; }`）	🧩 自定义 Hooks（叫「组合式函数」）也是普通函数，返回响应式数据（比如 `function useUser(){ const user = ref({}); return { user }; }`）
常见坑点	⚠️ 容易踩「闭包陷阱」（比如 useEffect 里拿不到最新的状态值），要靠依赖数组解决	✅ 几乎没有闭包问题，响应式数据始终是最新的

补充2个新手能懂的代码示例

React Hooks 示例（计数器）

import { useState } from 'react';

function Counter() {
  // 用useState存状态，返回「状态值+更新函数」
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>你点了 {count} 次</p>
      {/* 状态更新要调用setCount，不能直接改count */}
      <button onClick={() => setCount(count + 1)}>点我+1</button>
    </div>
  );
}

四、Hooks 的使用场景（新手直接抄）

📍 只要满足以下条件，就可以用 Hooks：

通用场景（Vue/React 都能用）

多个组件复用同一逻辑：👥 比如「获取用户信息」「监听滚动加载」「表单校验」「本地存储操作」；
组件逻辑太复杂：🧩 比如一个组件又要请求数据、又要处理分页、又要监听筛选条件，拆成多个小 Hooks 更清晰；
不想写重复代码：✍️ 哪怕只有 2 个组件共用逻辑，也建议抽成 Hooks，后期维护更方便。

React Hooks 专属常见场景

函数组件存状态：🧮 计数器、表单输入框、列表数据，用 useState 搞定；
处理「副作用」：🔄 组件挂载后请求接口、监听 DOM 事件、订阅第三方库，用 useEffect；
性能优化：⚡ 避免组件频繁重渲染，用 useCallback 缓存函数、useMemo 缓存计算结果；
跨组件传值：🔗 全局主题、用户信息，用 useContext 替代一层层传 props；
自定义 Hooks：📦 比如封装 useRequest() 统一处理接口请求（加载中、报错、成功状态）。

Vue Hooks（Composition API）专属常见场景

替代 Vue2 选项式 API：🔄 把 Vue2 里分散的 data/methods/mounted 逻辑，按功能聚在 setup 里（比如「用户相关逻辑」放一起，「表单相关逻辑」放一起）；
响应式数据处理：📊 单个值用 ref、对象/数组用 reactive、计算属性用 computed；
自定义组合式函数：📦 封装 useTable() 处理表格的「请求+分页+筛选」、useModal() 处理弹窗的显示/隐藏；
跨层级传值：🔗 父组件给孙子组件传数据，用 provide/inject；
生命周期管理：📅 组件挂载执行逻辑用 onMounted、卸载时清理定时器用 onUnmounted。