教你快速从Vue 开发者 → React开发者转变！-创锋一号

前言

工作这么多年，一直用的都是vue，对vue框架也最熟悉，但最近想深入学习react，之前也学过，只懂一点皮毛，对很多写法还是不理解，我就在想既然我比较熟悉vue，那能不能设计一份react和vue的转化总结，这样用理解vue的方式来学习react那就事半功倍了。

现在AI这么方便，我就把我的需求说给chatGPTchatGPTchatGPT

了，他帮我设计了一份 VueVue开发者 →ReactReact

转化总结与对照表和一份学习计划。

真的一目了然，特别好理解，在上周末我根据这两份计划很快的上手了react框架，也顺利完成一个小型的react项目，这次没有一知半解！

虽然AI可以帮我写代码，但我们自己还是得掌握，不然可能连代码都看不懂，怎么去进行调试呢

AI帮我们写90%，那剩下10%就要自己来了！

AI真的很好用，它可以帮助我们快速学习任何我们想学习的，还是使用最简单易上手的方式！

以下就是对照表以及学习计划了，希望对想快速上手react的小伙伴有点借鉴意义！

核心思想对比

Vue

使用模板（HTML-like template）
自动依赖追踪的响应式系统
指令系统（v-if / v-for / v-model）
双向绑定常见
更“框架化”，封装度高

React

UI = f(state) 的函数式思想
使用 JSX（模板+JS融合）
没有自动依赖追踪，需要手动声明（useEffect）
单向数据流
更灵活、更偏底层

API 对照表

核心 API 对照

Vue	React	说明
data()	useState	声明组件状态
computed	useMemo	计算属性
watch	useEffect	监听值变化或模拟生命周期
方法（methods）	普通函数	不需要特殊 API
ref()	useRef	DOM 或变量引用
provide / inject	createContext + useContext	跨组件传递数据
v-model	onChange + useState	双向绑定自己实现
v-if	JS 表达式（条件渲染）	{ condition && <Component /> }
v-for	arr.map()	列表渲染
组件通信（props）	props	完全一致
子组件事件（emit）	父传入回调函数	回调作为 props

生命周期迁移

Vue → React 生命周期对照表

Vue	React
onMounted	useEffect(() => {}, [])
onUpdated	useEffect(() => {})
onUnmounted	useEffect(() => return cleanup, [])
onActivated	无，需要自定义
onDeactivated	无，需要自定义
beforeMount / beforeUpdate	无（通常不需要）

示例：Vue → React 生命周期对比

Vue

<script setup> onMounted(() => console.log("mounted")) onUnmounted(() => console.log("unmounted")) </script>

React

useEffect(() => { console.log("mounted"); return () => console.log("unmounted"); }, []);

状态管理迁移

Vue → React 状态管理选择

Vue	React 等价方案	特点
Pinia

Zustand

写法最像，轻量好用（推荐）
Vuex	Redux Toolkit	官方推荐、企业级
composables	自定义 Hooks	逻辑复用方式几乎一样
reactive()	useState/useReducer	响应式状态

Zustand（最适合 Vue 开发者）

Zustand 使用方式类似 Pinia，推荐入门 React 状态管理就用它。

示例：Zustand vs Pinia

Pinia

export const useUserStore = defineStore('user', { state: () => ({ name: 'Echo' }), actions: { setName(name) { this.name = name } } })

Zustand

const useUserStore = create((set) => ({ name: "Echo", setName: (name) => set({ name }), }));

几乎一模一样。

路由迁移

Vue Router → React Router

对照表

Vue Router	React Router
routes 数组	<Routes><Route/></Routes>
router.push()	useNavigate()
获取参数	useParams()
路由守卫	自定义鉴权组件包裹 Route

Vue 路由

const routes = [ { path: '/user/:id', component: User } ]

React 路由

<Routes> <Route path="/user/:id" element={<User />} /> </Routes>

读取参数：

const { id } = useParams()

项目结构对照

Vue 项目结构

src/ components/ views/ store/ router/ composables/ assets/

React 推荐结构

src/ components/ # 公共组件 pages/ # 页面级组件 hooks/ # 自定义 Hooks store/ # 状态管理（Zustand / Redux） router/ # 路由定义 services/ # API 请求封装 assets/

思维模型转化总结

1. 模板 → JSX（最大的差异）

Vue：

<v-if="ok">hello</v-if>

React：

{ok && <div>hello</div>}

2. 自动响应式 → 显式依赖声明

Vue 自动追踪
React 必须写依赖数组

3. 逻辑复用方式变化

Vue compositions → React 自定义 Hooks

4. 组件通信完全一致（props）

但事件改为父传回调函数

5. React 更纯粹、更 JavaScript 化

少魔法、少黑盒、更多掌控权。

学习计划（适合 Vue 开发者）

📘 阶段 1：核心理念与基础 JSX

⭐ 核心目标

理解 React 哲学（UI = f(state)）
能用 JSX 编写组件、列表、事件

✅ 实战 1：Hello React + 计数器

1. 新建项目（Vite）

npm create vite@latest react-basic --template react cd react-basic npm install npm run dev

2. 编写一个计数器（App.jsx）

import { useState } from "react"; export default function App() { const [count, setCount] = useState(0); return ( <div style={{ padding: 20 }}> <h1>计数器</h1> <p>当前值：{count}</p> <button onClick={() => setCount(count + 1)}>增加</button> </div> ); }

📝 Vue 对照：

<script setup> const count = ref(0) </script> <button @click="count++">{{ count }}</button>

🌱 实践任务

写一个从 1 增加到 100 的进度条动画
写一个列表渲染组件（todoList）

📘 阶段 2：Hooks 深入

⭐ 核心要点

