Web 四大框架总览:React / Vue / Angular / SolidJS

四个框架解决的是同一件事:让你声明 UI 与状态的映射,框架负责"状态变了 UI 自动变"。

但实现路径完全不同,理解差异比记 API 重要。

一、一图看懂四个的差异

框架        | 模板形式      | 响应式机制         | 心智模型
React      | JSX          | 全量 rerender + diff | "状态变 → 重跑函数 → diff DOM"
Vue        | 模板 + JSX    | 依赖追踪 + VDOM diff | "数据变 → 自动追踪 → 局部更新"
Angular    | HTML 模板     | Zone.js / Signals    | "OOP + DI + RxJS 流"
SolidJS    | JSX(编译时)  | Signals 细粒度       | "组件只跑一次,数据自己更新 DOM"

类比 Flutter:

React ≈ Flutter 的 setState(全量 rebuild + diff)
Vue ≈ Flutter 的 ChangeNotifier(依赖追踪 + 局部刷新)
Angular ≈ Flutter 的 Bloc(架构强约束)
SolidJS ≈ Flutter 的 ValueNotifier(细粒度精准刷新)

二、心智差异(最重要的一节)

React:UI = f(state)

jsx

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

状态变了 → 整个组件函数重跑 → 返回新 JSX → 跟旧的 diff → 更新 DOM。

函数式思维:组件是纯函数,把 state 映射成 UI。

闭包 / Hooks 顺序敏感是这种模型的副作用。

Vue:模板 + 自动追踪

vue

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

ref 是响应式的,模板里用了它就自动建立依赖。count 变了,Vue 知道哪些地方用了它,只更新那些地方。

不需要重跑组件函数,写起来像普通 JS 但响应式。

Angular:类 + 装饰器 + 依赖注入

typescript

@Component({
  selector: 'counter',
  template: `<button (click)="count++">{{ count }}</button>`
})
export class CounterComponent {
  count = 0;
}

面向对象:组件是类,模板用装饰器声明,DI 容器管所有依赖。

旧模型靠 Zone.js"猜"哪里变了,新版 Signals 是显式响应式。

适合大型项目、强工程约束、企业级团队。

SolidJS:JSX 但只跑一次

jsx

function Counter() {
  const [count, setCount] = createSignal(0);
  return <button onClick={() => setCount(count() + 1)}>{count()}</button>;
}

长得像 React,但完全不是。Counter 函数只跑一次,创建了 signal 后就退场了。

count() 是 signal 的 getter,JSX 编译时被 Solid 转成"订阅":这个文本节点订阅了 count,count 变直接更新这个文本节点,根本不重跑函数。

性能极佳,几乎没有 VDOM 开销。

三、四个的关键概念对照表

概念	React	Vue	Angular	SolidJS
状态	`useState`	`ref` / `reactive`	类字段 / Signal	`createSignal`
副作用	`useEffect`	`watchEffect` / `watch`	`ngOnInit` + RxJS	`createEffect`
派生	`useMemo`	`computed`	`computed` (Signals)	`createMemo`
引用 DOM	`useRef`	`ref`	`@ViewChild`	`ref`
上下文	`Context.Provider`	`provide / inject`	DI	`Context.Provider`
路由	React Router	Vue Router	Angular Router	Solid Router
状态库	Redux/Zustand/Jotai	Pinia/Vuex	NgRx	Solid Stores
表单	React Hook Form	VeeValidate / 手写	Reactive Forms	手写
SSR	Next.js / Remix	Nuxt	Angular Universal	SolidStart
测试	Vitest + RTL	Vitest + VTU	Karma/Jest + TestBed	Vitest

四、性能模型

React  : 重跑组件 → VDOM diff → 改 DOM
        优化点:memo / useMemo / 虚拟列表

Vue    : 依赖追踪 → 标记 dirty 组件 → VDOM diff(局部)→ 改 DOM
        优化点:已经局部 + computed,默认很快

Angular: Zone.js 检测 → 全树 dirty check
        Signals 模式:细粒度 + zoneless,新版可极快

Solid  : Signal 直接绑 DOM 节点 → 写哪改哪
        几乎零开销,基准测试常年第一

实际生产中:只要不犯低级错误,四个都能跑得很快。差异在大规模 / 复杂场景。

五、生态对比

React 生态(最大)

路由:React Router、TanStack Router
状态:Redux Toolkit、Zustand、Jotai、Recoil、Valtio
数据获取:TanStack Query、SWR、RTK Query
表单:React Hook Form、Formik
SSR / 全栈:Next.js(默认)、Remix、Astro
UI 库:MUI、Chakra UI、shadcn/ui、Ant Design
移动端:React Native

Vue 生态(完整 + 官方)

路由:Vue Router(官方)
状态:Pinia(官方,Vuex 已退役)
表单:VeeValidate
SSR / 全栈:Nuxt(官方)
UI 库:Element Plus、Naive UI、Vuetify、Quasar
国内生态:Element / iView 等老牌中文社区

Angular 生态(强约束 + 全家桶)

路由:官方(自带)
状态:NgRx、Akita、Component Store
表单:官方 Reactive Forms / Template Forms
HTTP:官方 HttpClient
SSR:Angular Universal
UI 库:Angular Material(官方)、PrimeNG、Nebular

Angular 几乎所有功能都是官方一站式,新人省心,但重。

SolidJS 生态(年轻但精)

路由:Solid Router
状态:Solid Stores(自带)
数据获取:Solid Query
SSR / 全栈:SolidStart
UI 库:Hope UI、Kobalte、Solid UI(基于 shadcn)

生态比四大框架小,但核心都有。文档质量高。

六、选型决策树

项目类型 / 团队偏好

