今天的考核题目: 你知道React和Vue的区别吗? skr,skr

React 和 Vue 的区别

博主面了几家公司,看简历上写着使用Vue.js框架,就会问,你能说一说 vue 和 react的区别吗 ?react 听过,没用过,所以就只能尴尬的说不怎么了解react。这不,最近刚学了react (不断爬坑中),同时看了些博客文章,当一回搬运工,如有错误,请指出 ~

简单的自我介绍一下

React是由Facebook创建的JavaScript UI框架,它的诞生改变了JavaScript世界,最大的一个改变就是React推广了Virtual DOM, 并且创造了新的语法 - JSX,JSX 允许在JavaScript中写html代码。

Vue是由尤大大开发的一个MVVM框架,它采用的是模板系统而不是JSX。

安利一波

Virtual DOM

一听可能有点懵逼 ?我也很懵逼。所以我们来看看别人怎么说的 :Vue.js(2.0版本)与React的其中最大一个相似之处,就是他们都使用了一种叫'Virtual DOM'的东西。所谓的Virtual DOM基本上说就是它名字的意思:虚拟DOM,DOM树的虚拟表现。

    Virtual DOM 是一个映射真实DOM的JavaScript对象,如果我们要改变任何元素的状态,那么是先在Virtual DOM 上先进行改变,而不是直接地去修改真实的DOM。比如在Vue中,我们将原来的节点改成这样 :// 原DOM<div class='box'><p class='label'><span>{{ label }}</span></p></div>// 修改的DOM<div class='box'><p class='label'><span>{{ label }}</span><span>{{ username }}</span></p></div>我们往p节点中新增了一个span节点,于是我们一个新的Virtual DOM对象会被创建。然后新的Virtual DOM 和旧的Virtual DOM比较,通过diff算法,算出差异,然后这些差异就会被应用在真实的DOM上

Vue 很“ 嚣张 ”,它宣称可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,由于vue会跟踪每一个组件的依赖收集,通过setter / getter 以及一些函数的劫持,能够精确地知道变化,并在编译过程标记了static静态节点,在接下来新的Virtual DOM 并且和原来旧的 Virtual DOM进行比较时候,跳过static静态节点。所以不需要重新渲染整个组件树。

React默认是通过比较引用的方式进行,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。如果想避免不必要的子组件重新渲染,你需要在所有可能的地方使用PureComponent,或者手动实现shouldComponentUpdate方法。但是Vue中,你可以认定它是默认的优化。

构建工具

React 采用 Create-React-App, Vue 采用的是Vue-Cli,这两个工具非常的好用啊,大兄弟,都能为你创建一个好环境,不过Create-Reacr-App会逼迫你使用webpack和Babel,而Vue-cli可以按需创建不同的模板,使用起来更加灵活一点

数据流

(这里借用一波言川老铁的图,下边会贴出链接)

很直观的,我们可以看到,在Vue2.x中,只能parent -> Child <-> DOM的形式,而React只能单向传递,React一直提倡的是单向数据流,数据主要从父节点传递到子节点(通过props)。如果顶层(父级)的某个props改变了,React会重渲染所有的子节点。我们只能通过setState来改变状态。

模板渲染方式不同

前面说了,Vue和React的模板有所区别,React是通过JSX来渲染模板,而Vue是通过扩展的HTML来进行模板的渲染。React通过原生JS实现模板中的常见语法,比如说条件啊、循环啊、三元运算符啊等,都是通过JS语法实现。而Vue是在和组件代码分离的单独模板中,通过指令v-if、v-for等实现。

这里react比较好点,比如我们要引用一个组件,react直接import 引入,然后可以直接在render中调用了,但是!!vue需要import之后,还要在components里去声明,才能用,好气哦 ~

Vuex 和 Redux

在Vue中,我们是通过Vuex进行状态管理,而在React中,我们是通过Redux进行状态管理。但是这两者在使用上还是有区别的。

在vuex中,我们可以通过在main.js中,引入 store文件夹,并把store挂载到new Vue实例中,这样我们可以直接通过$store灵活使用。

  • 你可以通过dispatch和commit进行更新数据,通过this.$store.state.xx读取数据
  • 或者你可以通过mapState / mapActions 进行vuex的操作

而在React中,我们需要每一个组件都引入connect,目的就是把props和dispatch连接起来。

