全书目录

前端门店区

第二章：UI 框架 —— 你要怎么盖门店

3 分钟 1,105 字 第 2 / 962 个阅读单元

这一章里，把 UI 框架看成“门店装修工法”。同样是一家店，React 像国际连锁施工队，Vue 像规划整齐的新城区施工队，Angular 像高铁系统总包，Svelte/Solid/Qwik 则像更激进的新工法。

UI 框架解决的是一件事：用户眼前这家店，到底怎么画出来、怎么更新、怎么响应点击。

#1. React —— 国际交通枢纽型门店系统

tsx
import { useState } from 'react';

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

React 的核心心智模型是：

  • 组件是函数
  • UI 是 state/props 的快照
  • 状态变了，组件重新执行

适合：

  • 大型前端团队
  • 生态优先
  • 要和 Next.js、React Native、各种库深度协同

不太适合：

  • 你想要一套“官方直接打包好”的完整方案
  • 你不想处理太多生态选择题

#2. Vue —— 规划整齐的新城区门店系统

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

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

Vue 的强项是：

  • 模板更接近 HTML
  • 响应式系统很直观
  • 官方生态更“成套”

适合：

  • 中后台
  • 中大型业务应用
  • 希望比 React 更统一、比 Angular 更轻

#3. Angular —— 高铁系统式门店总平台

ts
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `<button (click)="count.update(v => v + 1)">Count: {{ count() }}</button>`,
})
export class CounterComponent {
  count = signal(0);
}

Angular 不是“只给你一个 UI 层”，而是直接给你：

  • 组件
  • DI
  • 路由
  • 表单
  • CLI
  • 工程规范

适合：

  • 大团队
  • 企业应用
  • 长生命周期系统

#4. Svelte —— 预制装配式门店

svelte
<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>Count: {count}</button>

Svelte 的思路是：很多活在编译期做完，浏览器里少跑一点。

适合：

  • 追求简洁开发体验
  • 包体积敏感
  • 希望少样板代码

#5. Solid —— 精密数控机床式门店

tsx
import { createSignal } from 'solid-js';

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

Solid 的核心不是“组件反复重跑”，而是谁依赖了数据，就只更新谁。

适合：

  • 高交互控制台
  • 性能敏感界面
  • 团队喜欢 JSX，但不想完全接受 React 那套重渲染心智

#6. Qwik —— 先布线、后唤醒的边缘门店

tsx
import { component$, useSignal } from '@builder.io/qwik';

export default component$(() => {
  const count = useSignal(0);
  return <button onClick$={() => count.value++}>Count: {count.value}</button>;
});

Qwik 最特别的地方是 resumability：

  • 服务端先把页面“暂停好”
  • 浏览器里再“恢复”
  • 尽量避免传统 hydration 的整套启动成本

适合：

  • 首屏极敏感
  • 弱网场景
  • 边缘部署

UI 框架速查：

框架 最像什么 默认优势 默认代价
React 国际枢纽 生态最强 选择题最多
Vue 新城区 易学、平衡 极限组织治理不如 Angular
Angular 高铁系统 组织级规范最强 重
Svelte 预制工厂 代码简洁、产物轻 企业生态没前三者厚
Solid 精密机床 细粒度更新 招聘池和生态更小
Qwik 边缘唤醒系统 首屏与启动思路先进 架构心智更新

到 2026-03-28 为止，默认主流盘仍然是 React / Vue / Angular。Svelte 是强势替代路线，Solid 和 Qwik 更像定向高性能武器。