将项目或组件从 Vue 转换到 React 时，有一些重要的概念差异和技术点需要注意。以下是按类别整理的 Vue → React 转换要点，以及常用库替代建议，便于你系统迁移：

---

🧠 核心概念差异（Vue vs React）

Vue 特性	React 对应/做法	注意点
模板语法 (<template>)	JSX 语法	React 使用纯 JS 表达 UI，需要理解 JSX 和表达式语法
data()	useState() / 类组件的 this.state	React 更偏向函数式，数据状态通过 hook 管理
methods	直接定义函数	不再有 methods 对象，直接在组件内部定义函数
computed	useMemo() 或普通函数	仅在复杂计算或依赖缓存时用 useMemo
watch	useEffect()	React 使用副作用 hook 响应状态变化
v-model	useState + onChange	双向绑定需手动处理，注意表单控件值的受控与非受控状态
props	props	二者相同，但 React 更严格：props 只读
插槽 slot	props.children 或 显式传函数	React 中使用 children 或 render props 模式
生命周期钩子	useEffect / 类组件生命周期方法	React hook 中生命周期更细粒度
v-if, v-for	{condition && …} 和 {list.map(…)}	逻辑控制用 JS 语法，灵活但容易出错

---

🔧 常用库对照表

Vue 插件/功能	React 替代库	说明
Vue Router	React Router (react-router-dom)	路由方案不同，需要掌握 <Routes>, <Route>, useNavigate() 等
Vuex	Redux, Zustand, Jotai, Recoil	Redux 是传统方案，Zustand 更简洁（推荐）
Composition API (setup())	React Hooks	思想类似，hook 更灵活也更自由
ref (ref())	useRef()	用于引用 DOM 或持久变量
<transition>	framer-motion, react-transition-group	React 没有内建动画，需要外部库
v-model	自定义 hook / 手动绑定	React 中表单需用 value + onChange 受控组件处理
插槽 Slot	props.children	简单插槽：children；复杂插槽：传入函数式子组件
指令 v-bind, v-on, v-show 等	JSX 属性 / 条件渲染	都转为 JS 表达式控制，如 style={{ display: condition ? ‘block’ : ‘none’ }}

---

💡 实战注意事项

1. 语法切换
   • JSX 严格区分 className / htmlFor（不能直接写 class）
   • 所有 HTML 属性都是 camelCase，比如 onClick、tabIndex
2. 状态提升
   • React 推荐将共享状态提升到最近公共父组件（类似 Vue 中的 prop-down / emit-up）
3. 事件处理
   • React 中事件处理用 onClick={() => …}，不同于 Vue 的 @click=”…”
4. 动画
   • Vue 的 <transition> 很方便，React 中推荐使用 framer-motion
5. 响应式风格切换
   • Vue 自动响应式（reactive），React 则靠 useState/useEffect 显式管理
6. 组件传参方式不同
   • Vue 支持具名插槽；React 更倾向使用 children 或 render props（传函数作为 prop）

---

🧪 示例对比

表单输入绑定

Vue

React

---

条件渲染

Vue

React

---

列表渲染

Vue

React

---