另外!!!我们vuex可以直接dispatch action也可以commit update,但是redux只能通过dispatch,然后在reducer里,接收到action,通过判断action的type,从而进行对应的操作,redux不能直接调用reducer进行修改!!

    Redux使用的是不可变的数据,而Vuex的数据是可变的,Redux每次修改更新数据,其实就是用新的数据替换旧的数据,而Vuex是直接修改原数据Redux 在检测数据变化的时候,是通过 diff 的方式比较差异的,而Vuex其实和Vue的原理一样,是通过 getter/setter来比较的,因为在vue实例的时候,进行了依赖收集。

不差上下?

反正我觉得他们两个都好,skr,skr,如果你想做一个小型项目就用vue,想做大型项目就用react,我是不知道怎样算小型,怎样算大型,我随心所欲,想用哪个就用哪个,我不会告诉你,我都是做的个人小项目 ~


相关链接

言川 - 关于Vue和React区别的一些笔记: https://github.com/lihongxun945/myblog/issues/21

Vue 官网 - 对比其他框架: https://cn.vuejs.org/v2/guide/comparison.html

众成翻译 - Vue vs React: Javascript 框架之战 : https://www.zcfy.cc/article/vue-vs-react-battle-of-the-javascript-frameworks-3310.html?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com

个人博客: http://blog.pengdaokuan.cn:4001

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367129.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Play和Grails Java框架的优缺点

框架通过为程序员提供一些有用的功能来简化应用程序开发过程。 由于开发人员的普遍使用&#xff0c;Java框架经常被开发人员使用。 您可以在市场上找到各种Java开发框架。 新手开发人员经常在论坛上发布一个常见问题&#xff1a;“哪种Java框架是最好的&#xff1f;” 首先&am…

C++小项目-吃豆子游戏

GMap.h #pragma once //保证头文件只被编译一次#include "stdafx.h"#define MAP_LEN 19 //逻辑地图大小 (逻辑地图由行、列各为19的方块组成)#define P_ROW 10 //大嘴出生地的横逻辑坐标 #define P_COLUMN 9 //大嘴出生地的列逻辑坐标 #define E_ROW 8 //敌人出…

argb888与rgb888转换程序_一文了解各平台RGB565和RGB888区别

原标题&#xff1a;一文了解各平台RGB565和RGB888区别用过AM335x平台的小伙伴应该知道&#xff0c;OK335xS开发平台的LCD接口是RGB888模式的&#xff0c;而OK335xD开发平台的LCD接口是RGB565模式的。如果把xS的镜像烧写到xD平台上&#xff0c;那么LCD会显示颜色异常。这是为什么…

d4d#9 玩Docker只要浏览器就够了,PWD是个神奇的网站

本文是d4d系列的第9篇&#xff0c;在这一篇中给大家介绍一个学习Docker最为快捷高效的方式&#xff0c;你不需要自己搭建环境&#xff0c;也不用担心把自己的开发环境搞乱&#xff0c;你需要的只是一个浏览器&#xff0c;就可以立即开始学习Docker的常用命令&#xff1b;你甚至…

基于 Docker 打造前端持续集成开发环境

知乎: https://zhuanlan.zhihu.com/p/37961402本文将以一个标准的 Vue 项目为例&#xff0c;完全抛弃传统的前端项目开发部署方式&#xff0c;基于 Docker 容器技术打造一个精简的前端持续集成的开发环境。 前置知识&#xff1a;1. CI&#xff08;持续集成&#xff09;&#xf…

哪个内存更快?Heap或ByteBuffer或Direct?

Java正在成为新的C / C &#xff0c;它被广泛用于开发高性能系统。 对像我这样的数百万Java开发人员来说非常好&#xff01; 在这个博客中&#xff0c;我将分享我可以用Java完成的不同类型的内存分配实验以及您从中获得的好处。 Java中的内存分配 Java提供哪种类型的内存分配…

java没有打印mysql日志_0216 aop和打印数据库执行日志

需求maven依赖p6spyp6spy3.8.7com.google.guavaguava28.2-jreorg.springframework.bootspring-boot-starter-data-jpaorg.springframework.bootspring-boot-starter-webmysqlmysql-connector-javaruntimeorg.projectlomboklomboktrue打印sql配置要点&#xff1a;驱动配置 appli…

php数组基础

php中&#xff0c;数组的下标可以是整数&#xff0c;或字符串。 php中&#xff0c;数组的元素顺序不是由下标决定&#xff0c;而是由其“加入”的顺序决定。 定义&#xff1a; $arr1 array(元素1&#xff0c;元素2&#xff0c;。。。。。 ); array(1, 5, 1.1, “abc”, tr…

