Vue3转React：首日入门指南-优快云博客

从Vue3到React：Day 1 - React基础概念

React简介

React是一个由Facebook开发的JavaScript库，专注于构建用户界面。与Vue3不同，React采用单向数据流和虚拟DOM技术，强调组件化和声明式编程。核心思想是通过组件组合构建应用，每个组件管理自身的状态和渲染逻辑。

JSX语法

React使用JSX（JavaScript XML）语法，允许在JavaScript中直接编写类似HTML的结构。JSX会被Babel转译为React.createElement()调用。

const element = <h1>Hello, React!</h1>;

与Vue的单文件组件（SFC）不同，JSX没有模板语法和指令系统（如v-if），而是直接使用JavaScript表达式：

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <WelcomeMessage /> : <LoginButton />}
    </div>
  );
}

组件定义

React组件分为函数组件和类组件两种形式。现代React推荐使用函数组件+Hooks的组合。

函数组件示例：

function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

类组件示例（旧版）：

class Button extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        {this.props.children}
      </button>
    );
  }
}

Props传递

Props是React中父组件向子组件传递数据的方式，遵循单向数据流原则。与Vue的props类似，但不需要预先声明prop类型（除非使用TypeScript或PropTypes）。

function UserCard({ name, avatar }) {
  return (
    <div>
      <img src={avatar} alt={name} />
      <h2>{name}</h2>
    </div>
  );
}

// 使用组件
<UserCard name="John" avatar="/path/to/image.jpg" />