前端框架趋势:React与Vue深度对比

简介: 前端框架趋势:React与Vue深度对比

为什么写这篇文章?

最近我在开发一个 real-time Web 开源库,但是我要和团队讨论,这个库应该优先支持某些框架。

为此,我需要做一下开源框架的市场调研,拿到一些数据。

此外,我前段时间写了一篇文章,通过概念和语法对 React 和 Vue 进行了简单的对比,但是有些掘友认为深度不够,所以这篇也可以视作上一篇的补充。

前端框架大比拼:2022年的Vue与React谁更胜一筹?

这一次,我会进行更加深度全面的对比,通过多个维度和真实数据来让大家搞清楚到底谁是 2022 年最强前端框架。


个人看法


我使用 React 和 Vue 的时间都超过 6 年,这两个框架都是很优秀的前端框架,而且在各大 IT 社区每年的统计和调查中都会被赋予最流行、最受欢迎、最常用的 Web 框架的称号。这两种框架都为 Web 开发人员提供了高效开发应用的各种方式,同时具备了非常大的影响力和生态环境。

所以我不会讨厌任何一个框架,也绝对不会攻击任何一个框架。我只是想做个对比,只是想让大家搞清楚它们之间的差距、优势劣势和不同。从而更加清楚自己应该选择哪个框架。


Vue 简介


2014 年由独立开发者 EvanYou 开源,他是前 Google 员工,他想创造一个框架,将 Angular、Ember 和 React 等最受欢迎的框架中的最佳实践结合起来,让编写 Web 应用更快、更容易、更轻松。现在 Vue 由 Vue.js Core Team 开发维护。


React 简介


2013 年由 Facebook 开源,并由这家公司维护。之前曾有段时间大家对 React 的开源许可证存在质疑,但是目前它在 MIT 许可证下运行。React 有企业的支持,在未来有着更强的稳定性。


相似之处


  • 虚拟 DOM:两者都有虚拟 DOM,都只会更新那些已经修改的对象,这样可以节省 DOM 操作的时间和资源。
  • 基于组件的开发模式:两者都有大量的组件库,可以提高代码的重用和开发过程的效率。
  • 专注于视图:两者都只关心渲染视图,像路由、状态管理等独立的部分都由其他库去完成。
  • JavaScript:两者都依赖 JavaScript。


不同之处


  • 语法:两者的差异主要是语法。默认情况下,Vue 使用 SFC,React 使用 JSX。

在 React 中只有 JSX,而 Vue 中将 HTML、CSS 和 JS 分离了。所以很多初级前端开发者可以很好的学习 Vue,而学习 React 需要对 JavaScript 相对有一定要求。这也是更多新手前端开发者和初级前端开发者更热爱 Vue 的一个原因。


详细对比

人气和社区

Github


Github 是全球最大的开源社区。

Vue React
star 199k 194k
commit 3508 15141
contributors 345 1571
used by 2.8m 11.2m

可以看到,Vue 除了 star 略微领先以外,提交数、贡献者和用户都低于 React 5 倍左右。


Stack Overflow


StackOverflow 是全球最大的程序员技术交流社区。

React 有 691985 个结果。

image.png

Vue 有 126478 个结果。

image.png

React 大概是 Vue 的 5 倍。


builtwith


buildwith 是检测某项技术有多少网站在实际使用的社区。

使用 React 的网站有 10710588 个。

image.png

使用 Vue 的网站有 1982621 个。

image.png

使用 React 的真实网站大概是 Vue 的 5.4 倍左右。


npm trends


npm trends 是一个分析 npm 下载趋势的社区。

这是 Vue 和 React 过去 5 年的对比。

image.png

最新的一周,React 下载量是 16539721,Vue 是 3439662。两者相差大概是 5 倍。


JetBrains


JetBrains 每年都会有程序员调查,在去年的调查中,最受欢迎的 JavaScript 框架是 React。不过 Vue 也在逐年上升。

image.png


StateOfJs


stateofjs 是一个每年都会调查 JavaScript 生态的网站。

它的最新数据如下:

image.png

可以看到 React 的使用程度遥遥领先,仅次于 Webpack 和 Express。Vue 还没有过中线。

想学习 React 的用户数量排到了第 6 位,Vue 则排到了第 12 位。

性能

krausest


krausest 是一个测试各大框架性能的网站。

基准测试是在 MaBook Air M1(16 GB RAM,OSX 12.5)、Chrome 104.0.5112.79 (arm64))上使用 puppeteer 基准测试驱动程序运行的。

对比如下:

image.png

可以看到 Vue3.2 会比 React 18.2 的性能更强。

不过性能的最终结果取决于前端工程化、前端性能优化工作和实际应用的大小。


生态


在生态建设上,React 和 Vue 的路线是不一样的。

