react好还是vuejs好

夏杰吖_6827

夏杰吖_6827

2019-01-21

9640人浏览

原创

不论是从大小、性能、简单性还是学习曲线上来看, vuejs是现在最好的选择,它的轻量化和性能可以同时在项目中使用两个框架(如angular和vue)而 react代码难以维护和去修改它

现如今,Vue.js 在 Github 上的流行指数已经超过了 React而且还在不断的增长,由于它并没有像 Facebok或Google那样的大公司支持,但这种增长让人非常惊讶。

接下来在文章中将会分享一些对 Vue 流行的看法,以及为什么它能超过竞争者。以及它俩之间的区别,并说明为什么 React(即使它是个好框架)经常很有欺骗性

【推荐课程: React教程、vue.js教程】

【推荐文章:vue 与 react 区别有多大】

1. Web 开发的发展

在上个世纪九十年代,写网站还只是纯粹的 HTML,加上一些简单的 CSS 样式而已。好处就是非常简单。坏处就是缺少很多功能。之后就出现了 PHP,于是我们很高兴地把代码写成了这个样子

虽然今天看来这段代码十分糟糕,但在当时是很大的进步。这种进步到现在依然没变:选择我们喜欢的新语言、新框架,直到某一天出现更好的竞争对手。

在 React 出现之前我用过 Ember。之后我切换到 React,它把所有东西都看作 Web 组件的方式,它的虚拟 DOM,和高效的渲染都让我耳目一新。虽然并不是一切完美,但从编写代码的方式来看,它是个巨大的进步。

后来我决定切换到 Vue.js,不再使用 React。

React 并非很差,但我发现它太笨拙,难以掌握,而且有些地方的代码看起来完全没有逻辑性。而 Vue 解决这些问题的方法让我感到很轻松。

原因如下:

2. 性能

首先来谈一谈性能。

每个 Web 开发者都会面临着带宽的限制,因此网页的大小十分重要。网页越小越好。而现在由于移动浏览器的流行,这个问题比几年前更重要。

我们来看一组数字:

Vue 库的大小为 25.6KB。而要让 React 的架构达到相似的功能,需要 React DOM + React Router + React 和其他插件,总共是 48.8KB。

Vue 得一分。

实际的性能如下图所示:


未标题-2.jpg

可见,这些性能测试显示,Vue 比 React 占用的内存更少,运行速度更快。

Vue 的渲染流水线更快,这在构建复杂应用时非常有用。项目渲染更高效,因此不需要在优化代码上考虑太多,从而把更多精力花在对项目真正有用的功能上。它在移动设备上的性能也很不错,因此不需要采用某种算法使之在手机上能更流畅地渲染。

从 React 换成 Vue.js 时,你不需要在大小和性能方面做出妥协。你能同时拥有两者。

3. 学习曲线

学习 React 还算不错。整个库都围绕 Web 组件构建,这一点很好。React 的核心很好、很稳定,但我一直没弄明白它的高级路由配置。这么多路由库的版本是做什么的?现在的版本是4(+ React-router-dom),但我最终用的还是 v3。一旦你选择了版本,它还是很好用的,但学习的过程却非常痛苦。

第三方库

大多数现代框架都有同样的设计哲学:简单的、功能不太多的核心,然后加上其他的库来增强其功能。如果其他的库都能很容易地、用同一种方式集成,那么构建一个技术栈会非常简单。在我看来,这一步骤的简单、直接是非常重要的。

React和Vue都有一套工具帮你启动项目,并配置好各种工具。在React生态环境中,各种库可能很难精通,因为经常会有几个库试图解决同一个问题。

在这个问题上,React和Vue做得都不错。

代码清晰度

在我看来 React 的代码清晰度很差。JSX 允许在代码中嵌入 HTML 代码,是代码清晰度方面的灾难。

你还会遇到其他的问题。从组件模板中调用方法经常会造成无法访问this,结果不得不手动绑定:

<div></div>

有时候React会变得完全不合逻辑……

考虑到应用中很大可能会用到许多条件判断,JSX的方法就非常糟糕了。写循环的方式更像个笑话。当然你可以换个模板系统,从React栈中去掉JSX,也可以在Vue中使用JSX,但那并不是在学习框架时首先学习的方法,因此这里不做讨论。

