React → Angular 的架构对照手册

一、React → Angular 架构一一对照（工程级）

1️⃣ 项目入口 & 启动方式

👉 完全等价

2️⃣ 模板 & 组件

核心差异：

• React：JS 即模板

• Angular：HTML 是一等公民

3️⃣ 状态 & 数据流

• Angular：状态天然集中在 Service
• React：状态默认分散

4️⃣ 路由

• Angular 路由是框架级
• React 路由是库级

5️⃣ 后端交互

• Angular HTTP 是体系的一部分

二、「In-Home Scheduler」React 标准目录（实战）

这是你现在项目在 React 里最“干净”的写法

src/├── app/│ ├── App.tsx │ └── router.tsx │ ├── features/│ └── booking/│ ├── pages/│ │ ├── WelcomePage.tsx │ │ ├── InfoPage.tsx │ │ ├── AddressPage.tsx │ │ ├── SchedulePage.tsx │ │ └── ReviewPage.tsx │ │ │ ├── components/│ │ ├── BookingForm.tsx │ │ └── TimeSlotPicker.tsx │ │ │ ├── booking.api.ts │ ├── booking.store.ts │ ├── booking.hooks.ts │ └── booking.types.ts │ ├── shared/│ ├── components/│ ├── hooks/│ ├── utils/│ └── ui/│ ├── styles/└── main.tsx

每一层在 Angular 中对应什么？

• 这是 React 最接近 Angular 的写法

三、React 架构 vs Angular 架构的“本质差异”

这一段是关键认知差异，不是 API。

1️⃣ React 的哲学：自由 + 组合

React 只管一件事：UI = f(state)

结果：

• 架构是你设计的

• 好项目 → 非常优雅

• 坏项目 → 一团浆糊

React 是 “搭积木”

2️⃣ Angular 的哲学：约束 + 完整性

Angular 提供的是：一个完整应用框架

结果：

• 架构不太容易写歪

• 上手慢

• 维护稳定

Angular 是 “装配式建筑”

3️⃣ 谁更适合什么？

一句话终极总结

React 是“工具箱”，
Angular 是“工程体系”。