Vue和React有什么区别与优劣?我到底应该选择哪谁?

时间: 2020-02-14阅读: 52标签: react

前端开发框架从最开始的jquery时代,到后来backbone,angular1,再到现在vue和react两分天下,也才用了不到十年的光景。

最开始jquery是为了解决浏览器兼容性的问题而火起来的,准确的说它只是一个库,而不能成为框架。但随着前端页面的复杂度的增加,渐渐数据驱动和mv*的思想开始形成,有了backbone,angular等先驱。再之后随着AST,Bable,Webpack等技术的兴起,一个逐渐晚上的前端框架体系也随之建立了起来,如今最入门的就是vue和react了。

但由于vue和react要解决的事情和思想非常相近,所以导致很多人在选择到底使用哪种框架进行学习和开发的时候异常头痛。这个问题还是比较难解决的,仁者见仁智者见智,目前看来不仅公司和公司之间选择不同,就连很多大厂在部门之间也存在分歧,一个公司里很多部门都在使用不同的框架。

 

今天我就我自己的经验来分析一下这两款框架的区别,看看你看重那个方面。

1.模板引擎:vue的视图模板采用类html的写法加上自己的指令与自定义属性组成,在多数情况下是要比react的JSX写法开发效率高和清晰的。但是在复杂场景下,类html的写法有时候很比较麻烦或者难以胜任,这个时候就凸显出JSX的语言表现力的丰富了。不过vue目前也支持jsx的写法。 

2.样式:vue的样式和模板可以写在同一个文件里,而react的主流做法还是要单写一个样式文件,虽然区别不大,但还是更喜欢能少写几个文件的感觉。另外vue的class有多种写法,sting/object/array都可以还能自动merge,体验很好。而react本身不行,需要借助类似classname的库来实现。

3.数据响应逻辑:vue使用代理/拦截的方式使得我们直接修改data就可以了,而react需要使用setState api来实现。另外由于vue的实现方式,所以vue知道我们修改了哪些东西,并且还有watch/computed等钩子公开发人员使用,而反观react就比较不人性化了,需要我们自己在业务逻辑层diff才知道。

4.配套设施:这里指的就是常用的配套库(全家桶),vue基本上是官方给了我们一个最佳实践,直接按照官方推荐的全家桶来构建我们的应用就够了,而react就比较开发,对于社区依赖更多,所以相关的配套设施需要我们自己去找去接,社区大神们的思想各不相同,所以比vue要费心。比如我要用redux还需要引个react-redux,而且居然还不支持异步,我还得引个redux-thunk,可能我还得跟redux-saga对比下,较真一点的可能还不敢人云亦云,还要亲自看看源码才行,另外明知道我是个选择困难症患者还要有个mobx来捣乱。可能当我找到自认为是最佳实践的方案的时候,项目已经黄了或者社区又出了新的方案(哭晕在厕所 =。=...)

5.性能:在vue1.0时代,vue的性能的确是比react要弱的,但进入2.0时代,vue果断借鉴了一大波react在性能方面的优化经验(这里不论这种做法怎么样啊),反正瞬间就把性能基本给拉平了。再加上react性能需要非常有经验,非常注意你自己代码的写法才能发挥的出来,比如你要配合reselect库或者对purecomponent/shouldupdate等很了解。否则你写出来的应用的性能必定是奇慢的,而vue你其实不必关注那么多,这得益于他的数据响应的内部实现。在绝大多数情况下你不需要怎么关注你的写法是否导致了很多多余的计算和渲染开销。

6.使用人群:这点是vue的说大不大说小不小的命门,vue在国外是没有react知名的,所以在国外react是一枝独秀,导致你学习vue可能无法跟世界接轨。另外一个就是不知道曾几何时,面试官有意无意的会透露出如果你只会vue,那你一定是个初学者是个low逼....一方面原因的确vue的上手难度要比react小很多,刚才也说了很多vue不需要关心这关心那,所以新手学习vue的更多。但我其实很不能理解这点!!为什么学习vue就要比学习react低人一等。为啥新手学的多的东西就不能是好东西,非的是晦涩难懂,很难掌握的东西才能凸显出你的与众不同和不凡么?我觉得这个价值观是非常的扭曲的。在我看来不说设计思想,就单说vue的实现方式我认为是要比react高级和先进的。


好了,说了真么多,我猜你可能还是不知道要选哪个框架,哈哈哈... 真是个世界性难题啊。 这么说吧,个人认为,抛开偏见,中小型项目我推荐使用vue来开发,原因很简单

1.需要考虑的事情少,
2.开发效率高,
3.比较初级的工程师也可以轻松胜任。 

而对于大型项目,还是推荐react去开发,1.你的掌控力更多。2.由于一不小心就会导致性能下降,所以会迫使你去好好组织你的代码,所以写出来的东西更规范,可维护性更高。这个对于大型项目是至关重要的。谁也不希望一个好几年写出的大型项目因为走了几个老人就无法维护了吧。

站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9045

不要过度使用React.useCallback()

我博客的一位读者在Facebook上联系到我,提出了一个有趣的问题。他说,他的队友不管在什么情况下,都会把每一个回调函数封装在 useCallback() 里面。

React高级性能优化

当大家考虑在项目中使用 React 的时候,第一个问题往往是他们的应用的速度和响应是否能和非 React 版一样,每当状态改变的时候就重新渲染组件的整个子树,让大家怀疑这会不会对性能造成负面影响

关于创建React App的8个有趣事实

你所知道的一些事情,你可能不知道的一些事情Create React App是搭建React项目的快速方法。这样我们可以重点放在代码上,而不是构建工具上。

用思维模型去理解 React

我了解到,掌握了某种语言、框架或工具的人与没有掌握的人之间的最大区别在于他们所使用的思维模型(Mental Model)。前者拥有清晰而先进的思维模型,而后者则没有。

react中实现可拖动div

把拖动div功能用react封装成class,在页面直接引入该class即可使用。title为可拖动区域。panel为要实现拖动的容器。优化了拖动框超出页面范围的情况,也优化了拖动太快时鼠标超出可拖动区域的情况

React中组件逻辑复用的那些事儿

基本每个开发者都需要考虑逻辑复用的问题,否则你的项目中将充斥着大量的重复代码。那么 React 是怎么复用组件逻辑的呢?本文将一一介绍 React 复用组件逻辑的几种方法,希望你读完之后能够有所收获。如果你对这些内容已经非常清楚,那么略过本文即可。

从 React 切换到 Vue.js

React 和 Vue 的关系有点像可口可乐和百事可乐,你在 React 中做的很多事情都可以在 Vue 中完成。当然这里也存在一些重要的概念差异,其中一些反映了 Angular 对 Vue 的影响。

使用React严格模式避免过时的代码和副作用

严格模式是用于突出显示应用程序中潜在问题的工具,它不会呈现任何可见的UI。它只用于激活对其后代的额外检查和警告。严格模式不会影响生产环境。

React常用hook的优化useEffect浅比较

先说说react原版的useEffect使用起来不便的地方,这里的effect每次更新都会执行,因为第三个参数一直是不等的,第二是在deps依赖很多的时候是真的麻烦

react依赖node吗?

学习React前提必须拥有Javascript和DOM知识。这个门槛已经很低了。但是很多的教程里面都提到npm,nodejs.要先安装nodejs。但是react并不依赖node。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广