沉梦手记
  • 前端学习
  • React
沉梦听雨
2026-11-03
目录

React与Vue对比

# React 与 Vue 对比

本文是 React 学习系列的第一篇。在正式开始学习 React 之前，我们先把它和已经学过的 Vue 做一次系统对比，搞清楚两者的设计理念、生态、使用率和难易程度差异，从而为后续学习建立整体认知。

# 一、为什么要对比 React 和 Vue？

如果你是从 Java 后端转前端的同学，可以这样理解：Vue 和 React 之于前端，就像 Spring Boot 和 Quarkus 之于后端——它们解决的是同一类问题（构建用户界面），但设计哲学和实现方式截然不同。

目前前端主流框架就三大阵营：React（Facebook）、Vue（尤雨溪）、Angular（Google）。其中 Angular 在国内使用较少，学习曲线也最陡，所以国内开发者真正纠结的，几乎都是 Vue 还是 React。

把两者放在一起对比，有三个好处：

  1. 借 Vue 学 React：你已经熟悉 Vue，通过对比能更快理解 React 的设计思路；
  2. 建立框架思维：理解不同框架的取舍，才能跳出"会用某个 API"的层次；
  3. 指导技术选型：实际工作中，选哪个框架往往取决于团队、项目和生态，而不是单纯的好恶。

# 二、React 与 Vue 简介

# 1. React 简介

React 是 Facebook（现 Meta）在 2013 年开源的 JavaScript 库，用于构建用户界面。

  • 定位：UI 视图层库（Library），不是完整框架；
  • 核心思想：UI = f(state)，界面是状态的函数映射；
  • 标志性特性：JSX、虚拟 DOM、单向数据流、Hooks；
  • 官方网站：https://react.dev (opens new window)

# 2. Vue 简介

Vue 是尤雨溪在 2014 年发布的渐进式 JavaScript 框架，同样用于构建用户界面。

  • 定位：渐进式框架（Framework），从视图层到完整工程化都有官方方案；
  • 核心思想：响应式数据驱动 + 模板编译；
  • 标志性特性：单文件组件（SFC）、响应式系统、指令系统、Composition API；
  • 官方网站：https://vuejs.org (opens new window)

一个是"库"，一个是"框架"，这个定位差异决定了两者生态和上手方式的根本不同，下文会反复提到。

# 三、核心差异对比

# 1. 设计理念：自由 vs 约定

这是两者最根本的区别。

维度 React Vue
定位 UI 库，只管视图层 渐进式框架，覆盖完整开发链路
理念 只提供机制，不提供方案 提供官方推荐方案
风格 高度自由，写法多样 约定优于配置，写法统一

用 Java 类比：

  • React 像 Java 本身：只给你语言和基础类库，路由、状态管理、构建工具全靠自己选，组合方式自由但容易"乱"；
  • Vue 像 Spring Boot：官方帮你选好了一套 starter，路由用 Vue Router、状态用 Pinia、构建用 Vite，开箱即用但灵活性略低。

React 的自由带来了极高的灵活性，但也意味着同一个项目，十个团队可能写出十种结构；Vue 的约定则让项目结构更统一，团队协作时更容易达成一致。

# 2. 视图编写：JSX vs 模板

这是写代码时最直观的差异。

React 使用 JSX——在 JavaScript 里写 HTML：

function Welcome({ name }) {
  return <h1>你好，{name}</h1>;
}
1
2
3

Vue 使用模板语法（单文件组件 SFC）——在 HTML 里写逻辑：

<template>
  <h1>你好，{{ name }}</h1>
</template>

<script setup>
defineProps(['name']);
</script>
1
2
3
4
5
6
7

两者对比：

对比项 JSX Vue 模板
本质 JavaScript 语法扩展 HTML + 指令
逻辑能力 强，完整 JS 能力 受限，靠指令（v-if、v-for）
学习门槛 需理解 JS 表达式 熟悉 HTML 即可上手
灵活性 极高，可任意组合 较低，遵循模板规则
编译优化 较难静态优化 易优化，性能更好

一句话总结：JSX 上手难但上限高，Vue 模板上手快但受约束。如果你 JS 基础好，会觉得 JSX 自由畅快；如果你更习惯 HTML 思维，Vue 模板更亲切。

# 3. 响应式原理

两者都实现了"数据变 → 视图自动更新"，但机制不同。

Vue3 的响应式：基于 Proxy 代理，自动追踪依赖。

import { ref, reactive } from 'vue';

const count = ref(0);        // 基本类型用 ref
const state = reactive({ a: 1 }); // 对象用 reactive

count.value++;  // 视图自动更新
1
2
3
4
5
6
  • 修改数据 → Proxy 拦截 → 通知依赖 → 更新视图；
  • 自动追踪，无需手动声明依赖。

