一、React → Angular 架构一一对照（工程级）
1️⃣ 项目入口 & 启动方式
| React | Angular | 说明 |
|---|---|---|
main.tsx | main.ts | 启动入口 |
App.tsx | AppComponent | 应用根 |
createRoot().render() | bootstrapApplication() | 启动方式 |
👉 完全等价
2️⃣ 模板 & 组件
| React | Angular |
|---|---|
| JSX | HTML Template |
| Function Component | Component Class |
props | @Input() |
| callback | @Output() |
核心差异：
React：JS 即模板
Angular：HTML 是一等公民
3️⃣ 状态 & 数据流
| React | Angular |
|---|---|
useState | Component State |
useEffect | 生命周期 + RxJS |
| Zustand / Redux | Service + Observable |
| props drilling | DI 注入 |
- Angular：状态天然集中在 Service
- React：状态默认分散
4️⃣ 路由
| React | Angular |
|---|---|
react-router | @angular/router |
Routes.tsx | app.routes.ts |
useParams() | ActivatedRoute |
- Angular 路由是框架级
- React 路由是库级
5️⃣ 后端交互
| React | Angular |
|---|---|
| axios / fetch | HttpClient |
| 手动封装 | 内建拦截器 |
| token 手写 | interceptor |
- 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 |
|---|---|
features/booking | booking/module |
pages/ | routed components |
components/ | dumb components |
booking.store.ts | service + subject |
booking.api.ts | http service |
- 这是 React 最接近 Angular 的写法
三、React 架构 vs Angular 架构的“本质差异”
这一段是关键认知差异，不是 API。
1️⃣ React 的哲学：自由 + 组合
React 只管一件事：UI = f(state)
结果：
架构是你设计的
好项目 → 非常优雅
坏项目 → 一团浆糊
React 是 “搭积木”
2️⃣ Angular 的哲学：约束 + 完整性
Angular 提供的是：一个完整应用框架
结果：
架构不太容易写歪
上手慢
维护稳定
Angular 是 “装配式建筑”
3️⃣ 谁更适合什么？
| 场景 | 更适合 |
|---|---|
| 企业级表单 / 流程 | ✅ Angular |
| Scheduler / 医疗流程 | ✅ Angular |
| 高交互 UI | React |
| 原型 / MVP | React |
| 多人长期维护 | Angular |
一句话终极总结
React 是“工具箱”，
Angular 是“工程体系”。
