今天的考核题目: 你知道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
今天的考核题目: 你知道React和Vue的区别吗? skr,skr相关推荐
- 前端面试题--react与vue的区别
前端面试题–react与vue的区别 首先从架构层面来看,vue是MVVM架构,是一个灵活易用的渐进式双向绑定,而react并没有准确的架构模式,react准确的架构模式是调和器和渲染器,它有的是属性 ...
- 做网站用html好还是vue好,中大型项目用react还是vue?
中大型项目用react还是vue? 中大型项目可以用react,react比较适合大型项目. 原因: 1.大型项目的庞大带来的是代码优化以及性能优化react提倡的更细粒度的封装,带来的组件的复用性提 ...
- react和vue原理与比较
react的渲染过程: 1.如果开发者使用JSX写react,那么babel会先将JSX编译为能被浏览器识别的JS语法. (babel其实就是一个JavaScript编译器,可以解决浏览器兼容问题) ...
- 关于水利工程的实际c语言题目,工程类实践考核题目
实践考核题目 3.5 实践要求 1.对劳动中的态度.遵守纪律安全生产等方面的总结. 2.反映实践全过程,对所承担的工作任务.完成任务的情况进行总结. 3.反映实践的体会和收获,对生产实践中发现的问题的 ...
- vue和react相同点_我在React和Vue中创建了相同的应用程序。 这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
- react构建淘票票webapp,及react与vue的简单比较。
前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
- vue = 什么意思_我用React和Vue构建了同款应用,来看看哪里不一样
作者|Sunil Sandhu 译者|王强 编辑|王文婧 我阅读了很多 React 文档并观看了一些教学视频,它们的确很棒,但我真正想知道的是 React 与 Vue 有何不同.我所说的"不 ...
- Jerry的碎碎念:SAPUI5, Angular, React和Vue
2019独角兽企业重金招聘Python工程师标准>>> 去年我去一个国内客户现场时,曾经和他们IT部门的一位架构师聊到关于在SAP平台上进行UI应用的二次开发时,UI框架是选用UI5 ...
- 【React、Vue 、 Angular 共分天下,2018首将会是谁?】
要论 2017 年最主流的三个 Web 前端结构,应莫过于 Angular.Vue 和 React 了.然而在实际运用中,这三个结构却不尽相同,对于规模不大的前端项目来说,Vue 因其极易上手会被列出 ...
最新文章
- OpenVAS漏洞扫描基础教程之创建用户
- 贪心算法之——独木舟上的旅行(nyoj71)
- Ubuntu安装及配置OpenCV3.2.0
- 怎么找出电脑里隐藏的流氓软件_9成人都不知道的秘密!那些隐藏在你电脑里的“大象”!...
- Python中的高阶函数reduce
- mysql 指定账户已存在_安装mysql时告诉我指定的账户已存在?
- Web框架——Flask系列之Flask-SQLAlchemy安装与使用 定义数据模型(八)
- PHP方向+go+rpc+swoole,瞅瞅 PHP+Swoole 作为网络通信框架
- zend studio php 5.5,Zend Studio使用教程:在Zend Studio中调试PHP(5/5)
- 关于NGINX下开启PHP-FPM 输出PHP错误日志的设置(已解决)
- Microsoft visual studio关闭安全检查
- vc access mysql_VC中访问Access数据库的方法
- (8)seetaface6 JNI之人脸相似度1:1(包含戴口罩人脸相似度)计算
- 绝对受用的求职经验分享
- 使用SQL语句在表中插入date类型的数据
- JavaScript内存分配及垃圾回收机制
- Android插件化动态加载apk
- [WPF系列] 高级 调试
- java-php-python-ssm万达影院售票管理系统计算机毕业设计
- (转)flex布局换行后间隙问题
热门文章
- 简洁明了!Java实现单向环形链表以解决约瑟夫环Josepfu问题
- c语言队列原理的实现,c印记(十二):队列queue原理与实现
- 数据库(3)——关系
- 时间 '2018-08-06T10:00:00.000Z' 格式转化为本地时间(转)
- requests高级用法
- nyoj239 月老的难题 二分图 匈牙利算法
- Oracle Golden Gate 系列十三 -- 配置GG进程检查点(checkpoint) 说明
- JS的对象及其属性和方法
- 在cmd命令行下编译运行C/C++源文件
- VS2008中源文件与模块生成时的文件不同,仍要让调试器使用它吗