Vue3转React速查表

Vue: 基于可变数据 (Mutable)自动依赖追踪(响应式系统)。React: 基于不可变数据 (Immutable)显式依赖数组(手动触发更新)。1. 核心概念映射表 (Cheat Sheet)| 功能 | Vue 3 (Composition API) | React (Hooks) | 关键差异点 || :--- | :--- | :--- | : ||状态定义|const count ref(0)|const [count, setCount] useState(0)| Vue 直接修改count.valueReact 必须调用setCount||计算属性|const double computed(() count.value * 2)|const double useMemo(() count * 2, [count])| React 需手动指定依赖[count]||副作用|watchEffect(() { ... })watch(source, cb)|useEffect(() { ... }, [deps])| React 的useEffect同时涵盖 mount/update/unmount ||清理副作用|onUnmounted(() ...)(在 watch 中 return) |useEffect(() { return () ... }, [])| 清理函数在 return 中返回 ||模板/JSX|template{{ count }}/template|return div{count}/div| React 直接用 JS 表达式无插值符号{{ }}||条件渲染|v-ifisOk|{ isOk div.../div }| React 使用逻辑与运算符或三元表达式 ||列表渲染|v-foritem in list :keyitem.id|{list.map(item div key{item.id})}| React 必须显式写map和key||事件绑定|clickhandleClick|onClick{handleClick}| React 用驼峰onClick传函数引用 (不调用) ||双向绑定|v-modeltext|value{text} onChange{(e) setText(e.target.value)}| React 没有内置指令需手动绑定 value onChange ||组件通信|props,emit(event)|props,callback props| React 单向数据流子传父通过回调函数 ||插槽|slot /,slot nameheader|props.children,props.header| React 把插槽当作 props 传递 (通常是 children) ||生命周期|onMounted,onUpdated|useEffect(..., [])(Mount)useEffect(..., [deps])(Update) | React 将生命周期合并进useEffect||样式绑定|:class{ active: isActive }|className{isActive ? active : }| React 用className逻辑需用 JS 三元或库 (clsx) ||Refs/DOM|const el ref(null)div refel|const el useRef(null)div ref{el}| Vue ref 取值.valueReact ref 取值.current|2. 代码实战对比 (Side-by-Side)场景 A: 基础计数器 (State Events)Vue 3:script setup import { ref } from vue; const count ref(0); const increment () count.value; /script template button clickincrementCount: {{ count }}/button /templateReact:import { useState } from react; function Counter() { const [count, setCount] useState(0); const increment () setCount(prev prev 1); // 习惯用函数式更新 return ( button onClick{increment}Count: {count}/button ); }注意: React 中事件处理函数不要加括号()除非你需要传参此时用箭头函数包裹。场景 B: 异步数据获取 (Effects)Vue 3:script setup import { ref, onMounted } from vue; const data ref(null); const loading ref(false); const fetchData async () { loading.value true; data.value await fetch(/api).then(r r.json()); loading.value false; }; onMounted(fetchData); /scriptReact:import { useState, useEffect } from react; function DataFetcher() { const [data, setData] useState(null); const [loading, setLoading] useState(false); useEffect(() { let isMounted true; // 防止组件卸载后更新状态 const fetchData async () { setLoading(true); const res await fetch(/api); const json await res.json(); if (isMounted) setData(json); setLoading(false); }; fetchData(); // 清理函数 (对应 onUnmounted) return () { isMounted false; }; }, []); // 空依赖数组 只在挂载时运行 return div{loading ? Loading... : JSON.stringify(data)}/div; }场景 C: 父子组件通信 (Props Callbacks)Vue 3:!-- Child.vue -- script setup defineProps([msg]); const emit defineEmits([update]); /script template button clickemit(update, new value){{ msg }}/button /templateReact:// Child.jsx function Child({ msg, onUpdate }) { return ( button onClick{() onUpdate(new value)}{msg}/button ); } // Parent.jsx Child msgHello onUpdate{(val) console.log(val)} /关键点: React 没有$emit。父组件传递一个函数作为 prop子组件调用该函数。场景 D: 列表与条件渲染Vue 3:template ul v-ifitems.length li v-foritem in items :keyitem.id {{ item.name }} /li /ul p v-elseNo items/p /templateReact:return ( {items.length 0 ? ( ul {items.map(item ( li key{item.id}{item.name}/li ))} /ul ) : ( pNo items/p )} / );技巧: 推荐使用clsx或classnames库来处理复杂的 class 拼接替代 Vue 的对象语法。3. 生态库迁移指南 (Vue - React)类别Vue 3 生态React 推荐生态 (2026标准)备注路由Vue RouterReact Router v6/v7 或 Next.js App RouterNext.js 是首选内置路由状态管理Pinia / VuexZustand (最流行), Redux Toolkit, JotaiZustand 最像 Pinia简单无样板HTTPAxios / VueUseTanStack Query (React Query), AxiosReact Query 是服务端状态管理的神器表单VeeValidate / FormKitReact Hook Form, Zod (校验)React Hook Form 性能极佳UI 组件库Element Plus / AntDVAnt Design, MUI, Shadcn/ui (最火)Shadcn/ui 是复制代码而非安装包极度灵活工具函数VueUseLodash, date-fns, clsxReact 没有官方工具集社区组合使用CSS 方案Scoped CSS / SCSSTailwind CSS (主流), CSS Modules, Styled-componentsTailwind 在 React 生态中占据统治地位4. 避坑指南Vue 开发者转 React 的常见错误直接修改 State❌Vue:count.value✅React:count❌ (不会触发重渲染)React:setCount(count 1)✅在 Render 函数中执行副作用❌不要在组件函数体直接写fetch()或console.log(render)(除非受控)这会导致无限循环。必须放在useEffect中。依赖数组遗漏⚠️Vue 自动追踪依赖。React 必须手动在useEffect或useMemo的[]中列出所有用到的变量否则会遇到“闭包陷阱”拿到旧值。Key 的使用⚠️Vue 有时不写 key 也能跑。React必须为map生成的列表提供稳定的key(不要用 index除非列表静态)。Ref 的取值⚠️Vue:myRef.valueReact:myRef.current(且修改ref.current不会触发重渲染它用于存储可变但不需要视图更新的值)。