我为什么要立刻放弃 React 而使用 Vue?

From: https://baijiahao.baidu.com/s?id=1607323518011007619&wfr=spider&for=pc

 

CSDN

发布时间:18-07-29  19:28

现在,Vue.js 在 Github 上得到的星星数已经超过了 React。这个框架的流行度在不断增长,由于它并没有像 Facebok(React)或 Google(Angular)那样的大公司支持,这种增长让人非常惊讶。

我会在这篇文章里说明我对 Vue 流行的一些看法,以及为什么它能超过竞争者。由于 Vue 的设计哲学和特性与 React 十分相似,我会比较这两者,并说明为什么 React(即使它是个好框架)经常很有欺骗性。

 

Web 开发的发展

 

在上个世纪九十年代,写网站还只是纯粹的 HTML,加上一些简单的 CSS 样式而已。好处就是非常简单。坏处就是缺少很多功能。

之后就出现了 PHP,于是我们很高兴地把代码写成了这个样子:

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

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

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

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

我来说说原因。

 

性能

 

首先来谈一谈性能。

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

我们来看一组数字:

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

Vue 得一分。

实际的性能如下图所示:

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

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

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

 

学习曲线

 

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

第三方库

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

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

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

代码清晰度

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

你还会遇到其他的问题。从组件模板中调用方法经常会造成无法访问this,结果不得不手动绑定:<div onClick={this.someFunction.bind(this, listItem)} />。

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

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

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

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

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

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

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

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

 

结论

 

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

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

至于社区和流行度,即使 Vue 现在获得了很多关注,但还很难说它达到了 React 的流行程度。但一个没有大型 IT 公司支持的框架能如此流行,这个事实本身就值得关注。它的市场占有率已经迅速从一个不为人知的项目成长为一个前端开发中的最大的竞争者。

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

这个框架使得理解、分享和编辑变得容易。不仅阅读他人的代码会变得很容易,修改他人的实现也不难。有了 Vue,我只用了几个月的时间,就可以自信地处理各个子项目,和外部人员对项目做出的改动。它为我节省了时间,使我能专注于系统设计上。

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

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

作为开发者,我感到高兴、自信和自由。作为项目经理,我可以更容易地与团队进行计划和沟通。作为自由职业者,我省下了时间和金钱。

当然还有许多 Vue 没有覆盖到的需求(特别是如果你要构建原生应用的时候)。在那些领域 React 做得很好,但 Evan You 和 Vue 团队已经在着手解决这些问题了。

React 由于它很好的概念和这些概念的实现而流行。但现在看来,它的概念混乱得一团糟。

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

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

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

免责声明:这篇文章是我的个人观点,仅表达我现在的观点。随着技术的进步,这些观点会发生变化(可能会变好或变坏)。

原文:https://blog.sourcerer.io/why-you-should-leave-react-for-vue-and-never-use-it-again-5e274bef27c2作者:Gwenael P,前端工程师,Vue.js的狂热者。译者:弯月,责编:屠敏

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402474.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

本地同时修改2个版本

为什么80%的码农都做不了架构师&#xff1f;>>> 昨天讨论后我又想了想&#xff0c;你主要的需求是想在本地同时修改2个版本&#xff0c;用分支也可以做到&#xff0c;方法如下 上图是库的目录结构&#xff0c;比如Codes上做了个分支b1&#xff0c;想同时在本地编辑…

Linux C 内存管理

提到C语言&#xff0c;我们知道C语言和其他高级语言的最大的区别就是C语言是要操作内存的&#xff01; 我们需要知道——变量&#xff0c;其实是内存地址的一个抽像名字罢了。在静态编译的程序中&#xff0c;所有的变量名都会在编译时被转成内存地址。机器是不知道我们取的名字…

CSDN并购博客园遐想

我要打“假想”&#xff0c;打成了“遐想”&#xff0c;不过确实这篇文章属于我个人YY出来的。主要晚上写博客&#xff0c;用live writer发布好多次都不成功&#xff0c;然后用浏览器访问博客园首页&#xff0c;出现了下面画面。估计很多人都很熟悉这个界面&#xff0c;因为阿里…

android 多线程概述

android多线程&#xff0c;一直是一个麻烦的事情&#xff0c;要掌握它的本质&#xff0c;我们需要搞清楚一个问题&#xff0c;linux多线程的本质。 我们这篇文章&#xff0c;来讨论以下的议程&#xff1a; 了解linux的历程&#xff0c;了解android的异步任务机制&#xff0c;了…

Linux 进程间通讯详解一

进程间的通讯 两台主机间的进程通讯 --socket一台主机间的进程通讯 --管道&#xff08;匿名管道&#xff0c;有名管道&#xff09; --System V进程间通信&#xff08;IPC&#xff09;包括System V消息队列&#xff0c;System V信号量&#xff0c;System V共享内存 --socket 进程…

Linux C 函数指针应用---回调函数

&#xff08;这里引用了知乎上一些知友的回答&#xff0c;感觉不错&#xff0c;有助于理解&#xff0c;这里引用作为借鉴&#xff0c;如有冒犯&#xff0c;烦请告知&#xff09; 我们先来回顾一下函数指针&#xff0c;函数指针是专门用来存放函数地址的指针&#xff0c;函数地址…

laravel+vue开发环境搭建

