Vue 转 React 必读: 从模板语法到状态管理,详解两者的关键差异

已于 2024-04-21 17:32:25 修改
阅读量608 收藏 18
点赞数 13
分类专栏： React JavaScript 文章标签： vue.js react.js 前端
于 2024-04-07 23:53:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sky6862/article/details/137482922
版权

相同点:

  1. 组件化: 两者都采用组件化的方式来构建用户界面,将 UI 拆分成可重用的独立部件。
  2. 状态管理: 两者都提供了管理组件状态的机制,如 Vue 的 data 选项和 React 的 state。
  3. 事件处理: 两者都支持事件处理,通过绑定事件处理函数来响应用户交互。
  4. 条件渲染: 两者都支持条件渲染,根据数据控制组件的显示和隐藏。
  5. 列表渲染: 两者都支持列表渲染,通过遍历数组动态渲染组件。

不同点:

  1. 模板语法:

    • Vue:
      • 使用类似 HTML 的模板语法,结合 Vue 指令(如 v-if、v-for 等)来控制视图的渲染和交互。
      • 模板支持 JavaScript 表达式,可以直接在模板中使用 JavaScript 代码。
    • React:
      • 使用 JSX 语法,它是 JavaScript 的语法扩展,允许你在 JavaScript 代码中嵌入 HTML 标签。
      • JSX 语法更加灵活,可以更好地利用 JavaScript 的功能来控制视图的渲染和交互。

  2. 数据绑定:

    • Vue:
      • 使用 v-bind 指令进行单向数据绑定,v-model 进行双向数据绑定。
      • 可以在模板中直接使用 Vue 实例中定义的数据。
    • React:
      • 通过 props 进行单向数据流,通过受控组件(controlled components)实现双向数据绑定。
      • 在 JSX 中,需要使用 {}来引用组件内部的数据和方法。

  3. 生命周期:

    • Vue:
      • 拥有丰富的生命周期钩子,如 created、mounted、updated 等,可以在特定阶段执行自定义逻辑。
    • React:
      • 生命周期钩子相对较少,如 componentDidMount、componentDidUpdate 等,但可以通过 Hooks 实现更细粒度的生命周期控制。

  4. 状态管理:

    • Vue:
      • 内置 Vuex 作为状态管理库,提供了全局状态管理的解决方案。
    • React:
      • 本身并未内置状态管理库,但有丰富的第三方状态管理解决方案,如 Redux、MobX 等。

  5. 学习曲线:

    • Vue:
      • 相对 React 更加简单易学,对于前端开发者来说,上手难度较低。
    • React:
      • 由于需要更多的 JavaScript 知识,学习曲线可能会比 Vue 稍微陡峭一些。

示例代码详解

1. 模板语法

Vue:
Vue 使用类似 HTML 的模板语法,结合 Vue 指令(如 v-if、v-for 等)来控制视图的渲染和交互。模板支持 JavaScript 表达式,可以直接在模板中使用 JavaScript 代码。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue Example',
      message: 'This is a Vue.js example.'
    }
  }
}
</script>

React:
React 使用 JSX 语法,它是 JavaScript 的语法扩展,允许你在 JavaScript 代码中嵌入 HTML 标签。JSX 语法更加灵活,可以更好地利用 JavaScript 的功能来控制视图的渲染和交互。

import React from 'react';

function ReactExample() {
  const title = 'React Example';
  const message = 'This is a React example.';

  return (
    <div>
      <h1>{title}</h1>
      <p>{message}</p>
    </div>
  );
}

export default ReactExample;

2. 数据绑定

Vue:
Vue 使用 v-bind 指令进行单向数据绑定,v-model 进行双向数据绑定。在模板中,可以直接使用 Vue 实例中定义的数据。

<template>
  <div>
    <input v-model="message" placeholder="Enter a message" />
    <p>The message is: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

React:
React 通过 props 进行单向数据流,通过受控组件(controlled components)实现双向数据绑定。在 JSX 中,需要使用 {} 来引用组件内部的数据和方法。

import React, { useState } from 'react';

function ReactExample() {
  const [message, setMessage] = useState('');

  const handleInputChange = (event) => {
    setMessage(event.target.value);
  };

  return (
    <div>
      <input value={message} onChange={handleInputChange} placeholder="Enter a message" />
      <p>The message is: {message}</p>
    </div>
  );
}

export default ReactExample;

3. 生命周期

Vue:
Vue 拥有丰富的生命周期钩子,如 created、mounted、updated 等,可以在特定阶段执行自定义逻辑。

export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    // Executed when the component is mounted
    console.log('Component mounted. Initial count:', this.count);
  },
  updated() {
    // Executed when the component is updated
    console.log('Component updated. New count:', this.count);
  }
}

React:
React 的生命周期钩子相对较少,如 componentDidMount、componentDidUpdate 等,但可以通过 Hooks 实现更细粒度的生命周期控制。

import React, { useEffect, useState } from 'react';

function ReactExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Executed when the component is mounted and when the count state changes
    console.log('Component mounted or updated. Current count:', count);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default ReactExample;

