组件框架

元信息

目标：理解组件框架在原生组件之上补齐的三件事——状态变化自动更新视图、声明式描述界面、组织大规模组件的工程规则；能沿"f 如何实现/界面用什么语言/状态更新方式"三问对照 React/Vue/Svelte/HTMX 的路线差异
关键概念：虚拟DOM、JSX、单文件组件、编译时框架、hypermedia、渐进式
关联阶段：cp4
常见误区：以为所有框架都靠虚拟DOM更新界面（Vue 走细粒度响应式，Svelte 在编译期直接生成更新 DOM 的代码）；以为框架之争是写法偏好之争（真正的分野是状态放客户端还是服务端）；以为 Web Components 可平替框架（它只解决组件封装，不提供状态自动更新与工程链）

什么是组件框架？

组件定义了"UI 的复用单元"，但把组件做到生产级还缺三样：状态变化后自动更新视图（反应式编程）、声明式地描述界面、组织千个组件的工程规则。组件框架就是补齐这三样的基础设施。

各家框架的差异，本质是对三个问题给出不同答案：

UI = f(state) 里的 f 怎么实现——运行时对比（虚拟DOM）、细粒度追踪（响应式）、还是编译时分析（Svelte）？
界面用什么语言写——JS 里嵌 HTML（JSX）、HTML 里嵌 JS（模板），还是干脆留在服务端？
状态更新是显式触发（不可变数据 + setState）还是自动传播（可变数据 + 依赖追踪）？

主流方案一览

React：UI 是状态的函数

Facebook 出品（2013），当前生态最大。核心模型极简：组件是接收 props 返回 UI 描述的函数。

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

JSX：在 JS 里写"HTML"——界面即代码，一切皆表达式
虚拟 DOM：状态变化 → 重算 UI 描述 → diff 出最小真实 DOM 改动
不可变状态 + 显式 setState：变化是"换新数据"而非"改旧数据"，可预测但心智负担在"不可变性"上
Hooks（useState/useEffect）让逻辑复用不依赖类的继承

Vue：渐进式的响应式框架

尤雨溪出品（2014），国内应用极广。模板 + 响应式路线的代表（课程前文的示例多以其为语例）。

单文件组件（.vue）：template/script/style 三段一体，样式天然 scoped——三种语言的职责各归其位
细粒度响应式：直接代理可变数据，依赖谁变了就精确更新谁，无需整棵树 diff（原理见反应式编程三要素）
渐进式：可以从增强式脚本用起，逐步用到完整工程体系，学习曲线平缓

Svelte：编译时框架

把"框架"挪进了编译器：组件代码编译为直接的 DOM 操作，运行时几乎没有框架本体。

无虚拟 DOM：count += 1 被编译成"精准更新那一个文本节点"的代码
产物小、运行快；代价是生态较小，编译期约束更强
意义在于揭示：框架的运行时开销不是必然的，范式之争最终是编译期与运行时的取舍

HTMX： hypermedia 路线的反命题

前三者是"SPA 路线"——状态在前端、数据用 JSON。HTMX 是另一极：状态留在服务端，服务端直接返回 HTML 片段，前端只负责"把这个片段换进来"。

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

几乎不写 JS：交互即"发请求 → 用响应 HTML 替换局部"——与页面包含、前端模板的思路一脉相承，只是由服务端完成渲染
复兴了 REST/hypermedia 思想：HTML 本身就是应用状态的表达
适用：内容为主、交互简单的应用；重度交互界面仍是 SPA 框架的主场

Web Components：平台原生方案

不依赖框架的浏览器原生组件（Custom Elements + Shadow DOM + template）。各框架组件的"概念原型"，适合跨框架/设计系统场景，生态与开发体验仍逊于主流框架。

对照

	React	Vue	Svelte	HTMX	Web Components
界面写法	JSX（JS中嵌HTML）	模板（HTML中嵌JS）	模板	无（服务端HTML）	模板字符串
更新机制	虚拟DOM diff	细粒度响应式	编译时生成更新代码	整片替换	手工/配轻量库
状态位置	客户端	客户端	客户端	服务端	自定
学习曲线	中（函数式心智）	平缓	平缓	极低	中
生态	最大	大	小	小而精	平台能力

如何选择？

元问题仍是单页 vs 多页的延伸：状态放客户端（React/Vue/Svelte）还是服务端（HTMX/SSR）
求职导向与复杂应用 → React/Vue；重内容轻交互 → HTMX 或 SSR 框架；平台合规场景（如 polyfill 受限环境）→ Web Components
概念都是相通的：组件契约、响应式、组件树——学透一门，其余只是语法差异。这正是前端架构比框架更重要的原因

扩展阅读

用 160 行 JS 写一个简化版 React（Gooact） — 亲手实现虚拟DOM与组件机制，理解框架不过是函数
React 官方文档 / Vue 官方文档 / HTMX 官网

组件框架 ​

元信息 ​

什么是组件框架？ ​

主流方案一览 ​

React：UI 是状态的函数 ​

Vue：渐进式的响应式框架 ​

Svelte：编译时框架 ​

HTMX： hypermedia 路线的反命题 ​

Web Components：平台原生方案 ​

对照 ​

如何选择？ ​

扩展阅读 ​