❤React和vue写法区别使用，看完这篇你就会写React了

0 前言

这篇文章将对React和Vue之间的区别做一些总结，帮助你更好的从Vue无缝过渡向React项目，或者互相印证彼此之间的缺陷和相互借鉴的地方。

1、技术全家桶

vue之中我们一般使用

**Vue**使用的
**Vue Router** 路由
**Axios** 发起网络请求
echarts  可视化图表
nprogress 加载进度条



vue2 
element ui组件库 
**Vuex** 官方推荐状态管理库
webpack 


vue3 
elementPlus ui组件库 
pinia 状态管理库
vite 

React之中我们一般使用

react-redux 状态管理
react-router-dom 路由

echarts  可视化图表
nprogress 加载进度条

2、语法区别

类名写法上：

class 更改为className

//vue语法
<div class="nexusbg">

//jsx语法
<div className="nexusbg">

动态类名写法上

JavaScript 表达式

<div className={`my-component ${isActive ? 'active' : 'inactive'}`}> 
{/* 根据 isActive 属性动态设置类名 */} 
{/* 如果 isActive 为 true，则添加 active 类名；否则添加 inactive 类名 */} Content </div>

条件语句

<div className={isLoggedIn ? 'user-profile' : 'login-page'}> 
{/* 根据 isLoggedIn 属性动态设置类名 */} 
{/* 如果用户已登录，则使用 user-profile 类名；否则使用 login-page 类名 */} Content </div>

模板字符串写法

<div className={`my-component ${themeClass}`}> 
    {/* 根据 theme 属性动态设置类名 */} 
    {/* 使用模板字符串动态生成类名 */} Content 
</div>

style样式写法

// vue
style="width:100%;display: flex;"

//react jsx语法
<div style={{ width: '100%', display: 'flex' }}>内容</div>

img图片使用

在 React 中使用本地文件夹中的图片通常需要通过 import 或者 require 来引入图片，并将其作为组件的 src 或者 backgroundImage 属性的值。

使用 import 或 require 导入图片

我本地使用的import的方式进行导入的

// 使用 import 导入图片 

import logo from './images/logo.png'; 


// 或者使用 require 导入图片 const logo = require('./images/logo.png');

将图片作为组件的属性

// 使用 img 标签显示图片
<img src={logo} alt="Logo" />

// 使用 div 标签作为背景图片
<div style={{ backgroundImage: `url(${logo})` }}></div>

三元表达式

vue之中

<img v-if="menuState"  
@click="handleClickcollapsesvg(false)" 
class="collapsesvg" src="" alt="" />

<img v-if="!menuState"  
@click="handleClickcollapsesvg(true)" 
class="collapsesvg"  src="" alt="" />

React之中

{menuState?
(<img  onClick={()=>{handleClickcollapsesvg(false)}} className="collapsesvg" src={collapsefalsesvg} alt="" />)
:(<img  onClick={()=>{handleClickcollapsesvg(true)}} className="collapsesvg" src={collapsetruesvg} alt="" />)}

对比一下，好像vue更加的细致清晰啊🤔 （再次赞美尤大大！）

点击事件

// vue
onClick="topageurl(3)"

//react jsx语法
onClick={()=>{ topageurl(3) }}

页面跳转

之前我们在vue3之中可能跳转方式是这样子的：

import {useRouter} from 'vue-router'
const router=useRouter();
router.push({path:'/color', query:{userId:'1'}});

3、路由的使用上

React路由-React Router v6传递参数

React18 --React Router v6 之中写法

（1） 使用 useNavigate 钩子进行导航

React Router v6 提供了 `useNavigate` 钩子，可以在组件中使用它来进行导航

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/path'); // 跳转到指定路径
  };

  return (
    <button onClick={handleClick}>Go to Path</button>
  );
}

（2）使用 Link 组件：

import { Link } from 'react-router-dom';

function MyComponent() {
  return (
    <Link to="/path">Go to Path</Link>
  );
}

（3） 使用 navigate 函数

import { navigate } from 'react-router-dom';

function MyComponent() {
  const handleClick = () => {
    navigate('/path'); // 跳转到指定路径
  };

  return (
    <button onClick={handleClick}>Go to Path</button>
  );
}

（4） 使用 useParams 钩子获取参数

使用 useParams 钩子来获取 URL 参数

import { useParams } from 'react-router-dom';

function MyComponent() {
  const params = useParams();

  return (
    <div>
      <p>Param1: {params.param1}</p>
      <p>Param2: {params.param2}</p>
    </div>
  );
}

（5）参数传递

携带参数可以通过将参数添加到 URL 中实现

<Link to="/path/param1_value/param2_value">Go to Path</Link>

在接收参数的组件中，使用 useParams 钩子来获取参数

import { useParams } from 'react-router-dom';

function MyComponent() {
  const params = useParams();

  return (
    <div>
      <p>Param1: {params.param1}</p>
      <p>Param2: {params.param2}</p>
    </div>
  );
}