Vue 的 Cli、路由和状态管理,都是 Vue 的核心库的一部分,受到官方支持和维护。

但是 React 团队只负责维护 React 这一个项目,脚手架工具、路由和状态管理都来自于第三方的社区开发者。


我建议你要学什么?


对比结束了,最后我送给你一些个人的忠告。

在开始之前,我先聊几句自己的亲身经历。

我曾经在上海工作过一年,在某家互联网企业担任前端研发经理。

当时由于前任前端研发经理突然离职,加上前端团队自身的一些问题,导致人员流动频繁,团队成员极其不稳定。我是被技术中心负责人紧急招聘过来的,属于临危受命。

曾经有一段时间,我在负责全职招聘。因为那时整个前端团队就只剩下三四个人了。

最忙的时候,我甚至会停止手上的所有工作,全职招聘。一天刷的简历不会低于 1000 份,1000 份什么概念?平均每 3 到 5 分钟一份简历,不吃不喝也要刷 10 个小时左右。那时候我每天工作时间会超过 16 个小时,每天都会熬夜到凌晨三四点,然后睡在公司,第二天早上继续工作。现在想想,那时压力真的很大。不过在当时并没有这种感觉,反而很自然地融入了进去。

这是当时我在 BOSS 直聘上面的排名,全上海排到第 2 名。可想而知我沟通和面试了多少位前端。

image.png

我说了这么多,就是想表达我会比大多数前端开发者更懂前端开发者。

当时在上海的前端行情,主要集中在 Vue 和 React 两门框架上。求职者的 Vue 和 React 的比例大概是 5:1 到 7:1 之间。具体数据我没统计,但是大概只这样。我相信这能够代表整个中国的前端行情。很多初学者认为 Vue 的学习门槛低,容易学。所以大部分初中级前端工程师都会 Vue,但是不会 React。

反观招聘方,稍微有些规模的大厂,基本上用 React 的居多,用 Vue 的也有,但是很少。而还有一些中小厂也在用 React,就比如我当时所在的公司。这就形成了和大厂抢人的情况。

为了能挖到人才,就必须提供更高的薪水。

道理就这么简单,所以很多情况下,同级别的 React 开发人员会比同级别的 Vue 开发人员的薪资更高一些。

越到职业后期,这个趋势越明显。擅长 React 的前端架构师会比擅长 Vue 的前端架构师有更多选择的机会。

而且技多不压身,同时掌握 React 和 Vue 的话,同样有更多机会。但是每个人的精力是有限的,同时深入掌握两门功能类似的框架会花费很多精力,也没有这个必要。现代职场鼓励一专多能,找准你的专项,其他就没必要那么深入了。

以上,就是为什么我选择 React 的原因。



相关文章
|
1月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
77 9
|
27天前
|
存储 缓存 JavaScript
如何优化React或Vue应用的性能
需要注意的是,性能优化是一个持续的过程,需要根据具体的应用场景和性能问题进行针对性的优化。同时,不同的项目和团队可能有不同的优化重点和方法,要结合实际情况灵活运用这些优化策略,以达到最佳的性能效果。
107 51
|
27天前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
100 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
27天前
|
监控 JavaScript 前端开发
如何在实际应用中测试和比较React和Vue的性能?
总之,通过多种方法的综合运用,可以相对客观地比较 React 和 Vue 在实际应用中的性能表现,为项目的选择和优化提供有力的依据。
33 1
|
29天前
|
JavaScript 前端开发 开发者
React和Vue有什么区别?
React 和 Vue 都有各自的优势和特点,开发者可以根据项目的需求、团队的技术背景以及个人的喜好来选择使用。无论是 React 还是 Vue,它们都在不断发展和完善,为前端开发提供了强大的支持。
73 2
|
28天前
|
JavaScript 前端开发 测试技术
React和Vue的性能对比如何?
需要注意的是,性能不仅仅取决于框架本身,还与开发者的代码质量、架构设计以及项目的优化程度等密切相关。因此,在评估性能时,应该综合考虑多个因素,而不是仅仅局限于框架之间的比较。
108 1
|
1月前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
33 1
|
1月前
|
JavaScript 前端开发 算法
React 框架和 Vue 框架的区别是什么?
React框架和Vue框架都是目前非常流行的前端JavaScript框架,它们在很多方面存在区别
|
1月前
|
前端开发 JavaScript Android开发
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第27天】React Native 是跨平台开发领域的佼佼者,凭借其独特的跨平台能力和高效的开发体验,成为许多开发者的首选。本文探讨了 React Native 的优势与挑战,包括跨平台开发能力、原生组件渲染、性能优化及调试复杂性等问题,并通过代码示例展示了其实际应用。
63 2
|
25天前
|
前端开发 JavaScript 算法
探索现代前端框架——React 的性能优化策略
探索现代前端框架——React 的性能优化策略
21 0
下一篇
DataWorks