美文网首页面试程序员
React与Vue的一些差异

React与Vue的一些差异

作者: 固执的坚持己见 | 来源:发表于2019-04-02 10:54 被阅读0次

前端写了这么长久了,各种框架都多多少少也用过了,今天整理一篇Vue和React的相关文章希望对读者有所帮助。


一、监听数据变化的实现原理不同

Vue 通过 getter/setter 以及一些函数的劫持,能精确知道数据变化,不需要特别的优化就能达到很好的性能

React 默认是通过比较引用的方式进行的,如果不优化(PureComponent/shouldComponentUpdate)可能导致大量不必要的VDOM的重新渲染

为什么 React 不精确监听数据变化呢?这是因为 Vue 和 React 设计理念上的区别,Vue 使用的是可变数据,而React更强调数据的不可变。所以应该说没有好坏之分,Vue更加简单,而React构建大型应用的时候更加鲁棒(健壮)。

二、数据流的不同

大家都知道Vue中默认是支持双向绑定的。在Vue1.0中我们可以实现两种双向绑定:

父子组件之间,props 可以双向绑定

组件与DOM之间可以通过 v-model 双向绑定

在 Vue2.x 中去掉了第一种,也就是父子组件之间不能双向绑定了(但是提供了一个语法糖自动帮你通过事件的方式修改),并且 Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了。

所以现在我们只有  组件  与  DOM  之间的双向绑定这一种。

然而 React 从诞生之初就不支持双向绑定,React一直提倡的是单向数据流,他称之为 onChange/setState()模式。

不过由于我们一般都会用 Vuex 以及 Redux 等单向数据流的状态管理框架,因此很多时候我们感受不到这一点的区别了

三、HoC(高阶组件) 和 mixins(组件混入)

在 Vue 中我们组合不同功能的方式是通过 mixin,而在React中我们通过 HoC (高阶组件)。

React 最早也是使用 mixins 的,不过后来他们觉得这种方式对组件侵入太强会导致很多问题,就弃用了 mixinx 转而使用 HoC,关于mixin究竟哪里不好,可以参考React官方的这篇文章 《Mixins Considered Harmful》

而 Vue 一直是使用 mixin 来实现的。

为什么 Vue 不采用 HoC 的方式来实现呢?

高阶组件本质就是高阶函数,React 的组件是一个纯粹的函数,所以高阶函数对React来说非常简单。

但是Vue就不行了,Vue中组件是一个被包装的函数,并不简单的就是我们定义组件的时候传入的对象或者函数。比如我们定义的模板怎么被编译的?比如声明的props怎么接收到的?这些都是vue创建组件实例的时候隐式干的事。由于vue默默帮我们做了这么多事,所以我们自己如果直接把组件的声明包装一下,返回一个高阶组件,那么这个被包装的组件就无法正常工作了。

四、模板渲染方式的不同

在表层上, 模板的语法不同

React 是通过JSX渲染模板

而Vue是通过一种拓展的HTML语法进行渲染

但其实这只是表面现象,毕竟React并不必须依赖JSX。

在深层上,模板的原理不同,这才是他们的本质区别:

React是在组件JS代码中,通过原生JS实现模板中的常见语法,比如插值,条件,循环等,都是通过JS语法实现的

Vue是在和组件JS代码分离的单独的模板中,通过指令来实现的,比如条件语句就需要 v-if 来实现

对这一点,我个人比较喜欢React的做法,因为他更加纯粹更加原生,而Vue的做法显得有些独特,会把HTML弄得很乱。举个例子,说明React的好处:

react中render函数是支持闭包特性的,所以我们import的组件在render中可以直接调用。但是在Vue中,由于模板中使用的数据都必须挂在 this 上进行一次中转,所以我们import 一个组件完了之后,还需要在 components 中再声明下,这样显然是很奇怪但又不得不这样的做法。

五、Vuex 和 Redux 的区别

从表面上来说,store 注入和使用方式有一些区别。

在 Vuex 中,$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来比较的(如果看Vuex源码会知道,其实他内部直接创建一个Vue实例用来跟踪数据变化)

而这两点的区别,其实也是因为 React 和 Vue的设计理念上的区别。React更偏向于构建稳定大型的应用,非常的科班化。相比之下,Vue更偏向于简单迅速的解决问题,更灵活,不那么严格遵循条条框框。因此也会给人一种大型项目用React,小型项目用 Vue 的感觉。


以上文章根据个人观点以及线上资源整理,如有侵权请联系作者删除!

相关文章

  • React与Vue的一些差异

    前端写了这么长久了,各种框架都多多少少也用过了,今天整理一篇Vue和React的相关文章希望对读者有所帮助。 一、...

  • React.js入门实践:一个酷酷的日历选择器组件

    之前有过一些vue.js的经验,打算学习以下React感受一下差异。看完React的基本概念,觉得react.js...

  • immutable 在三大框架中的使用情况

    一、react、vue、angular 原理上的差异 vue: proxy + 发布订阅 + diff + vir...

  • React 与 Vue 比较

    日期:2019 年 11 月 28 日 React 与 Vue 比较 简单介绍 React 与 Vue 都是当前主...

  • 2020前端面试题二之vue

    1、vue与react的区别 vue和react的区别 两者本质的区别:模板和组件化的区别 Vue本质是MVVM框...

  • react 弹窗modal问题

    最近写了一个react项目,关于react的modal实现有一些新的收获。 about vue 之前在vue里面实...

  • vue

    vue: vue:1.vue 2.Angualar 3.React 一个vuede 基本格式 vue的一些用法...

  • vue & react的区别

    vue & react 参考: 个人理解Vue和React区别Vue和React的使用场景和深度有何不同? vue...

  • vue和react 区别:

    vue和react 区别: 1、vue与react的对比,如何选型?从性能,生态圈,数据量,数据的传递上,作比较 ...

  • vue.js面试题整理2

    1、vue与react的对比,如何选型?从性能,生态圈,数据量,数据的传递上,作比较 (1)React 和 Vue...

网友评论

    本文标题:React与Vue的一些差异

    本文链接:https://www.haomeiwen.com/subject/sgguoftx.html