react框架和vue框架的区别以及相同之处

简单介绍

React–Facebook创建的JavaScript UI框架。它支撑着包括Instagram在内的大多数Facebook网站。React与当时流行的jQuery,Backbone.js和Angular 1等框架不同，它的诞生改变了JavaScript的世界。其中最大的变化是React推广了Virtual DOM（虚拟DOM）并创造了新的语法——JSX，JSX允许开发者在JavaScript中书写HTML（译者注：即HTML in JavaScript）。

Vue致力解决的问题与React一致，但却提供了另外一套解决方案。Vue使用模板系统（弱化的jsx），使其对现有应用的升级更加容易。这是因为模板用的就是普通的HTML，通过Vue来整合现有的系统是比较容易的，不需要整体重构。同时Vue的学习曲线相对react来说更加容易。

相似之处

React与Vue有很多相似之处，如他们都是JavaScript的UI框架，专注于创造前端的富应用。不同于早期的JavaScript框架“功能齐全”，Reat与Vue只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。

两者都是用于创建UI的JavaScript库；
两者都快速轻便；
都有基于组件的架构；
都是用虚拟DOM；
都可放入单个HTML文件中，或者成为更复杂webpack设置中的模块；
都有独立但常用的路由器和状态管理库；
它们之间的最大区别是Vue通常使用HTML模板文件，而React则完全是JavaScript。Vue有双向绑定语法糖。

不同点

1.监听数据变化的实现原理不同
Vue通过 getter/setter以及一些函数的劫持，能精确知道数据变化。

React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的VDOM的重新渲染。为什么React不精确监听数据变化呢？这是因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强调数据的不可变，两者没有好坏之分，Vue更加简单，而React构建大型应用的时候更加鲁棒。

2.数据流的不同

Vue1.0中可以实现两种双向绑定：父子组件之间，props可以双向绑定；组件与DOM之间可以通过v-model双向绑定。Vue2.x中去掉了第一种，也就是父子组件之间不能双向绑定了（但是提供了一个语法糖自动帮你通过事件的方式修改），并且Vue2.x已经不鼓励组件对自己的 props进行任何修改了。

React一直不支持双向绑定，提倡的是单向数据流，称之为onChange/setState()模式。不过由于我们一般都会用Vuex以及Redux等单向数据流的状态管理框架。

3.HoC和mixins
Vue组合不同功能的方式是通过mixin，Vue中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传入的对象或者函数。比如我们定义的模板怎么被编译的？比如声明的props怎么接收到的？这些都是vue创建组件实例的时候隐式干的事。由于vue默默帮我们做了这么多事，所以我们自己如果直接把组件的声明包装一下，返回一个HoC，那么这个被包装的组件就无法正常工作了。

