文章目录
组件系统层次
软件开发范式
├── 声明式编程 (Declarative)
│ └── 声明式UI系统
│ ├── 响应式组件系统 (Reactive)
│ │ ├── 细粒度响应式 (SolidJS, Vue 3 Composition)
│ │ ├── 虚拟DOM+响应式 (Vue 2, React + MobX)
│ │ └── 编译时响应式 (Svelte)
│ │
│ └── 非响应式声明式
│ ├── 不可变数据流 (React with Hooks)
│ └── 传统模板系统 (早期模板引擎)
│
└── 命令式编程 (Imperative)
└── 命令式UI系统
├── 直接DOM操作 (jQuery, 原生JS)
├── 面向对象组件 (ExtJS, GWT)
└── 传统桌面GUI (WinForms, Swing)
比较
| 维度 | 命令式组件系统 | 声明式组件系统 | 响应式组件系统 |
|---|---|---|---|
| 核心理念 | 如何做 (How) | 是什么 (What) | 自动响应变化 (Auto-reactive What) |
| 更新方式 | 手动操作DOM | 状态→重新渲染 | 状态变化→自动精确更新 |
| 心智模型 | 步骤序列 | UI = f(state) | 状态与UI的自动连接 |
| 控制粒度 | 精细但繁琐 | 组件级或虚拟DOM级 | 变量级（最细粒度） |
| 性能优化 | 手动优化 | 虚拟DOM diff，手动记忆化 | 自动依赖追踪，无diff |
| 典型框架 | jQuery, ExtJS | React, Vue 2, Angular | Vue 3, SolidJS, Svelte |
性能特征对比
| 操作 | 命令式 | 声明式(React) | 响应式(Vue 3) |
|---|---|---|---|
| 初始化 | 快 | 中等 | 中等 |
| 局部更新 | 最快 | 需要diff | 直接更新 |
| 批量更新 | 手动优化 | 自动批量 | 自动批量 |
| 内存占用 | 低 | 高(虚拟DOM) | 中等 |
| 首次加载 | 小 | 大(框架体积) | 中等 |