react和vue区别以及为什么会说react适合大型项目

news2024/9/20 22:33:02

都说react适合做大型项目,但是什么是大型项目呢。

什么是大型项目

这个所谓的大项目应该是指 多部门,多项目协作。而并不是页面量和工作日,对于大公司,协作所带来的成本,效率问题才是问题

为什么会说react要更适合大型项目,这么说的基础又是什么

首先在上方已经说过,选用vue或者react作为大型项目的框架主要还是在于人,在于开发团队的统合程度

那为什么还要说react更适合大型项目呢,支点是什么呢?

  1. 大型项目的庞大带来的是代码优化以及性能优化,
  • react提倡的更细粒度的封装,带来的组件的复用性提高。
  • 更高自由度的编写(几乎无api)可以为手动优化性能带来更大的便利性

2.react社区的活跃性

  • 这点会反复提及,因为这点更加重要
  • 社区提供了多样性的解决方案和更多的选择,这对于一个大型项目(大量的坑)来说也是至关重要的

但是这些问题,经过时间的沉淀,vue终会解决,并且现在也不差

为什么说vue和react都适合大型项目,支点又是什么

团队的协同!!!

回过头来说,对于更高自由度的react开发者而言,每个人对于react的理解都是不一样的,这是与前端开发模块化思想背道而驰的。从这点上就需要领头大佬的设计与把关能力要更优秀,也最终落实到了身上。

其实现在来说,vue和react都相差无几,各有优劣,两者差距更多的是在语法社区活跃度实现原理之间的差距。能否做大型项目关键在于项目组的业务划分、部门之间的协调效率上,因为大型项目不是一两个人,三五个人能够完成的。一个项目之所以称为大项目是在于它是公司大量部门协同合作下的产物。也就是说,解决了项目划分等问题,使用vue和react都是可以的。

终归落点在于项目协同方面。

接下来细说一下vue和react之间的区别

react和vue的区别

参考博客1

1.设计思想上的区别(数据是不可变的)

  • vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听,当属性变化的时候,响应式的更新对应的虚拟dom。
  • 把组件设计成纯组件,状态和逻辑通过参数传入,所以在react中,是单向数据流,推崇结合immutableJs来实现数据不可变

react中数据都是进行手动更改达到视图更新,而vue是响应式的进行更改。

  1. 通过js来操作一切,还是用各自的处理方式
  • react的思路是all in js,通过js来生成html,所以设计了jsx,还有通过js来操作css,社区的styled-component、jss等,
  • vue是把html,css,js组合到一起,用各自的处理方式,vue有单文件组件,可以把html、css、js写到一个文件中,html提供了模板引擎来处理。
  1. 类式的组件写法,还是声明式的写法
  • react是类式的写法,api很少,也有傻瓜组件的函数式写法
  • 而vue是声明式的写法,通过传入各种options,api和参数都很多。

所以react结合typescript更容易一起写,vue稍微复杂。不过vue3.0也全面支持typescript。而且vue3.0也更加趋向于react了。这一点在2019年年末推出的vue3.0先行版本已经体现。所以这一点也不在是区别,而是共同点

  1. 组件封装(扩展)
  • react的高阶组件hoc进行封装,react提倡精度更细,纯渲染的的组件封装,也就是什么都交给js去做
  • vue使用mixins进行扩展
  1. 社区活跃
  • react做的事情很少,很多都交给社区去做
  • vue很多东西都是内置的,写起来确实方便一些,
接下来说一些更细致的区别,也可以说是它们的缺陷,也是对上述几点的补充
  1. 复用组件
  • react不太适合复杂逻辑。代码复杂性随着内联模板和 JSX 的增加而增加。如果有太多的小组件可能增加项目的庞大和复杂
  • vue在这点做的很好。但是vue的数据双向绑定(响应式)导致数据的稳定性不足,过多的数据会产生过多的watch,从而导致性能上降低。
  • vue2.0+和react都是单向数据流,只不过vue实现了数据双向绑定的语法糖,不要混淆了同志们。
  1. 入门难度
  • vue对于新手比较友好。react有一个学习曲线。
  • react也比较趋向于面向对象写法。
  1. 性能优化
  • vue的性能上相比与react还是比较高效的。例如react在渲染的时候对将组件以及后代组件全部重新渲染,当然也不是完全重新渲染,但是这种对比不同点渲染又会带来新的性能损耗。
  • 而vue的更新要比react粒度要更细也更加不用去人为的关心,
  • 虽然react可以使用shouldComponentUpdatepureComponent帮助我们对此进行优化,但仍然不及vue性能
  • 但是react的手动性能优化要强于vue,因为react编写自由度更高
  1. 代码量
  • react的高自由度也代表的开发功能的复杂性,几乎所有的功能逻辑都需要自己手动编写,这无疑提升的项目成本
  • vue虽然有些功能不够完善,但是自己开发设计也不会太过困难。
  • vue生产打包体积更小,实现功能的代码也要比react少。
  1. 渲染机制(对于第三点的补充)
  • vue的订阅机制能够明确知道哪个value发生了改变,然后只重新渲染该部分即可
  • react只要调用的setState就会触发render重新渲染,甚至视图什么数据都没使用,它不关心也不知道是哪个数据发生了改变。当组件或节点比较多的时候,更新数据可能会造成很多不必要的虚拟DOM的构建,庞大的节点树也拖慢了diff的速度,这时就需要引入一些优化方案,比如PureComponent配合ImutableJS, PureComponent利用props和state属性的浅对比来决定要不要重渲染,如果浅对比结果是相等,则组件及其子组件不参与重渲染。