另一点是,Vue并不要求你必须使用setState或任何类似的方法。当然你还是要在data方法中定义所有的state属性,但如果你忘了定义,那么控制台中就会显示提示。剩下的会自动内部处理,只需要在组件中修改值即可,跟使用普通的 Javascript 对象一样。

使用 React 会遇到很多错误。就算实际的原理很简单,这些错误也会减慢学习的进度。

至于简洁性,用 Vue 写出的代码要比其他框架写出的代码要小很多。这是 Vue 框架最好的一点。一切都很简单,只需几行简明易懂的代码就可以编写出复杂的功能。而使用其他框架,你需要多写 10%、20% 甚至 50% 的代码。

使用 Vue 也不需要学太多东西。一切都很直观。书写 Vue.js 代码能够以最接近的方式表达思想。

Vue 的这种易用性是个非常好的工具,使得接受 Vue 变得容易,也利于团队沟通。不论是你要改变技术栈的其他部分,还是需要在紧急状况下向团队里增加更多人,或者解释你的产品,Vue 都能节约你的时间,从而节约金钱。

时间估算也很容易,因为实现功能所需的时间不会超过开发者估算的时间,从而导致更少的误解、错误或乐观估计。Vue 需要理解的概念更少,使得与项目经理之间的沟通更容易。

4. 结论

不论是从大小、性能、简单性还是学习曲线上来看,拥抱 Vue.js 绝对是现在最好的选择,能同时解决时间和金钱问题。它的轻量化和性

能使得你可以同时在项目中使用两个框架(如Angular和Vue),因此更容易移植到 Vue。

至于社区和流行度,即使 Vue 现在获得了很多关注,但还很难说它达到了 React 的流行程度。但一个没有大型 IT 公司支持的框架能如此

流行,这个事实本身就值得关注。它的市场占有率已经迅速从一个不为人知的项目成长为一个前端开发中的最大的竞争者。

Vue 上的模块数量也在飞速增长,而且就算你找不到你需要的模块,自己写一个也不会花太多时间。

这个框架使得理解、分享和编辑变得容易。不仅阅读他人的代码会变得很容易,修改他人的实现也不难。有了 Vue,我只用了几个月的时

间,就可以自信地处理各个子项目,和外部人员对项目做出的改动。它为我节省了时间,使我能专注于系统设计上。

React 从设计上要求使用 setState 等辅助函数,而编程时肯定会有忘记使用的时候。还需要花很大精力去编写模板,编写模板的方式也会让项目变得难以理解和维护。

考虑到在大型项目中使用这些框架,使用 React 时你需要掌握其他库,并教给你的团队怎样使用。还要处理各种相关的问题(甲不喜欢这个库,乙不理解那个库等)。Vue 栈更简单,更适合团队使用。

写 React 代码的时候整天都要应付各种临时对策,努力写出有意义的代码,最后得到的只能是一团谁也看不明白的解决方案。就连你自己,过几个月之后这个解决方案也很难再读懂。你为了发布项目而不得不做出辛苦的努力,而得到的只是一个难以维护、充满错误的东西,连修改它都要经过一番培训才行。

这些负面因素是任何人都不希望在项目中看到的。为什么还要应付这些麻烦呢?就为了社区和第三方库?为了获得一小部分好处,我们要承受太多痛苦,而就连这一小部分好处,也越来越变得不重要。

React 曾经让我的生活更容易,但在某些方面又让实现变得更复杂。多年以后,Vue 终于让我得到了解脱。它的实现与我想像中的开发很相近,而且在开发过程中,除了需要实现的东西之外,基本上不需要考虑任何其他东西。它看上去很像原生的 JavaScript 逻辑(没有setState,也没有用来实现条件结构的特殊用法,也没有各种算法那)。只需要按你想像的方式写代码就行。它速度很快,很安全,而且能让你高兴。我很高兴看到 Vue 越来越多被前端开发者和公司接受,我希望它能结束 React 的统治地位。

前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.18

6367

5

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

2023.08.10

2668

6

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4656

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1395

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1838

5

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

10203

11

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

1000

4

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2904

5

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.14

1609

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.7万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 134.1万人学习