React 快速入门：Vue 开发者指南
作者：互联网
2026-03-20
Javascript教程
React 快速入门：Vue 开发者指南
一、项目结构对比
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 && } | v-if="condition" |
| 列表 | {items.map(i => )} | 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 的
3.3 Props 传递
// 父组件
function App() {
return <UserProfile name="张三" />
}
// 子组件
function UserProfile({ name }) {
return <h1>欢迎，{name}!h1>
}
对比 Vue：
四、状态管理：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：
Vue 使用 Proxy 自动追踪变化，React 要求不可变更新。
五、事件处理
5.1 基本用法
function App() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return <button onClick={handleClick}>+1button>
}
关键点：
- 事件名驼峰命名：
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：
{{ count }}
无数据
设计哲学：
- 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
id}>
// 错误：使用索引
<li key={index}>
为什么需要 key？
- 帮助 React 识别元素
- 优化虚拟 DOM diff
- 避免不必要的重新渲染
7.3 对比 Vue
React：
{todos.map(todo => <li key={todo.id}>{todo.title}li>)}
Vue：
{{ todo.title }}
八、完整示例
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)}>+1button>
div>
)
}
Vue：
计数：{{ count }}
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
// 错误
class="container">
// 正确
<div className="container">
陷阱 4：事件立即执行
// 错误
十一、学习建议
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 - 在线练习
祝你学习顺利！
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
最新版vue3+TypeScript开发入门到实战教程之路由详解二
03/28
src-components调用链与即时聊天组件树
03/28
从0开始设计一个树和扁平数组的双向同步方案
03/28
拒绝 rem 计算！Vue3 大屏适配，我用 vfit 一行代码搞定
03/28
Home双router-view与布局切换逻辑
03/28
uniapp uview-plus 自定义动态验证
03/28
Vue3 单元测试实战：从组合式函数到组件
03/28
VUE-组件命名与注册机制
03/28
VTJ.PRO 在线应用开发平台概览
03/28
v0.dev 支持 RSC 了！AI 生成全栈组件离我们还有多远？
03/28
AI精选