总结

我总结了一下众多开发者博客内容。关于广为认知的react更适合大型项目的说法,我更加认同vue和react同样都适合大型项目,小破站都知道吧,b站就是使用vue+koa进行实现的,你要说小破站不是一个大型项目么?当然我现在还是一个新手,只是对于两个框架使用上一些浅显认知,欢迎大家来怒怼我哈。

附上几个链接可以看看

  1. react VS vue 我们究竟该如何选择(从项目的角度帮你分析)
  2. React还是Vue:你该如何选择?
  3. 哔哩哔哩(B站)的前端之路
  4. 为什么react比vue更适合大型应用?这里面有一个总结了react和vue等框架的项目目录,为了方便大家,在文末直接粘出来吧。

第一次写,语言不够凝练或者疏漏请谅解。希望大家可以从中提炼出自己的认知理解。希望大家积极怒怼,大家一起进步。

各大框架使用项目目录(部分)

  • React:蚂蚁数据可视化、爱彼迎、飞猪、阿里大于、虾米音乐、口碑开放平台、猫途鹰、喜马拉雅FM、斗鱼、知乎、豆瓣、美团外卖H5、房多多、石墨文档、墨刀、TalkingData、xiaopiu、Teambition、Uber、倍洽、同盾科技、心知天气、拼多多(APP内嵌H5)、滴滴出行、Sentry、途牛、优酷、京东服饰+生鲜+旅行+赚钱H5、瓜子金融H5、算力矩阵、链家H5、阿里云管理后台、Coding、CodePen、树莓派、36氪、Notion、GoDaddy、站酷海洛、Plotly、麦客CRM、特赞营销日历、鹿班、网易云阅读PC端+网易云音乐H5、猎聘网、看云文档编辑页、NIKE官网、丁香医生、去哪儿H5多个模块、艺龙H5个别模块、租租车H5、汽车之家车商城、PayPal中国、Pocket、友盟、iH5...
  • Vue:饿了么、爱奇艺、中国平安H5、简书、途虎养车、小红书、乐视商城、手机搜狐、优酷、土豆、掘金、微博H5、大麦网H5、唯品会H5、小米商城H5、芒果TV移动版、哔哩哔哩、又拍云、七麦数据、OneAPM、阿拉丁小程序统计、网易云信+手机网易+网易邮箱H5登录页、今日头条+西瓜视频网页版、贝店(APP内嵌H5)、大搜车、滴滴开源、高德开放平台、京东拼购+领券+新人频道H5+京东云、瓜子二手车H5、土巴兔、分期乐、BITMAIN、小猪短租H5、IT桔子、创业邦H5、拍拍贷、极客邦科技+极客时间、开源中国、少数派、蓝湖、百度指数、微信公众平台、大鱼号(UC云观)、创客贴、兑吧、国美电器H5、聚美优品触屏版、钱咖、试客小兵、赚客、雪球财经、电玩巴士、Hao123触屏版、弹个车、携程H5多个模块、穷游网、一加手机...
  • AngularJS(免费赠送的):百度脑图、eolinker、海致BDP、极光、Worktile、锤子科技官网、微信网页版、iTunes Connect、阿里云管理后台、鲸准对接平台...
最后编辑于:2024-09-09 20:06:22


喜欢的朋友记得点赞、收藏、关注哦!!!

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

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

相关文章

开源waf牛了个b之长亭雷池

雷池官网: https://waf-ce.chaitin.cn/

IVF 视频文件格式

IVF IVF有两种定义,一种是 Intel创建,用于封装其Indeo编解码器。Indeo是一系列视频编解码器,由英特尔在1990年代开发,主要用于视频游戏和早期的互联网视频流;Indeo编解码器以其高压缩率和良好的视频质量而闻名&#x…

三好夫人 | 茶香月饼甜  浓情赏月圆

在这个金风送爽、丹桂飘香的中秋佳节,家家户户都沉浸在团圆与温馨的氛围之中。月饼,作为中秋的传统美食,承载着无数人对家的思念与美好祝愿。而今,当传统遇见创新,“三好夫人”——一个以男士滋补茶闻名遐迩的品牌&…

AI做梦,探索并还原你的梦

本文由 ChatMoney团队出品 作为一个爱幻想爱做白日梦的 i人,我常常就在想,什么时候能利用Al来帮助我找回一些被遗忘的、或者模糊不清的记忆? 有没有可能进入别人的梦境里瞧一瞧? 为什么世界上还有这么多的冲突和摩擦? 是不是因为人与人之间能够达到的…