React组合不同功能的方式是通过HoC(高阶组件）。React最早也是使用mixins的，不过后来他们觉得这种方式对组件侵入太强会导致很多问题，就弃用了mixinx转而使用HoC。高阶组件本质就是高阶函数，React的组件是一个纯粹的函数，所以高阶函数对React来说非常简单。

4.组件通信的区别

Vue中有三种方式可以实现组件通信：父组件通过props向子组件传递数据或者回调，虽然可以传递回调，但是我们一般只传数据；子组件通过事件向父组件发送消息；通过V2.2.0中新增的provide/inject来实现父组件向子组件注入数据，可以跨越多个层级。

React中也有对应的三种方式：父组件通过props可以向子组件传递数据或者回调；可以通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多。React 本身并不支持自定义事件，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数，但Vue更倾向于使用事件。在React中我们都是使用回调函数的，这可能是他们二者最大的区别。

5.模板渲染方式的不同
在表层上，模板的语法不同，React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染，但其实这只是表面现象，毕竟React并不必须依赖JSX。

在深层上，模板的原理不同，这才是他们的本质区别：React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的，更加纯粹更加原生。而Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现对这一点，这样的做法显得有些独特，会把HTML弄得很乱。

6.渲染过程不同
Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制，但Vue将此视为默认的优化。

7.框架本质不同
Vue本质是MVVM框架，由MVC发展而来；

React是前端组件化框架，由后端组件化发展而来。

8.Vuex和Redux的区别
从表面上来说，store注入和使用方式有一些区别。在Vuex中，store被直接注入到了组件实例中，因此可以比较灵活的使用：使用dispatch、commit提交更新，通过mapState或者直接通过this.store被直接注入到了组件实例中，因此可以比较灵活的使用：使用dispatch、commit提交更新，通过mapState或者直接通过this.store来读取数据。在Redux中，我们每一个组件都需要显示的用connect把需要的props和dispatch连接起来。另外，Vuex更加灵活一些，组件中既可以dispatch action，也可以commit updates，而Redux中只能进行dispatch，不能直接调用reducer进行修改。

从实现原理上来说，最大的区别是两点：Redux使用的是不可变数据，而Vuex的数据是可变的，因此，Redux每次都是用新state替换旧state，而Vuex是直接修改。Redux在检测数据变化的时候，是通过diff的方式比较差异的，而Vuex其实和Vue的原理一样，是通过getter/setter来比较的，这两点的区别，也是因为React和Vue的设计理念不同。React更偏向于构建稳定大型的应用，非常的科班化。相比之下，Vue更偏向于简单迅速的解决问题，更灵活，不那么严格遵循条条框框。因此也会给人一种大型项目用React，小型项目用Vue的感觉。

总结

Vue的优势包括：

模板和渲染函数的弹性选择
简单的语法及项目创建
更快的渲染速度和更小的体积
React的优势包括：

更适用于大型应用和更好的可测试性
同时适用于Web端和原生App
更大的生态圈带来的更多支持和工具
而实际上，React和Vue都是非常优秀的框架，它们之间的相似之处多过不同之处，并且它们大部分最棒的功能是相通的：

利用虚拟DOM实现快速渲染
轻量级
响应式组件
服务器端渲染
易于集成路由工具，打包工具以及状态管理工具
优秀的支持和社区

react框架和vue框架的区别以及相同之处相关推荐

基于Springboot+VUE框架开发的企业微信SCRM系统
应用介绍基于Springboot+ vue框架开发的企业微信SCRM 系统是一款基于人工智能的企业微信SCRM系统,企业微信SCRM系统基于企业微信开放能力,不仅集成了企微基础的客户管理和后台管理功 ...
vue框架和react框架的区别以及各自的应用场景
一.框架简介 React主张是函数式编程的理念, 实现了前端界面的高性能高效率开发,react很擅长处理组件化的页面.React的官方网站提到了"学习一次,随处写作"这个关键功能, ...
【面试题】当面试官让我回答React和Vue框架的区别......
Vue 和 React 作为当前前端两大火热的框架,面试的时候自然不少被提及: 请说一下你对react/vue框架的理解请对比一下两大框架的优缺点其实react和vue大体上是相同的,比如都使用虚 ...
React 与 Vue 框架的设计思路大 PK
大家好,我是若川.今天分享一篇框架设计思路的好文. 关于我大家好我是花果山的大圣,今天很荣幸,有机会跟大家分享一下很多年轻人感兴趣的话题< Vue 和 React 设计思想 PK>,个人 ...
React.js与Vue.js—两种流行框架的深度比较
JavaScript的发展速度比以往任何时候都快,导致前端的发展也是日新月异,现在讨论最多的前端框架--React.js和Vue.js.因此,在React与Vue的比较中,我们来看看这两者之间更深入的 ...
vue和html5区别,简单描述 vue 和其他框架的区别
现在vue已经是前端主流的框架了,采用MVVM模式,虚拟dom,diff算法,数据双向绑定,提供响应式和组件化的视图组件.将注意力集中保持在核心库.体积小,性能好,生态系统庞大,发展也很不错.相对应的 ...
web前端 vue、react、angular三大框架对比与jquery的对比
前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢? 这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...
vue框架和uniapp框架区别,前端vue和uniapp哪个好用
uniapp和vue有什么区别? vue和uni-app的区别如下:1.uni-app可以通过打包实现一套代码多端运行,而vue不行.2.uni-app有自动的框架预载,加载页面的速度更快,vue没有 ...
Vue为什么能逆袭 Angular和React成为主流前端框架？
作者 | Maja Nowak 译者 | 苏本如责编 | 屠敏来源:CSDN https://www.monterail.com/blog/reasons-why-vuejs-is-popul ...

react框架和vue框架的区别以及相同之处

react框架和vue框架的区别以及相同之处相关推荐

最新文章

热门文章