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

Lee川
13 阅读5分钟

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 JSXVue 模板
类名classNameclass
插值{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？

  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

特性ReactVue
语法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

代码要点：

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

九、核心差异总结

9.1 设计哲学

方面ReactVue
定位库 (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 关键记忆点

  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 都是优秀框架，没有绝对好坏。理解差异，选择适合的，持续学习才是关键。

资源推荐：

祝你学习顺利！ 🚀

avatar
文章
阅读
粉丝