4. 状态管理

Vue:
Vue 内置了 Vuex 作为状态管理库,提供了全局状态管理的解决方案。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

export default store;

React:
React 本身并未内置状态管理库,但有丰富的第三方状态管理解决方案,如 Redux、MobX 等。

import React from 'react';
import { createStore } from 'redux';

// Redux reducer
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

// Create the Redux store
const store = createStore(counterReducer);

function ReactExample() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT' });
  };

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

export default ReactExample;

5. 条件渲染

Vue:
Vue 使用 v-if、v-else-if、v-else 指令控制条件渲染。还可以使用 v-show 指令控制元素的显示与隐藏。

<template>
  <div>
    <p v-if="showMessage">This message is displayed.</p>
    <p v-else-if="showAnotherMessage">This is another message.</p>
    <p v-else>No message to display.</p>

    <button v-show="canShowButton" @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true,
      showAnotherMessage: false,
      canShowButton: true
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  }
}
</script>

React:
React 使用 JavaScript 语法(如 if-else、三元表达式)来实现条件渲染。也可以使用 && 运算符和 ?: 三元运算符来实现简单的条件渲染。

import React from 'react';

function ReactExample() {
  const showMessage = true;
  const showAnotherMessage = false;
  const canShowButton = true;

  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      {showMessage ? (
        <p>This message is displayed.</p>
      ) : showAnotherMessage ? (
        <p>This is another message.</p>
      ) : (
        <p>No message to display.</p>
      )}

      {canShowButton && <button onClick={handleClick}>Click me</button>}
    </div>
  );
}

export default ReactExample;

6. 列表渲染

Vue:
Vue 使用 v-for 指令遍历数组或对象,并将其渲染为列表。可以通过 key 属性为每个元素提供唯一标识,提高渲染效率。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>

React:
React 使用 JavaScript 的 map() 方法遍历数组,并在 JSX 中渲染列表。同样需要为每个列表项提供 key 属性,以帮助 React 进行高效的更新。

import React from 'react';

