React 快速入门：Vue 开发者指南

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 模板

2.3 JSX 的本质

JSX 代码：

const element = <h2>标题</h2>

编译后等价于：

const element2 = React.createElement('h2', null, '标题')

为什么使用 JSX？

1. 更直观，接近 HTML
2. 完整的 JavaScript 能力
3. 更好的编辑器支持

三、组件基础

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

六、条件渲染

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

代码要点：

1. 使用 useState 管理三个状态
2. 三元运算符实现条件渲染
3. map 方法实现列表渲染
4. 箭头函数处理事件
5. Fragment (<>) 包裹多个元素

九、核心差异总结

9.1 设计哲学

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 关键记忆点

1. JSX 用 {} 插值，不是 {{ }}
2. 类名用 className，不是 class
3. 事件用 onClick，不是 @click
4. 状态不可变更新，不能直接修改
5. 列表需要 key，使用唯一 ID
6. 条件用三元运算符，不是 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，需要转变：

1. 从模板到 JSX：接受"一切皆 JavaScript"
2. 从可变到不可变：习惯创建新对象
3. 从指令到函数：用原生语法替代指令

11.3 选择建议

选 React 如果：

• JavaScript 基础好
• 需要灵活性
• 想开发跨平台应用

选 Vue 如果：

• 快速上手
• 喜欢完整方案
• 主要开发 Web 应用

总结

React 核心要点：

1. JSX 是 JavaScript 扩展，不是 HTML
2. 组件是函数，返回 JSX
3. useState 管理状态，不可变更新
4. 事件用 onClick，传递函数引用
5. 条件用三元运算符，列表用 map
6. key 帮助优化渲染，必须提供

最后的话：

React 和 Vue 都是优秀框架，没有绝对好坏。理解差异，选择适合的，持续学习才是关键。

资源推荐：

• React 官方文档
• CodeSandbox - 在线练习

祝你学习顺利！