与 React 对比

路线图以 React 核心 与 Next.js 核心 为主栈；Svelte / Astro 不是「更好」，而是 不同 trade-off。本节从 包体积、运行时、学习曲线、招聘生态 四维度对照，避免选型辩论变成信仰战。

学习目标

• 量化理解「无虚拟 DOM runtime」对 bundle 的影响
• 说清何时 Svelte/Astro 优于纯 React SPA
• 与 vue-essentials 模板型框架做三角对比

包体积与运行时

维度	React SPA	Svelte 应用	Astro 内容页
框架 runtime	react + react-dom	极小（编译进逻辑）	默认接近 0 JS
典型首屏 JS	数十～百 KB+	常更低	仅岛组件
Hydration	整树或部分	Svelte 组件级	client:* 控制

重交互仪表盘（大量表单、实时图表）React 生态组件库更全；文档 / 落地页 Astro 或 11ty 往往更轻。测量方式：Chrome Lighthouse + build 报告，见 frontend-toolchain-essentials。

心智模型与学习曲线

概念	React	Svelte	Astro
UI 描述	JSX + Hooks	.svelte 模板	.astro + 可选 JSX
副作用	useEffect	$: / onMount	岛组件内各自处理
状态提升	props + context	props + stores	岛之间少共享状态

已会 vue-essentials 的读者上手 Svelte 比从 React 转有时更快——模板与 scoped CSS 相似。已会 React 的读者需适应 「赋值即更新」 而非 immutable 习惯。

生态与岗位

• React / Next：国内全栈与平台岗主流；本站 platform 选型
• Vue：后台与 ToB 仍大量；见 vue track
• Svelte：增长中，设计工具、开源侧栏常见
• Astro：文档站、营销站、Starlight 文档主题

工程纪律不变：TypeScript、ESLint、测试、Git 流程仍走 frontend-toolchain-essentials 与 html-css-essentials 基础。

选型一句话