React 的响应式：基于状态 + 重新渲染，手动触发。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
1
2
3
4
5
6
  • 调用 setState → 触发组件重新渲染 → 生成新虚拟 DOM → diff 后更新视图；
  • 不可变数据，必须用新值替换旧值，不能直接修改。
对比项 Vue 响应式 React 状态
追踪方式 自动追踪依赖 手动触发 setState
数据修改 可直接修改（Proxy 拦截） 必须用新值替换（不可变）
心智负担 低，接近直觉 较高，需理解闭包、不可变
性能优化 框架自动处理 常需手动 memo/useMemo

对 Java 同学说：Vue 的响应式像 Spring 的 @Autowired 自动注入，你声明了它就帮你管；React 的状态更像 手动调用 setter 触发监听，你得自己告诉它"我变了"。

# 4. 组件逻辑组织：Hooks vs Composition API

两者都在用"函数式"方式组织逻辑，但形态不同。

React Hooks（2018 年推出）：

function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);
  const increment = () => setCount(c => c + 1);
  return { count, increment };
}
1
2
3
4
5

Vue Composition API（Vue3 推出，受 React Hooks 启发）：

function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  return { count, increment };
}
1
2
3
4
5

两者长得很像，但有关键差异：

对比项 React Hooks Vue Composition API
调用时机 每次渲染都重新执行 setup 只执行一次
依赖收集 手动写依赖数组 [deps] 自动追踪，无需依赖数组
闭包陷阱 有，常踩坑 无
学习难度 较高（useEffect 是难点） 较低

React 的 useEffect 依赖数组是新手最大的坑，忘记写依赖或写错依赖会导致死循环或"看不到最新值"；Vue 的 watch/watchEffect 自动追踪，省去了这个心智负担。

# 5. 状态管理与路由

能力 React Vue
状态管理 Redux、Zustand、Jotai、Recoil…（官方不指定） Pinia（官方推荐，原 Vuex 已淘汰）
路由 React Router（社区方案） Vue Router（官方方案）
构建工具 Create React App、Vite、Next.js… Vite（官方推荐，尤雨溪出品）
SSR Next.js Nuxt.js

可以看出，React 这边是"百花齐放"，官方只提供 React 本身，其余全靠社区；Vue 这边是"官方包办"，路由、状态、构建都有官方推荐方案。

  • React 的好处是选择多、生态大，坏处是新手不知道选哪个；
  • Vue 的好处是省心、统一，坏处是生态规模不如 React。

# 四、生态对比

# 1. React 生态

React 生态庞大且分散，典型组合：

  • 构建：Vite / Next.js
  • 路由：React Router
  • 状态：Redux Toolkit / Zustand / Jotai
  • UI 库：Ant Design、Material UI、Chakra UI
  • SSR/全栈：Next.js（目前最火的 React 全栈框架）
  • 移动端：React Native

# 2. Vue 生态

Vue 生态精简且官方化，典型组合：

  • 构建：Vite
  • 路由：Vue Router
  • 状态：Pinia
  • UI 库：Element Plus、Vant、Naive UI、Ant Design Vue
  • SSR/全栈：Nuxt.js
  • 移动端：Vue 无官方移动端方案（Uni-app 是国内常用跨端方案）

# 3. 生态规模对比

维度 React Vue
npm 周下载量 约 2500 万+ 约 600 万+
GitHub Star 23 万+ 21 万+
第三方库数量 极多，几乎覆盖所有场景 较多，但少于 React
UI 组件库 最多 较多
全栈框架 Next.js（生态最强） Nuxt.js

React 生态的"大"主要体现在第三方库数量和 Next.js 的成熟度上。如果你要做复杂的大型应用或全栈项目，React 生态的优势会更明显。

# 五、国内外使用率

# 1. 全球市场

根据 Stack Overflow 2024 开发者调查 (opens new window) 和 State of JS 2023 (opens new window)：

框架 全球使用率 满意度
React 约 40%（长期第一） 高
Vue 约 16% 高
Angular 约 17% 中

全球范围内，React 占据绝对主导地位，尤其在英语国家和大型互联网公司。Next.js 的崛起进一步巩固了 React 的地位。

# 2. 国内市场

国内情况与全球有明显差异：

框架 国内使用情况 主要场景
Vue 非常流行，中小公司主流 中后台、官网、小程序
React 流行，大厂主导 大型应用、复杂业务
Angular 较少 部分外企、老项目

国内 Vue 流行的原因：

  1. 中文文档和社区极好，尤雨溪本人是华人，文档质量高；
  2. 上手快，对 JS 基础要求低，适合快速交付；
  3. Element Plus / Vant 等组件库成熟，中后台开发效率高；
  4. 培训机构和教程多，新人入行首选。

而国内大厂（字节、阿里、腾讯等）核心业务多用 React，原因在于：

  1. 大型项目可维护性，React 的灵活性适合复杂场景；
  2. React Native 跨端，一套技术栈覆盖多端；
  3. 人才储备和生态，国际化项目更倾向 React。