function ReactExample() {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default ReactExample;

通过这些代码示例,你应该能够更好地理解 Vue 和 React 在不同方面的差异,包括模板语法、数据绑定、生命周期、状态管理、条件渲染和列表渲染。这些知识将有助于你在从 Vue 转向 React 时更快地掌握新的概念和工作方式。

React/Vue常用的状态管理方案对比
EuForth的博客
10-01 71
Redux的状态管理遵循严格的函数式编程原则，所有的状态修改都是通过纯函数来完成的。状态存储在state属性中，mutations定义了修改状态的方法，actions定义了异步操作，getters用于获取衍生数据。Vuex是Vue的官方状态管理库，它专门为Vue设计并提供了类似Redux的状态管理功能。通过有效地管理应用程序的状态，我们可以实现更好的代码组织、更高效的数据流动和更好的用户体验。通过使用这些状态管理方案，你可以更好地组织和管理你的应用程序的状态，从而提供更好的用户体验。
React和Vue状态管理的区别
fangshuiguang的博客
06-11 989
前端实例数据共享，vue有vuex而react则有redux，mobx等等。 使用vuex进行状态管理 我们现在vue项目，均采用vuex来做全局的状态管理，简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更，下面我们看看在项目中怎么使用它作状态管理，在此之前先看看vuex工作流程图。 ...
React 引入 @vue/reactivity 实现响应式状态管理
weixin_43487782的博客
09-10 1642
看了 ssh 大佬的一篇文章，觉得挺有意思，刚好最近也在研究全局数据流方案，因此根据大佬的思路自己也尝试了一下。 vue-next 是 Vue3 的源码仓库，Vue3 采用 lerna 做 package 的划分，而响应式能力 @vue/reactivity 被划分到了单独的一个 package 中。 这个包提供了几个核心 api ： effect effect 是一个观察函数，它的作用是 收集依赖 。effect 接受一个函数，这个函数内部对于响应式数据的访问都可以收集依赖，在响应式数据更新之后，就会触发
学习React：从Vue到React的转变
小杨很困的博客
06-29 761
学习React：从Vue到React的转变，最主要是记录一下自己在学习中感受到vue和react之间的差异
由Vue转React的自学文档
takeingloop的博客
07-17 1052
由vue3转学react，之前从未接触过react，自学了一遍感觉还好，容易上手。 期间的一些笔记，后续有更深的见解持续更新。
高分毕设：Springboot与Vue打造的保险合同管理系统
资源摘要信息:"基于Springboot和Vue的保险合同管理系统源码" 知识点梳理： 1. 项目背景与用途： - 该系统是为计算机专业学生设计的毕业设计项目，同时也适用于需要进行项目实战练习的学习者。 - 系统可作为课程...
Springboot与Vue打造的高分社团管理系统代码
资源摘要信息:"本资源为基于SpringBoot和Vue技术栈的社团管理系统源码，适合计算机相关专业的学生在毕业设计阶段使用。此系统通过导师指导并获得98分的高分评价，适合用作课程设计、期末大作业等。系统源码全面，无...
SpringBoot+Vue教学资源系统源码详解及开发指南
资源摘要信息: "本资源提供了一个基于Spring Boot和Vue的完整教学资源系统源码，包括前后端代码、中文注释以及详细的配置说明和操作步骤，适用于计算机相关专业的在校学生、专业老师或企业员工等学习者。源码经过...
Springboot与Vue打造的优秀书籍学习平台源码分享
资源摘要信息:"基于Springboot和Vue的书籍学习平台源码是一个专为计算机相关专业的学生和对项目实战有需求的学习者设计的高分毕业设计项目。该项目可作为课程设计、期末大作业，以及直接用于毕业设计。项目前后端...
Springboot与Vue打造满分毕业设计——线上买菜系统源码分享
项目技术栈详解： 1. Spring Boot：一个用于简化Spring应用初始搭建以及开发过程的框架。它使用了特定的方式来配置Spring，使得开发者不必定义大量的模板配置文件，从而可以快速启动一个项目，并且易于开发和维护。 ...
从Vue到React快速上手
a983677218的博客
08-02 628
作为公司新来的java实习生，虽然写的是后端，但要背负一些前端的任务。因为前端使用的是React框架，本人也只会Vue2,Vue3略知一二。在进一步学习中React中发现，这不和Vue3差不多吗，现在有点后悔当初没有直接学到Vue3😭😭😭。现在分享一下，我从Vue2快速转到React的一些小心得😥。下面是中文的官方文档，下面我会结合文档快速入门一下。React用于构建 Web 和原生交互界面的库。
Vue和React的对比
哆啦A瑶的博客
03-01 3113
vue和React的区别对比
11+实战技巧，让你轻松从Vue过渡到React(1)，这些知识你必须拿下
2401_84093310的博客
04-03 848
3. v-for一般情况下，渲染一个列表在Vue中使用v-for指令，v-for 指令需要使用形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。当然了，每个元素都需要设置唯一的key。
React和Vue语法并列比较：状态管理
weixin_48726650的博客
07-26 349
来源：https://medium.com/js-dojo/ 作者：Oahehc (Andrew) 这是有关React和Vue语法比较的第三篇文章。在本文中，将比较两种生态系统中最著名的状态管理库（Redux和Vuex）的语法。 第一篇文章：React.js和Vue.js的语法并列比较 第二篇文章：Next.js和Nuxt.js的语法比较，Vue和React的两大SSR解决方案 议程 创建Store Action 异步Action Reducer | Mutation Combine-Reducers
精析React与Vue架构异同及React核心技术——涵盖JSX、组件、Props、State、生命周期与16.8版后Hooks深化解析
最新发布
JINGWHALE
05-05 1206
本文详细介绍了 React 与 Vue 架构区别，以及ReactJSX、组件、Props、State、生命周期函数以及自React 16.8版本引入的Hooks等主要核心语法。React，Facebook开源的JavaScript库，用于构建高性能用户界面。通过组件化开发，它使UI的构建、维护变得简单高效。利用虚拟DOM实现快速渲染更新，适用于单页应用、移动应用（React Native）。React极大推动了现代前端技术的发展与实践。
如何优雅地解决多个 React、Vue App 之间的状态共享？
公众号：前端铁蛋
12-01 401
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ls5CUZQT-1606655042509)(https://user-images.githubusercontent.com/44939961/100539989-601ce180-3275-11eb-8a51-592d9fcc1715.png)] 前言 人生是个积累的过程，你总会有摔倒，即使跌倒了，你也要懂得抓一把沙子在手里。 —— 丁磊 码过的每一个需求、踩过的每一个坑、修过的每一个 bug 、学过的每一个知识以及看
Vue 转 React不完全指北
LeZiJie的博客
04-25 392
一般 H5 的，或者一些做不大的系统，首选 Vue。因为 Vue 简单，开发效率比较高。同时 Vue 包的体积也更小，在移动端网络差异大的情况下，资源体积是非常重要的。 像一些后台系统，会越做越大的，就用 React。解决方案更多，后期也更方便迭代与维护。（本人有幸开发过 Vue 大项目，webpack 热更新一下 3mins+） 二、核心思想 Vue 早期定位是尽可能的降低前端开发的门槛（这跟 Vue 作者是独立开发者也有关系）。所以 Vue 推崇灵活易用（渐进式开发体验），数据可变，双向数据...
vue、react和小程序的状态管理
weixin_47808575的博客
02-28 588
这个API的作用是来监听某个store中的值是否有变化，若是监听到变化可以做一些逻辑操作，类似于watch监听。把全局状态引入之后，在使用的时候每次都要多取一层，这个的目的是把状态结构出来，并且是响应式的。和vuex中的getter一样，都是计算状态值的。
vue 状态管理原理与实现
loftBlack
01-24 3159
当前最火热的框架无非就是Vue,Angular,React,今天我把我在用vue开发中的迷茫的地方（状态管理）给大家说一下，刚开始很懵逼，很苦恼； 下面我来说一下vuex: vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vue 应用中原始数据对象的实际来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值