useState
useEffect（替代 watch / 生命周期）
useMemo / useCallback（性能）
useRef（替代 Vue的模板 ref）
自定义 hooks（对 Vue 用户最重要）

✅ 实战 2：useEffect 生命周期模拟

Vue → React 生命周期对照

Vue	React
onMounted	useEffect(() => {}, [])
onUpdated	useEffect(() => {})
onUnmounted	return () => {}

例子：监听窗口大小

import { useState, useEffect } from "react"; export default function WindowSize() { const [size, setSize] = useState({ w: window.innerWidth, h: window.innerHeight }); useEffect(() => { const onResize = () => { setSize({ w: window.innerWidth, h: window.innerHeight }); }; window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); return <div>窗口大小：{size.w} x {size.h}</div>; }

✅ 实战 3：自定义 Hook（重要）

Vue 组合式 API 与 React 自定义 hook 是一样的概念。

useFetch.js

import { useState, useEffect } from "react"; export function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { fetch(url) .then((r) => r.json()) .then((json) => { setData(json); setLoading(false); }); }, [url]); return { data, loading }; }

使用它

import { useFetch } from "./useFetch"; export default function UserList() { const { data, loading } = useFetch("https://jsonplaceholder.typicode.com/users"); if (loading) return <p>加载中...</p>; return ( <ul> {data.map((u) => <li key={u.id}>{u.name}</li>)} </ul> ); }

🌱 实践任务

写一个useLocalStorage(key, defaultValue)
写一个useCountdown(秒)
写一个useDebounce(value, delay)

📘 阶段 3：React Router

✅ 项目结构

src/ pages/ Home.jsx Detail.jsx main.jsx App.jsx

安装

npm install react-router-dom

✅ 实战 4：配置基础路由

import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from "./pages/Home"; import Detail from "./pages/Detail"; export default function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/detail/:id" element={<Detail />} /> </Routes> </BrowserRouter> ); }

Detail.jsx

import { useParams } from "react-router-dom"; export default function Detail() { const { id } = useParams(); return <h2>详情页面 - ID: {id}</h2>; }

🌱 实践任务

写一个商品列表页 + 商品详情页
点击列表项跳转到详情页

📘 阶段 4：状态管理

为了更像 Vue 的 Pinia，你会更喜欢Zustand。

👉 为什么不用 Redux？

Redux 心智负担大（action/reducer/immutable）
Zustand 更像 Pinia：简单、轻巧、API优雅

📦 安装 Zustand

npm install zustand

✅ 实战 5：创建用户 store（类似 Pinia）

src/store/user.js

import { create } from "zustand"; export const useUserStore = create((set) => ({ name: "Echo", setName: (name) => set({ name }), }));

在组件里使用

import { useUserStore } from "../store/user"; export default function Profile() { const { name, setName } = useUserStore(); return ( <div> <p>用户名：{name}</p> <input onChange={(e) => setName(e.target.value)} /> </div> ); }

🌱 实践任务

给 store 增加：token / userInfo / logout
全局 Layout 读取用户信息

📘 阶段 5：接口请求与工程化

✅ 实战 6：axios 封装

/src/api/request.js

import axios from "axios"; const request = axios.create({ baseURL: "https://api.example.com", timeout: 8000, }); request.interceptors.response.use((res) => res.data); export default request;

使用 useRequest Hook（可复用）

import { useEffect, useState } from "react"; import request from "../api/request"; export function useRequest(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { request(url).then((res) => { setData(res); setLoading(false); }); }, [url]); return { data, loading }; }

📘 阶段 6：综合项目

做一个后台管理系统模版（React）：

功能组成

登录页
Layout 布局（侧边栏 + Header）
react-router 路由守卫
表格 CRUD（增删改查）
Zustand 全局状态（保存用户）

企业官网建设流程全解析

前言

核心思想对比

Vue

React

API 对照表

核心 API 对照

生命周期迁移

Vue → React 生命周期对照表

示例：Vue → React 生命周期对比

Vue

React

状态管理迁移

Vue → React 状态管理选择

Zustand（最适合 Vue 开发者）

Pinia

Zustand

路由迁移

Vue Router → React Router

对照表

Vue 路由

React 路由

项目结构对照

Vue 项目结构

React 推荐结构

思维模型转化总结

1. 模板 → JSX（最大的差异）

2. 自动响应式 → 显式依赖声明

3. 逻辑复用方式变化

4. 组件通信完全一致（props）

5. React 更纯粹、更 JavaScript 化

学习计划（适合 Vue 开发者）

📘 阶段 1：核心理念与基础 JSX

⭐ 核心目标

✅ 实战 1：Hello React + 计数器

1. 新建项目（Vite）

2. 编写一个计数器（App.jsx）

🌱 实践任务

📘 阶段 2：Hooks 深入

⭐ 核心要点

✅ 实战 2：useEffect 生命周期模拟

Vue → React 生命周期对照

例子：监听窗口大小

✅ 实战 3：自定义 Hook（重要）

useFetch.js

使用它

🌱 实践任务

📘 阶段 3：React Router

✅ 项目结构

安装

✅ 实战 4：配置基础路由

Detail.jsx

🌱 实践任务

📘 阶段 4：状态管理

👉 为什么不用 Redux？

📦 安装 Zustand

✅ 实战 5：创建用户 store（类似 Pinia）

src/store/user.js

在组件里使用

🌱 实践任务

📘 阶段 5：接口请求与工程化

推荐：axios 封装 + useRequest Hook

✅ 实战 6：axios 封装

/src/api/request.js

使用 useRequest Hook（可复用）

📘 阶段 6：综合项目

功能组成

热门文章

文章分类

标签云

相关文章

需要专业的网站建设服务？