# 3. 一句话总结国内外差异

全球看 React 强势，国内看 Vue 普及、React 大厂主导。如果你在国内做中后台或中小项目，Vue 是主流；如果目标是进大厂或做国际化项目，React 更有优势。

# 六、难易程度对比

这是初学者最关心的问题。结论先行：Vue 整体比 React 容易上手，但 React 上手后天花板更高。

# 1. 上手难度

学习阶段 Vue React
入门 容易，模板贴近 HTML 较难，需理解 JSX、函数组件
响应式 简单，自动追踪 较难，需理解 setState、不可变数据
Hooks/组合式 API 较易，无闭包陷阱 较难，useEffect 依赖数组是难点
状态管理 简单，Pinia 直观 较难，Redux 概念多（不过 Zustand 已简化）
TypeScript 支持 好，官方支持 好，但 JSX 类型稍复杂

# 2. 为什么 React 更难？

  1. JSX 心智：要在 JS 里写"HTML"，需要适应表达式思维；
  2. 不可变数据：不能直接改 state，必须返回新对象，初学者常踩坑；
  3. Hooks 规则：不能在条件语句里用 Hooks，依赖数组容易写错；
  4. 闭包陷阱：函数组件每次渲染都生成新闭包，容易拿到旧值；
  5. 生态选择：光状态管理就有 Redux、Zustand、Jotai、Recoil 等，新手容易迷茫。

# 3. 为什么 Vue 更易？

  1. 模板语法：贴近 HTML，会写网页就能上手；
  2. 响应式自动追踪：改数据就更新，符合直觉；
  3. 官方方案统一：路由、状态、构建都有官方推荐，不用纠结选型；
  4. 中文文档优秀：学习成本天然降低。

# 4. 难度曲线示意

掌握程度
  ↑
  |              React ──────────────────  (天花板高)
  |            /
  |          /
  |        /
  |      Vue ─────────  (上手快，后期平稳)
  |    /
  |  /
  +──────────────────────────────→ 学习时间
1
2
3
4
5
6
7
8
9
10

Vue 是"先易后平"，React 是"先难后高"。短期出活选 Vue，长期成长选 React。当然，两者都学到能熟练使用的程度，才是最理想的状态。

# 七、如何选择？给 Java 后端同学的建议

# 1. 选型参考

场景 推荐 原因
国内中小公司中后台 Vue 生态成熟、上手快、组件库齐全
快速交付项目 Vue 开发效率高
大厂核心业务 React 大厂多用 React，复杂项目更灵活
国际化/海外项目 React 全球主流，人才好招
跨端（App） React React Native 生态强
个人学习成长 两个都学 先 Vue 后 React，对比着学理解更深

# 2. 学习路径建议

作为已经学过 Vue 的同学，学 React 的最佳路径是对比学习：

  1. 先理解 JSX：把它当成"带变量的 HTML"，本质是 React.createElement 的语法糖；
  2. 对比响应式：把 Vue 的 ref/reactive 对应到 React 的 useState，理解"自动追踪 vs 手动触发"；
  3. 对比 Hooks：useEffect ≈ Vue 的 watch + onMounted，重点攻克依赖数组；
  4. 学状态管理：直接学 Zustand（比 Redux 简单很多），对应 Vue 的 Pinia；
  5. 学路由：React Router 对应 Vue Router，概念几乎一致；
  6. 进阶 Next.js：对应 Vue 的 Nuxt.js，做全栈应用。

核心心法：不要把 React 当成"另一个 Vue"来学，而要理解它"为什么这样设计"。React 的自由背后是"把控制权交给开发者"的理念，理解了这一点，很多"奇怪"的写法就顺理成章了。

# 八、总结

维度 React Vue
定位 UI 库 渐进式框架
视图 JSX 模板语法
响应式 手动触发，不可变数据 自动追踪，可变数据
逻辑组织 Hooks Composition API
生态 庞大分散，社区主导 精简统一，官方主导
全球使用率 第一（约 40%） 第三（约 16%）
国内使用率 大厂主导 中小公司主流
上手难度 较难 较易
天花板 高 中高
适合场景 大型/复杂/国际化项目 中后台/快速交付/中小项目

两者没有绝对优劣，只有适合不适合。Vue 像一辆自动挡轿车，好开省心；React 像一辆手动挡跑车，操控自由但需要更多技巧。

作为 React 系列的开篇，本文只做宏观对比，不深入细节。从下一篇开始，我们将正式进入 React 的具体学习：JSX 语法、组件与 Props、State 与事件处理、Hooks 详解、路由与状态管理……一步步把 React 这套技术栈吃透。

下一篇：React 快速入门（整理中）

上次更新: 2026/11/3 10:46:39
Vue3进阶

←

Theme by Vdoing | Copyright © 2023-2026 沉梦听雨 | MIT License