vue和react的区别及优缺点解读

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

vue和react的区别及优缺点解读

ZHANG.......   2023-03-23 我要评论

vue和react的区别及优缺点

共同点

  • 数据驱动视图
  • 组件化
  • 都使用 Virtual DOM

1.数据驱动视图

在jquery时代,我们需要频繁的操作DOM来实现页面效果与交互;而Vue和React解决了这一痛点,采用数据驱动视图方式,隐藏操作DOM的频繁操作。

所以我们在开发时,只需要关注数据变化即可,但是二者实现方式不尽相同。

2.组件化

React与Vue都遵循组件化思想,它们把注意力放在UI层,将页面分成一些细块,这些块就是组件,组件之间的组合嵌套就形成最后的网页界面。

所以在开发时都有相同的套路,比如都有父子组件传递,都有数据状态管理、前端路由、插槽等。

3.Virtual DOM

Vue与React都使用了 Virtual DOM + Diff算法,不管是Vue的Template模板+options api写法,还是React的Class或者Function写法,最后都是生成render函数,而render函数执行返回VNode(虚拟DOM的数据结构,本质上是颗树)。

当每一次UI更新时,总会根据render重新生成最新的VNode,然后跟以前缓存起来老的VNode进行对比,再使用Diff算法(框架核心)去真正更新真实DOM(虚拟DOM是js对象结构,同样在js引擎中,而真实DOM在浏览器渲染引擎中,所以操作虚拟DOM比操作真实DOM开销要小得多)。

不同点

Vue和React两者虽然都是用于构建用户界面的框架,但是也有很大的差异,首先二者核心的思想就不同。

1.核心思想不同

Vue开发的定位就是尽可能的降低前端开发的门槛,让更多的人能够更快地上手开发。这就有了vue地主要特点:灵活易用地渐进式框架,进行数据拦截/代理,它对侦测数据地变化更加敏感、更精准。

React从一开始地定位就是提出UI开发的新思路。背靠大公司Facebook的React,从开始起就不缺关注和用户,而且React想要做的是用更好的方式去颠覆前端开发方式。所以React推崇函数式编程(纯组件),数据不可变以及单向数据流,当然需要双向的地方也可以手动实现,比如借助onChange和setState来实现。

由于两者核心思想的不同,所以导致Vue和React在后续设计产生了许多差异。

2.组件写法差异

React推荐的做法是JSX + inline style,也就是把 HTML 和 CSS 全部写进 javascript中,即all in js;Vue推荐的做法是 template 的单文件组件格式(简单易懂,从传统前端转过来易于理解),即 html,css,js写在同一个文件(vue也支持JSX写法)。这个差异一定程度上也是由于二者核心思想不同而导致的。

3.diff算法不同

传统diff算法是循环递归每一个节点。将两棵树中所有的节点一一对比需要O(n²)的复杂度,在对比过程中发现旧节点在新的树中未找到,那么就需要把旧节点删除,删除一棵树的一个节点(找到一个合适的节点放到被删除的位置)的时间复杂度为O(n),同理添加新节点的复杂度也是O(n),合起来diff两棵树的复杂度就是O(n³)。传统Diff算法复杂度太高,vue2.x加入了 Virtual Dom 和react拥有相同的diff优化原则(将算法复杂度降为O(n))。

两者流程思路上是类似的:

不同的组件产生不同的DOM结构。当style不相同时,对应DOM操作就是直接销毁老的DOM,创建新的DOM。同一层次的一组子节点,可以通过唯一的key区分。

React的Diff算法核心实现

react首先对新集合进行遍历,for(name in nextChildren),通过唯一的key来判断老集合中是否存在相同的节点。如果没有的话就创建,如果有的话,if(preChild === nextChild)会将节点在新集合中的位置和老集合中lastIndex进行比较,如果 if(child._mountIndex < lastIndex)进行移动操作,否则不进行移动操作。如果遍历的过程中,发现在新集合中没有,但在老集合中有的节点,会进行删除操作。

vue的Diff算法核心实现

updateChildren是vue diff的核心,过程可以概括为:

旧children和新children各有两个头尾的变量StartIdx和EndIdx,它们的两个变量相互比较,一共有四种比较方式。如果四种方式都没匹配,如果设置了key,就会用key进行比较,在比较的过程中,变量会往中间靠,一旦StartIdx > EndIdx表明旧children和新children至少有一个已经遍历完了,就会结束比较。

Vue2的核心Diff算法采用了双端比较的算法,同时从新旧children的两端开始进行比较 ,借助key值找到可复用的节点,再进行相关操作。相比React的Diff算法,同样情况下可以减少移动节点次数,减少不必要的性能损耗,更加的优雅。

4.响应式原理不同

Vue:

  • Vue依赖收集,自动优化,数据可变。
  • Vue递归监听data的所有属性,直接修改。
  • 当数据改变时,自动找到引用组件重新渲染。

React:

  • React基于状态机,手动优化,数据不可变,需要setState驱动新的state替换老的state。当数据改变时,以组件为根目录,默认全部重新渲染,所以React中会需要 shouldComponentUpdate这个生命周期函数方法来进行控制

5.其他不同点

除了上面的四个不同点外,细数还有很多不同点的。比如api的差异也挺大的,Vue为了更加简单易用,引入了指令、filter等概念以及大量的option API,比如 watch、computed等都是非常好用的。

而React得API比较少,如果你的javascript基础比较好,上手也是非常容易的。

react和vue哪个比较受欢迎,以后主流应该是哪个方向?

react是在全球或者说是国际上影响力巨大,尤其是19年推出reacthooks方式具有里程碑意义。

而vue呢具体应该是发展迅速,尤其是是在国内占有巨大的用户群体,框架是学不完的,所以说还是打好原生的基础。推荐可以看看掘金。

Vue和React那个更好?

两个框架各有优点,整体来说React更成熟。

  • 1.VUE主要用模板搭建应用,React要求开发者借助JSX创建DOM。
  • 2.VUE简单上手,中小型项目更适合,大型应用选React。
  • 3.ReactNative更适合原生APP的框架,如果是多端开发,应选择React。

为什么react还比vue火

优势:react前景更好。

并不是说Vue的缺陷,而是想说:使用Vue上手太容易,导致一开始搞前端的人一下子就能看着中文文档搞出SPA,容易产生自信,忽略对周边类库的关注,缺乏对Vue进行贡献的能力。

虽然用户群体多,但有能力进行改造开发或集成其他模块的人并不多,大多属于使用群体,其生态更多的只能依赖尤大,可以想见Vue生态的发展速度不会很快,下次出现更有用的亮点也很可能不会在Vue。

Reduxmobx类数据流管理也先在react上出现,有无数真正乐于开发研究贡献的人在react社区,改进react,增强。react社区才是真正意义上的火。

性能方面我不好定夺,各有优劣开发难度Vue确实简单些维护性差不多react也不是上手成本高,只是想要自己从头构建工程成本高,但并不是一定要自己做,react社区一堆一键安装的工程,只不过不会出现在官网或文档中,造成大部分国人不知道怎么上手。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们