1.格式化输入输出

1.格式化输入input() input()函数&#xff0c;通常只能返回一个数据类型&#xff0c;那么怎么可以进行多个变量的复制呢&#xff1f;看下面这段代码。 1 str1, str2 eval(input("请输入两个字符串&#xff1a;")) 2 print(str1, str2) 3 4 num1, num2 eval(input(…

canvas像素点操作 —— 视频绿幕抠图

原文地址 主要内容 上篇文章学习了canvas像素点的获取 —— 传送门&#xff0c; 今天学一下canvas像素点操作。 一个方法&#xff1a;putImageData putImageData 用法&#xff1a; context.putImageData(imgData, x, y, dX, dY, dWidth, dHeight);参数描述imgData规定要放…

Java中的迭代器设计模式–示例教程

迭代器模式是一种行为模式&#xff0c;用于提供遍历一组对象的标准方式。 Iterator模式在Java Collection Framework中得到了广泛使用&#xff0c;其中Iterator接口提供了遍历集合的方法。 根据GoF&#xff0c;迭代器设计模式的意图是&#xff1a; 提供一种在不暴露其基础表示…

random

1 import random2 3 result random.randint(1, 7) # 随机生成1到7的整数4 result random.random() # 随机生成[0,1)的浮点数5 result random.randrange(1, 7) # 随机生成1到7的整数6 result random.choice([1, 2, 3, 4]) # 从列表中随机选择一个元素7 result random.c…

面向对象 解释 经典啊

想必大家都知道面向对象三大特征&#xff1a;继承&#xff0c;封装&#xff0c;多态。 假如你现在有一个女朋友&#xff0c;那么现在你就可以称呼你的女朋友为对象啦。首先&#xff0c;你女朋友的身高三围等我们称作为属性&#xff0c;你如果想要跟你好基友分享一下你女朋友的身…

关于Unity实现AR功能(五)摄像头转换与闪光灯开关控制

1 /// <summary>2 /// 摄像头转换3 /// </summary>4 /// <param name"s_cameraDirection">摄像头转换方向</param>5 public void ChangeCameraDirectionMet(CameraDevice.CameraDirection s_cameraDirection)6 {7 …

并发编程(一):基础概述

本篇博客主要讲述并发编程中的一些基础内容&#xff0c;并了解一下基本概念。 首先我们了解一下什么是并发&#xff1f; 同时拥有两个或者多个线程&#xff0c;如果程序在单核处理器上运行&#xff0c;多个线程将交替的换入或者换出内存&#xff0c;这些线程是同时“存在”的&a…

Dumb Bones UVA - 10529(概率dp)

题意&#xff1a; 你试图把一些多米诺骨牌排成直线&#xff0c;然后推倒它们。但是如果你在放骨牌的时候不小心把刚放的骨牌碰倒了&#xff0c;它就会把相临的一串骨牌全都碰倒&#xff0c; 而你的工作也被部分的破坏了。 比如你已经把骨牌摆成了DD__DxDDD_D的形状&#xff0c;…

M - 非常可乐

1 #include <string.h>2 #include <stdio.h>3 #include <queue>4 using namespace std;5 6 int s,n,m;7 int vis[105][105][105];8 9 struct node10 {11 int s,n,m,step;12 };13 int check(int x,int y,int z)//平分条件14 {15 if(x 0 && y…

ArrayList和Vector的区别

这两个类都实现了List接口&#xff08;List接口继承了Collection接口&#xff09;&#xff0c;他们都是有序集合&#xff0c;即存储在这两个集合中的元素的位置都是有顺序的&#xff0c;相当于一种动态的数组&#xff0c;我们以后可以按位置索引号取出某个元素&#xff0c;并且…

【luogu1613】跑路 - 倍增+Floyd

题目描述 小A的工作不仅繁琐&#xff0c;更有苛刻的规定&#xff0c;要求小A每天早上在6&#xff1a;00之前到达公司&#xff0c;否则这个月工资清零。可是小A偏偏又有赖床的坏毛病。于是为了保住自己的工资&#xff0c;小A买了一个十分牛B的空间跑路器&#xff0c;每秒钟可以跑…

python哲学翻译_Python

正在学习Python开发语言的用户&#xff0c;可能会在学习过程中听说过讲师说过Python有一段有关于Python的哲学理念机设计思想&#xff0c;在Python里输入“import this”命令就会出现一段英文格言&#xff0c;这里我们把Python的这段格言的双语版分享出来&#xff0c;帮助正在学…