react和vue区别以及为什么会说react适合大型项目_react和vue 谁更适合开发大型项目-CSDN博客

本文链接：https://blog.csdn.net/qq_24428851/article/details/142264877

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

什么是大型项目

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

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

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

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

大型项目的庞大带来的是代码优化以及性能优化，

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是响应式的进行更改。

通过js来操作一切，还是用各自的处理方式

react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等，
vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。

类式的组件写法，还是声明式的写法

react是类式的写法，api很少，也有傻瓜组件的函数式写法
而vue是声明式的写法，通过传入各种options，api和参数都很多。

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

组件封装（扩展）

react的高阶组件hoc进行封装，react提倡精度更细，纯渲染的的组件封装，也就是什么都交给js去做
vue使用mixins进行扩展

社区活跃

react做的事情很少，很多都交给社区去做
vue很多东西都是内置的，写起来确实方便一些，

接下来说一些更细致的区别，也可以说是它们的缺陷，也是对上述几点的补充

复用组件

react不太适合复杂逻辑。代码复杂性随着内联模板和 JSX 的增加而增加。如果有太多的小组件可能增加项目的庞大和复杂
vue在这点做的很好。但是vue的数据双向绑定（响应式）导致数据的稳定性不足，过多的数据会产生过多的watch，从而导致性能上降低。
vue2.0+和react都是单向数据流，只不过vue实现了数据双向绑定的语法糖，不要混淆了同志们。

入门难度

vue对于新手比较友好。react有一个学习曲线。
react也比较趋向于面向对象写法。

性能优化

vue的性能上相比与react还是比较高效的。例如react在渲染的时候对将组件以及后代组件全部重新渲染，当然也不是完全重新渲染，但是这种对比不同点渲染又会带来新的性能损耗。
而vue的更新要比react粒度要更细也更加不用去人为的关心，
虽然react可以使用shouldComponentUpdate和pureComponent帮助我们对此进行优化，但仍然不及vue性能
但是react的手动性能优化要强于vue，因为react编写自由度更高

代码量

react的高自由度也代表的开发功能的复杂性，几乎所有的功能逻辑都需要自己手动编写，这无疑提升的项目成本
vue虽然有些功能不够完善，但是自己开发设计也不会太过困难。
vue生产打包体积更小，实现功能的代码也要比react少。

渲染机制（对于第三点的补充）

vue的订阅机制能够明确知道哪个value发生了改变，然后只重新渲染该部分即可
react只要调用的setState就会触发render重新渲染，甚至视图什么数据都没使用，它不关心也不知道是哪个数据发生了改变。当组件或节点比较多的时候，更新数据可能会造成很多不必要的虚拟DOM的构建，庞大的节点树也拖慢了diff的速度，这时就需要引入一些优化方案，比如PureComponent配合ImutableJS， PureComponent利用props和state属性的浅对比来决定要不要重渲染，如果浅对比结果是相等，则组件及其子组件不参与重渲染。

总结

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

附上几个链接可以看看

react VS vue 我们究竟该如何选择(从项目的角度帮你分析)
React还是Vue：你该如何选择？
哔哩哔哩（B站）的前端之路
为什么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