登录
React 快速入门：Vue 开发者指南
2026年3月15日 18:21
React 快速入门：Vue 开发者指南
通过对比 Vue 和 React，快速掌握 React 核心概念
一、项目结构对比
1.1 依赖管理
React (package.json)：
{
"dependencies": {
"react": "^19.2.0",
"react-dom": "^19.2.0"
}
}
Vue (package.json)：
{
"dependencies": {
"vue": "^3.4.0"
}
}
关键差异：
- React 分两个包：
react（核心库）+react-dom（DOM 渲染器） - Vue 只需要一个包
- React 设计更通用，支持多平台（Web、Native 等）
1.2 入口文件
React (main.jsx)：
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)
Vue (main.js)：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
对比：
- React 需要显式调用
render() - Vue 更简洁，一行完成创建和挂载
- React 的
StrictMode提供开发时检查
二、JSX：React 的模板语法
2.1 什么是 JSX？
JSX = JavaScript + XML，允许在 JS 中直接写 HTML 标签。
示例：
function App() {
const name = "vue";
return (
<h1 className="title">Hello {name}!</h1>
)
}
2.2 JSX vs Vue 模板
| 特性 | React JSX | Vue 模板 |
|---|---|---|
| 类名 | className |
class |
| 插值 | {name} |
{{ name }} |
| 事件 | onClick={handler} |
@click="handler" |
| 条件 | {condition && <div />} |
v-if="condition" |
| 列表 | {items.map(i => <li />)} |
v-for="i in items" |
2.3 JSX 的本质
JSX 代码：
const element = <h2>标题</h2>
编译后等价于：
const element2 = React.createElement('h2', null, '标题')
为什么使用 JSX？
- 更直观，接近 HTML
- 完整的 JavaScript 能力
- 更好的编辑器支持
三、组件基础
3.1 React 组件
// 函数就是组件
function App() {
return <h1>Hello React!</h1>
}
export default App
关键点：
- 组件是函数
- 返回 JSX
- 组件名必须大写（区分 HTML 标签）
3.2 组件组合
function Header() {
return <header><h1>首页</h1></header>
}
function Articles() {
return <div>文章列表</div>
}
function App() {
return (
<>
<Header />
<Articles />
</>
)
}
Fragment (<>)：不会创建额外 DOM 节点，类似 Vue 的 <template>
3.3 Props 传递
// 父组件
function App() {
return <UserProfile name="张三" />
}
// 子组件
function UserProfile({ name }) {
return <h1>欢迎，{name}!</h1>
}
对比 Vue：
<template>
<UserProfile :name="'张三'" />
</template>
<script setup>
const props = defineProps({ name: String })
</script>
四、状态管理：useState
4.1 基本用法
import { useState } from 'react';
function App() {
const [name, setName] = useState("vue");
return <h1>Hello {name}!</h1>
}
解析：
-
useState返回数组：[状态值，更新函数] -
"vue"是初始值 - 调用
setName()会触发重新渲染
4.2 多个状态
function App() {
const [name, setName] = useState("vue");
const [todos, setTodos] = useState([
{ id: 1, title: "学习 react" },
{ id: 2, title: "学习 node" },
]);
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<>
<h1>Hello {name}!</h1>
{isLoggedIn ? <div>已登录</div> : <div>未登录</div>}
</>
)
}
4.3 不可变更新
// ❌ 错误：直接修改
todos.push(newTodo);
setTodos(todos);
// ✅ 正确：创建新数组
setTodos([...todos, newTodo]);
// ✅ 更新对象
setUser({ ...user, age: 26 });
为什么？
- React 使用浅比较检测变化
- 不可变数据更可预测
- 支持并发特性
对比 Vue：
<script setup>
const todos = ref([])
// Vue 支持直接修改
todos.value.push(newTodo)
</script>
Vue 使用 Proxy 自动追踪变化，React 要求不可变更新。
五、事件处理
5.1 基本用法
function App() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return <button onClick={handleClick}>+1</button>
}
关键点：
- 事件名驼峰命名：
onClick（不是onclick） - 传递函数引用：
onClick={handleClick} - 不是调用：
onClick={handleClick()}❌
5.2 事件传参
function App() {
const handleDelete = (id) => {
console.log('删除:', id);
};
return (
<ul>
{todos.map(todo => (
<li key={todo.id} onClick={() => handleDelete(todo.id)}>
{todo.title}
</li>
))}
</ul>
)
}
使用箭头函数传参，简单直观。
5.3 对比 Vue
| 特性 | React | Vue |
|---|---|---|
| 语法 | onClick={handler} |
@click="handler" |
| 阻止默认行为 | e.preventDefault() |
.prevent 修饰器 |
| 事件对象 | 自动传递 | $event |
六、条件渲染
6.1 三元运算符
{isLoggedIn ? <div>已登录</div> : <div>未登录</div>}
6.2 逻辑与运算符
{isLoggedIn && <div>已登录</div>}
6.3 对比 Vue
React：
{count > 0 ? <p>{count}</p> : <p>无数据</p>}
Vue：
<p v-if="count > 0">{{ count }}</p>
<p v-else>无数据</p>
设计哲学：
- React：使用 JavaScript 原生语法
- Vue：使用模板指令
七、列表渲染
7.1 使用 map
function App() {
const todos = [
{ id: 1, title: "学习 react" },
{ id: 2, title: "学习 node" },
];
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.title}
</li>
))}
</ul>
)
}
7.2 key 的重要性
// ✅ 正确：使用唯一 ID
<li key={todo.id}>
// ❌ 错误：使用索引
<li key={index}>
为什么需要 key？
- 帮助 React 识别元素
- 优化虚拟 DOM diff
- 避免不必要的重新渲染
7.3 对比 Vue
React：
{todos.map(todo => <li key={todo.id}>{todo.title}</li>)}
Vue：
<li v-for="todo in todos" :key="todo.id">
{{ todo.title }}
</li>
八、完整示例
import { useState } from 'react';
import './App.css';
function App() {
// 状态管理
const [name, setName] = useState("vue");
const [todos, setTodos] = useState([
{ id: 1, title: "学习 react", done: false },
{ id: 2, title: "学习 node", done: false },
{ id: 3, title: "学习 js", done: false },
]);
const [isLoggedIn, setIsLoggedIn] = useState(false);
// 事件处理
const toggleLogin = () => {
setIsLoggedIn(!isLoggedIn);
}
// JSX 元素
const element = <h2>JSX 是 React 的语法扩展</h2>
return (
<>
{element}
<h1>Hello <span className="title">{name}!</span></h1>
{/* 条件渲染 + 列表渲染 */}
{todos.length > 0 ? (
<ul>
{todos.map((todo) => (
<li key={todo.id}>
{todo.title}
</li>
))}
</ul>
) : (<div>暂无待办事项</div>)}
{/* 条件渲染 */}
{isLoggedIn ? <div>已登录</div> : <div>未登录</div>}
{/* 事件绑定 */}
<button onClick={toggleLogin}>
{isLoggedIn ? "退出登录" : "登录"}
</button>
</>
)
}
export default App
代码要点：
- 使用
useState管理三个状态 - 三元运算符实现条件渲染
-
map方法实现列表渲染 - 箭头函数处理事件
- Fragment (
<>) 包裹多个元素
九、核心差异总结
9.1 设计哲学
| 方面 | React | Vue |
|---|---|---|
| 定位 | 库 (Library) | 框架 (Framework) |
| 模板 | JSX (JavaScript) | 模板语法 (HTML-like) |
| 状态更新 | 不可变 | 可变 |
| 学习曲线 | 较陡峭 | 较平缓 |
| 灵活性 | 高 | 中等 |
9.2 代码对比
React：
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
<div>
<p>计数：{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
)
}
Vue：
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<div>
<p>计数：{{ count }}</p>
<button @click="count++">+1</button>
</div>
</template>
9.3 关键记忆点
-
JSX 用
{}插值，不是{{ }} -
类名用
className，不是class -
事件用
onClick，不是@click - 状态不可变更新，不能直接修改
-
列表需要
key，使用唯一 ID -
条件用三元运算符，不是
v-if
十、常见陷阱
陷阱 1：直接修改状态
// ❌ 错误
count = count + 1;
// ✅ 正确
setCount(count + 1);
陷阱 2：忘记 key
// ❌ 错误
{items.map(item => <div>{item.name}</div>)}
// ✅ 正确
{items.map(item => <div key={item.id}>{item.name}</div>)}
陷阱 3：混淆 class
// ❌ 错误
<div class="container">
// ✅ 正确
<div className="container">
陷阱 4：事件立即执行
// ❌ 错误
<button onClick={handleClick()}>
// ✅ 正确
<button onClick={handleClick}>
十一、学习建议
11.1 学习路线
第 1 周：基础
- JSX 语法
- 组件定义
- useState
第 2 周：进阶
- 事件处理
- 条件/列表渲染
- useEffect
第 3 周：生态
- React Router
- 状态管理
- UI 组件库
11.2 思维转换
从 Vue 到 React，需要转变：
- 从模板到 JSX：接受"一切皆 JavaScript"
- 从可变到不可变：习惯创建新对象
- 从指令到函数：用原生语法替代指令
11.3 选择建议
选 React 如果：
- JavaScript 基础好
- 需要灵活性
- 想开发跨平台应用
选 Vue 如果：
- 快速上手
- 喜欢完整方案
- 主要开发 Web 应用
总结
React 核心要点：
- ✅ JSX 是 JavaScript 扩展，不是 HTML
- ✅ 组件是函数，返回 JSX
- ✅ useState 管理状态，不可变更新
- ✅ 事件用 onClick，传递函数引用
- ✅ 条件用三元运算符，列表用 map
- ✅ key 帮助优化渲染，必须提供
最后的话：
React 和 Vue 都是优秀框架，没有绝对好坏。理解差异，选择适合的，持续学习才是关键。
资源推荐：
- React 官方文档
- CodeSandbox - 在线练习
祝你学习顺利！ 🚀