From: https://www.jianshu.com/p/1c2cc11ba46f 描述 最近通过laravel在公司做了一些项目&#xff0c;但本身前端出身的我&#xff0c;总是感觉lphp开发过程中,前端写好页面&#xff0c;然后后端还需要再套blade模板&#xff0c;感觉这样开发效率太慢&#xff0c;太low。于是自…

GC Blocks Lost等待事件

在Oracle RAC环境中&#xff0c;无论我们从AWR自动负载性能报告、Statspack或者Grid Control中都可以找到Oracle数据库软件所收集的全局缓存工作负载统计信息(global cache work load statistics)&#xff1b;其中就包含了全局缓存块丢失(Global cache lost blocks)的统计信息(…

WCF简单教程(5) 用IIS做Host

第五篇&#xff1a;用IIS做Host之前几篇的Demo中&#xff0c;我们一直在用控制台程序做Server&#xff0c;今天换IIS来做Host&#xff0c;在Web Application中添加WCF的服务。其实在Web Application中添加WCF服务是最简单的&#xff0c;“新建项”中有专用的“WCF服务”&#x…

黑苹果折腾记

From: https://fishedee.com/2018/10/04/%E9%BB%91%E8%8B%B9%E6%9E%9C%E6%8A%98%E8%85%BE%E8%AE%B0/ 1 概述 黑苹果折腾记&#xff0c;原来的Macbook Pro已经不太好用了&#xff0c;运行编译时就开始风扇呼呼声的响&#xff0c;我只有想办法将苹果安装上现有的台式机上了。 类…

解决爬虫中文乱码问题

解决爬虫中文乱码问题 今天群里有个人反映某个网址爬出来的网页源代码出现中文乱码&#xff0c;我研究了半天&#xff0c;终于找到了解决方法。 一开始&#xff0c;我是这样做的&#xff1a; import requestsurl http://search.51job.com/jobsearch/search_result.php?fromJs…

一夜暴富之前的漫漫长路

一夜暴富之前的漫漫长路发布于&#xff1a;2013-08-05 09:50阅读数&#xff1a;987那你现在在做什么&#xff1f; 唉&#xff0c;我讨厌这个问题。 事实上&#xff0c;我正在努力做一个新的项目&#xff0c;但没有取得任何的进展。 但是&#xff0c;我并没有抱怨什么&#xff0…

java开发过程中,报错Dangling meta character '*' near index 0,解决办法

From: https://blog.csdn.net/zhouzhiwengang/article/details/53493810 1、split方法转化字符串为数组&#xff1a; String[] strPicArr map.get("hw_pic").toString().split("*"); 报错&#xff1a; java.util.regex.PatternSyntaxException: Dangling…

演示:Linux工程环境应用实训(防火墙、NAT、静态路由)详细配步骤

各位童鞋注意&#xff1a;该实验完成可以使用GNS3与4虚拟机进行桥接&#xff0c;然后在一台物理计算机上完成&#xff0c;不虽要去拿真正的4台服务器或者交换机路由器来连成一个网络&#xff0c;现在大家都使用网络仿真教学与实验&#xff01;Linux工程环境应用实训&#xff08…

Linux架构

Linux架构 作者&#xff1a;Vamei 出处&#xff1a;http://www.cnblogs.com/vamei 欢迎转载&#xff0c;也请保留这段声明。谢谢&#xff01; 我以下图为基础&#xff0c;说明Linux的架构(architecture)。(该图参考《Advanced Programming in Unix Environment》) 最内层是硬件…

Linux C学习--getline()函数

getline()函数是什么&#xff1f;百度百科这样解释&#xff1a; getline不是C库函数&#xff0c;而是C库函数。它会生成一个包含一串从输入流读入的字符的字符串&#xff0c;直到以下情况发生会导致生成的此字符串结束。1&#xff09;到文件结束&#xff0c;2&#xff09;遇到函…

Mac10.14.4 独立显卡 影驰GTX 760 4GB成功驱动

先了解下这篇文章: https://blog.csdn.net/JoeBlackzqq/article/details/39612351 这是我的硬件配置! 当初装10.14.4时, 看网上文章说我的独显是无法驱动的,所以当时用的是我的核显(CPU i7-4770k HD4600)装上的. 但是在系统稳定的跑了个把月后,不知什么原因(一阵电流声), 我…

在Windows上编译MongoDB C Driver

2019独角兽企业重金招聘Python工程师标准>>> Mongodb 是采用 Scons 来构建的。Scons是一个Python写的自动化构建工具&#xff0c;从构建这个角度说&#xff0c;它跟GNU make是同一类的工具。所以要编译MongoDB的C语言驱动&#xff0c;不仅要有C/C开发环境&#xff0…

异常处理_Maven之web项目java.lang.LinkageError

浏览器运行项目异常如下: HTTP Status 500 -type Exception reportmessagedescription The server encountered an internal error () that prevented it from fulfilling this request.exceptionjava.lang.LinkageError: loader constraint violation: when resolving interfa…

pyramid新建项目

2019独角兽企业重金招聘Python工程师标准>>> 例子&#xff1a;本项目在D盘 (1) C&#xff1a;\Users\Adminstrator>D: #进入到D盘 (2) D:>mkdir test #新建目录test (3) D&#xff1a;\cd test #进入test目录 (4) D:\test>pcreate -s starter myproject #新…