主要还是回顾react相关优势和考点

---

① 文件结构（Single File Component vs 多模块）

Vue2	React（Ant Design Pro）
单文件 .vue（template + script + style 一体）	多文件拆分（tsx + hooks + components）或者全部写在 index.tsx 也可以
组件写在 <template />	UI JSX 写在 return (…)
script 逻辑写在 <script>	逻辑全部写在函数组件内部（hooks）
style 在 <style scoped>	多用 AntD 自带样式，几乎不写 CSS

核心差别：Vue把一切打包在一个文件里，而React倾向拆分或合并 JSX + 逻辑，但样式基本不写。

---

② 状态管理（data、methods vs hooks）

Vue2	React
data: {}	useState()
methods: {}	函数组件内部直接写功能函数
this.xxx	没有 this，直接用变量
生命周期 mounted、watch	useEffect

React 更轻，更直观：函数就是组件，变量就是状态。

---

③ 模板语法（template vs JSX）

Vue2	React
v-if / v-for / v-model	条件渲染、数组 map、受控组件
双花括号 {{}}	单花括号 {}
事件 @click	onClick
slot/插槽	props.children

JSX 更接近原生 JS，没有那么多语法糖。

---

④ 组件库差异（ElementUI vs Ant Design Pro）

Vue2 使用 Element UI	React 使用 Ant Design Pro + AntD
Table / Dialog / Form 都是 Element 实现	ProTable / Modal / Form 由 AntD 实现
大量需要手写样式	90% 组件自带样式，基本不用写 CSS
事件写法：@click="fn"	事件写法：onClick={fn}

React + AntD Pro 的界面更多自动化，不需要写一堆 SCSS。

---

⑤ API 调用（axios service vs umi-request + TS）

Vue2	React
axios service	request 封装可自动类型推断
无类型	TypeScript 全类型约束
通过 this 调用方法	直接导入函数调用

React 更规范、更安全，不会乱传参数。

---

⑥ 路由（Vue Router vs Umi Routes）

Vue2	React（Umi）
routes.js 配路由	Umi 自动约定式路由（文件名就是路由）
<router-view />	<Outlet /> 或直接页面内容
动态路由写法不同	简化、自动化

你现在只需把 index.tsx 放对位置，路由自动生效。

---

⑦ 样式（SCSS scoped vs CSS-in-JS / 无需样式）

Vue2	React
<style scoped>	大部分组件无需写样式
/deep/ 穿透	不需要，用 className 即可
经常要自己写布局	AntD 自带布局，非常完整

React 最大的变化是：你几乎不用写 CSS。

---

⑧ 页面组成方式（逻辑与 UI 的组织）

Vue2	React
template 写 UI script 写逻辑 style 写 css	单文件 index.tsx 内：逻辑 + JSX UI（你现在的方案）
三块分离	逻辑与 UI 更紧密，样式简化

React 组件没有固定三段式，非常灵活。

---

🌟 一张图总结迁移：

Vue 原来：

list.vue
  ├── <template>   （UI）
  ├── <script>     （逻辑）
  └── <style>      （样式）

React 现在：

customerClues/
  ├── index.tsx  ← UI + 逻辑（一个文件）
  ├── services/cluesApi/index.ts ← API
  └── config.ts (mixins)
 

样式？AntD 自带，不用写。

---

🎯 最核心的几点你必须记住

✔ React 页面不需要写 style

你能看到你现在 index.tsx 已经直接能跑 UI。

✔ Vue 的 script 逻辑全部变成 React Hooks

你现在的页面已经包含父页面全部逻辑。

✔ Vue 的组件都要换成 AntD / ProComponents

ProTable = 更强的 Table
Modal = 和 Element 很接近
Form = 更强大

✔ Vue 的路由已由 Umi 自动处理

只要你把 index.tsx 放在目录就能访问。