新创业 / 个人 / 中小项目
  ├─ 偏函数式 / 组件即纯函数 → React
  ├─ 偏直觉 / 模板易上手 → Vue
  └─ 极致性能 / 喜欢新东西 → SolidJS

企业 / 团队大 / 长期维护
  ├─ 偏架构约束 / OOP / 后端背景 → Angular
  ├─ React 生态 → React + TypeScript + 自选状态
  └─ 全栈一致 → Next.js (React) / Nuxt (Vue)

特殊场景
  ├─ 跨端(Web + iOS + Android)→ React Native
  ├─ 移动 PWA → Vue / Quasar
  ├─ 高性能数据可视化 → SolidJS
  └─ 政府 / 国企 → Angular(企业感强)

实战推荐(2026):

React + Next.js + TanStack Query:最稳健,招人最多,生态最深
Vue + Nuxt + Pinia:最舒服,DX 第一,中小团队首选
Angular:大型 / 银行 / 政府;新项目少
SolidJS:技术栈先锋 / 性能敏感

七、四个框架的"反思学习"建议

不要"挨个学完再用"。最佳路径:

1. 选一个主力(推荐 React 或 Vue),做完一个真实项目
2. 学 SolidJS:用同样的需求写一遍,理解"细粒度响应式"
3. 学另一个主力(React/Vue 互补):理解"VDOM vs 模板编译"
4. 学 Angular:理解 OOP / DI / RxJS 在前端的应用

按这个路径,你不只是学了 4 个框架,而是理解了 4 种不同的响应式 UI 范式。

八、共同的基础(无论选哪个都要会)

TypeScript:现代前端项目几乎全 TS
Vite:开发服务器、构建工具(Webpack 仍在,但新项目首选 Vite)
pnpm / npm:包管理(monorepo 用 pnpm 最爽)
ESLint + Prettier:代码规范
Vitest / Playwright:测试
CSS 方案:Tailwind / CSS Modules / styled-components 各派
响应式 / 异步 / Promise / Stream:前端永恒主题

九、和 Flutter 的概念映射

如果你是从 Flutter 来的,很多概念是相通的:

Flutter	Web 框架对应
Widget	Component(组件)
StatelessWidget	函数组件 / 没 state 的组件
StatefulWidget + setState	React useState / Vue ref
BuildContext	React Context / Vue inject
InheritedWidget	Provider / Pinia / Context
ChangeNotifier	Vue ref + watchEffect
ValueNotifier + ValueListenableBuilder	Signal(SolidJS / Vue 3.4+)
Riverpod	Zustand / Pinia / Jotai
Bloc(Stream + 事件)	NgRx(Redux + RxJS)
MaterialApp + Routes	React Router / Vue Router
Dio + Interceptor	Axios + Interceptor
build_runner / freezed	Vite 插件 / TypeScript 类型生成
pub.dev	npm / pnpm
Hot Reload	HMR(Hot Module Replacement)

心智完全对得上。学起来比从零开始快 3 倍。

十、推荐学习顺序(我接下来要写的)

按"建立全貌 → 主力深耕 → 横向比较"组织:

React 系列
  ├─ React 总览与心智
  ├─ JSX 与组件
  ├─ Hooks 详解
  ├─ 状态管理(Context / Zustand / Redux Toolkit)
  ├─ 路由(React Router / TanStack Router)
  ├─ 数据获取(TanStack Query / SWR)
  ├─ 表单(React Hook Form)
  ├─ 性能与渲染机制
  └─ Next.js(SSR / SSG / App Router)

Vue 系列
  ├─ Vue 总览与心智
  ├─ 模板与指令
  ├─ 组合式 API
  ├─ 响应式原理
  ├─ 状态管理(Pinia)
  ├─ 路由(Vue Router)
  └─ Nuxt(SSR / 全栈)

Angular 系列
  ├─ Angular 总览与心智
  ├─ 组件 / 模板 / 指令
  ├─ 模块与 DI
  ├─ RxJS 在 Angular
  ├─ Angular Signals
  ├─ 路由 / Forms / HttpClient
  └─ Angular Universal(SSR)

SolidJS 系列
  ├─ SolidJS 总览与心智
  ├─ Signals 与细粒度响应式
  ├─ Stores / Effects / Memos
  └─ SolidStart(SSR)

横向比较
  └─ 四大框架横向对比(状态 / 性能 / 生态 / 选型)

这是一个完整路线图,大约 25~30 篇。每一篇深入度类似 Flutter 学习包。

十一、心智模型

"四个框架,一个本质:状态 → UI 的映射 + 状态变化 → UI 自动更新"

React  : 函数组件 + Hooks,VDOM diff
Vue    : 模板 + 响应式数据,依赖追踪
Angular: 类 + 装饰器 + DI,Zone / Signals
Solid  : JSX 但只跑一次,Signals 直接更新 DOM

学一个框架,学的是"它怎么处理状态变化 → 怎么决定哪部分 UI 重新渲染"。把这个想清楚,API 都是细节。

Web 四大框架总览:React / Vue / Angular / SolidJS ​

一、一图看懂四个的差异 ​

二、心智差异(最重要的一节) ​

React:UI = f(state) ​

Vue:模板 + 自动追踪 ​

Angular:类 + 装饰器 + 依赖注入 ​

SolidJS:JSX 但只跑一次 ​

三、四个的关键概念对照表 ​

四、性能模型 ​

五、生态对比 ​

React 生态(最大) ​

Vue 生态(完整 + 官方) ​

Angular 生态(强约束 + 全家桶) ​

SolidJS 生态(年轻但精) ​

六、选型决策树 ​

七、四个框架的"反思学习"建议 ​

八、共同的基础(无论选哪个都要会) ​

九、和 Flutter 的概念映射 ​

十、推荐学习顺序(我接下来要写的) ​

十一、心智模型 ​