OpenCV GUI常用函数详解

在OpenCV的High_level GUI模组中有很多GUI函数,下面介绍几个常用的函数。 图像显示窗口相关函数 生成图像显示窗口函数nameWindow() nameWindow()函数的原型如下: 函数用以创建一个给定名的图像显示窗口(后面简单叫做图像窗口)…

qt使用对数坐标的例子,qchart用QLogValueAxis坐标不出图解决

硬件:ThinkPad T15 系统:win10 专业版 qt版本:Qt 5.14.1 , QtCreator 4.11.1 软件界面放了一个QPushButton,一个QVBoxLayout,如下: 主要代码如下,我添加了两条曲线,…

Spring扩展点系列-SmartInstantiationAwareBeanPostProcessor

文章目录 简介源码分析示例 简介 spring容器中Bean的生命周期内所有可扩展的点的调用顺序 扩展接口 实现接口ApplicationContextlnitializer initialize AbstractApplicationContext refreshe BeanDefinitionRegistryPostProcessor postProcessBeanDefinitionRegistry B…

Python基础学习(1)

目录 一,表达式和变量 1,表达式 2,变量 二,类型 1,前言 2,动态性特征 一个技巧让python变量类型更加明确 3,变量的类型 1,整型 2,float 3,布尔型 4&…

border制作渐变色边框

border也可以做出渐变色效果 .themeConfig {width: 250px;height: 117px;border: 1.5px solid transparent !important;border-radius: 8px !important;background-clip: padding-box, border-box;background-origin: padding-box, border-box;background-image: linear-gradi…

linux第一课(操作系统核心)

一.关于linux (1)linux是一款开源的操作系统(是多用户,多任务,多线程)。 (2)一般所说的linux指的是linux核心,即对计算机硬件资源负责调度管理,主要职责是进程管理,内存管理文件系统,设备驱动&#xff0c…

轧钢测径仪对热轧产线实现温度系数自动修正!

钢材在轧制过程中,需要检测外径时,很多都处于高温状态,甚至是1000℃以上,这对轧钢测径仪是个巨大的考验,但测径仪在解决高温、水雾、氧化铁皮、震动等对测量影响的同时,还要考虑钢材热态下的膨胀造成的测量…

揭秘同态加密 (HE):你需要知道什么?

鉴于苹果公司发布了重要的 Swift 同态加密公告,Zama 高级软件工程师 Agns Leroy 详细解释了 HE 是什么、不同的方案及其功能,以及它在未来可能的用途。 7 月底,苹果隐私保护技术团队宣布了一项令人兴奋的新成果:‘swift-homomorp…

什么是WSL?

WSL(Windows Subsystem for Linux)是一个为在 Windows 10 和 Windows 11 上能够原生运行 Linux 二进制可执行文件的兼容层。 主要特点和功能包括: 一、运行 Linux 环境 允许用户在 Windows 系统上直接运行 Linux 命令行工具、脚本和应用程…

springboot系列--自动配置原理

一、容器功能 一、组件添加功能 一、Configuration Configuration有两种模式,Full模式与Lite模式。 1、配置 类组件之间无依赖关系用Lite模式加速容器启动过程,减少判断 2、配置类组件之间有依赖关系,方法会被调用得到之前单实例组件&#…

linux 操作系统下cupsdisable命令介绍和使用案例

linux 操作系统下cupsdisable命令介绍和使用案例 cupsdisable 命令是 Linux 操作系统中用于禁用 CUPS(通用打印服务)打印机的命令。它允许用户将指定的打印机设置为不可用状态,从而阻止任何新的打印作业被发送到该打印机 cupsdisable 命令概…

句子成分——每日一划(七)

目录 一、原句 二、第一部分 三、第二部分 一、原句 Such a state of affairs can only produce antagonism between the laboring class and the owning, i.e., do-nothing, class. The fight breaks out and hatred delivers its blows. 来源:Why I Was a Bur…

C++11第四弹:包装器

🌈个人主页: 南桥几晴秋 🌈C专栏: 南桥谈C 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据…

探索UWB技术的独特优势:实现高精度定位

UWB定位技术是一种利用无线信号进行精确位置定位的技术,它利用超宽带无线电信号通过测量信号的到达时间、相位差和信号能量等参数来确定物体的精确位置。 UWB定位技术具有多种优势,首先,它具有较高的定位精度,可实现毫米级的精确…

如何防止ZIP压缩文件被随意打开?

ZIP文件是常见的压缩文件格式,为了保护压缩包不被随意打开,很多人还会给ZIP压缩包设置密码,用于保护文件的数据安全,以下是一篇关于如何防止ZIP压缩文件被随意打开的详细探讨。 引言 ZIP文件因其高效的压缩率和广泛的兼容性&…

目标检测中的解耦和耦合、anchor-free和anchor-base

解耦和耦合 写在前面 在目标检测中,objectness(或 objectness score)指的是一个评分,用来表示某个预测框(bounding box)中是否包含一个目标物体。 具体来说,YOLO等目标检测算法需要在每个候选区…