学会Vue上手React需要多久？我来试试？（比较一下Vue和React的基础业务模型的写法）

Hi! 这里是JustHappy ，这是一篇对于我这种有一定的Vue基础 的前端boy上手React的笔记，希望通过对比Vue和React在基础业务处理方法上的区别快速上手React，也希望可以对同样情况的同学有所帮助

React 环境搭建 && 初识 react

创建第一个React应用

虽然目前来看有许多React的脚手架，比如说Next.js,Umi等等等等，但是这些脚手架往往集成了很多功能，在初学阶段显得有些冗余，所以我选择create-react-app这个脚手架，这可以类比Vue生态里的Vue-CLI，只不过create-react-app是更加简单的，不像Vue-CLI在项目创建时候会提供很多自定义选项，create-react-app只会生成一个最基本的react项目结构。

运行以下命令创建你的第一个React项目，当然你也可以使用cnpm或者pnpm

npx create-react-app my-app
# 或者
npm init react-app my-app

让我们来对标一下React和Vue的使用规则吧

列表渲染： v-for 🆚 JSX

列表渲染大家应该再熟悉不过了，在Vue中我们通常用v-for来实现，而在React的JSX中我们需要使用原生的map方法来实现，就像下面这样

const List = ({ items }) => {
    return (
        <ul>
            {items.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
};

条件渲染： v-if 🆚 JSX

• 单个元素

在 Vue 中，我们使用 v-if 来控制单个元素的显示与隐藏：

<div v-if="isVisible">内容</div>

在 React 中，我们可以使用逻辑运算符 && 来实现类似的效果：

{isVisible && <div>内容</div>}

• 两个元素

在 Vue 中，我们可以通过 v-if 和 v-else 来控制两个元素的显示：

<div v-if="isVisible">内容1</div>
<div v-else>内容2</div>

在 React 中，我们可以使用三元运算符来实现：

{isVisible ? <div>内容1</div> : <div>内容2</div>}

• 复杂情况

其实就是下面这样，相信你一眼也可以看懂

vue：

<div v-if="condition1">内容1</div>
<div v-else-if="condition2">内容2</div>
<div v-else>内容3</div>

React：

{condition1 ? (
    <div>内容1</div>
) : condition2 ? (
    <div>内容2</div>
) : (
    <div>内容3</div>
)}

事件绑定：@click 🆚 onClick

在 Vue 中，我们使用 @click 来绑定点击事件：

<button @click="handleClick">点击我</button>

在React中，我们使用 onClick

<button onClick={handleClick}>点击我</button>

双向数据绑定？ v-model 🆚 useState

好的！以下是 React 和 Vue 在双向数据绑定方面的写法区别：

Vue 中的双向数据绑定

Vue 中使用 v-model 实现双向数据绑定，非常直观和简洁。v-model 会自动同步表单输入和组件的响应式数据。

<template>
  <div>
    <input v-model="message" placeholder="输入内容" />
    <p>你输入的内容是：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "" // 初始值为空
    };
  }
};
</script>

在 Vue 中，v-model 会自动处理输入框的 input 事件，并更新绑定的数据。

React 中的双向数据绑定

React 没有内置的 v-model，但可以通过组合 state 和事件处理函数来实现类似的效果。以下是实现双向数据绑定的步骤：

import React, { useState } from "react";

const InputComponent = () => {
  const [message, setMessage] = useState(""); // 定义状态

  const handleChange = (event) => {
    setMessage(event.target.value); // 更新状态
  };

  return (
    <div>
      <input
        type="text"
        value={message} // 将状态绑定到输入框
        onChange={handleChange} // 处理输入事件
        placeholder="输入内容"
      />
      <p>你输入的内容是：{message}</p>
    </div>
  );
};

export default InputComponent;

下篇再见哦～～～～～