都說react適合做大型項目簿废，但是什么是大型項目呢夸赫。

什么是大型項目

這個所謂的大項目應(yīng)該是指 多部門菩帝，多項目協(xié)作。而并不是頁面量和工作日茬腿，對于大公司呼奢，協(xié)作所帶來的成本，效率問題才是問題

為什么會說react要更適合大型項目切平，這么說的基礎(chǔ)又是什么

首先在上方已經(jīng)說過控妻，選用vue或者react作為大型項目的框架主要還是在于人，在于開發(fā)團(tuán)隊的統(tǒng)合程度

那為什么還要說react更適合大型項目呢揭绑，支點是什么呢？

1. 大型項目的龐大帶來的是代碼優(yōu)化以及性能優(yōu)化郎哭，

• react提倡的更細(xì)粒度的封裝他匪，帶來的組件的復(fù)用性提高。
• 更高自由度的編寫（幾乎無api）可以為手動優(yōu)化性能帶來更大的便利性

2.react社區(qū)的活躍性

• 這點會反復(fù)提及夸研，因為這點更加重要
• 社區(qū)提供了多樣性的解決方案和更多的選擇邦蜜，這對于一個大型項目（大量的坑）來說也是至關(guān)重要的

但是這些問題，經(jīng)過時間的沉淀亥至，vue終會解決悼沈，并且現(xiàn)在也不差

為什么說vue和react都適合大型項目，支點又是什么

團(tuán)隊的協(xié)同!!!

回過頭來說姐扮，對于更高自由度的react開發(fā)者而言絮供，每個人對于react的理解都是不一樣的，這是與前端開發(fā)模塊化思想背道而馳的茶敏。從這點上就需要領(lǐng)頭大佬的設(shè)計與把關(guān)能力要更優(yōu)秀壤靶，也最終落實到了人身上。

其實現(xiàn)在來說惊搏，vue和react都相差無幾贮乳，各有優(yōu)劣忧换，兩者差距更多的是在語法，社區(qū)活躍度向拆，實現(xiàn)原理之間的差距亚茬。能否做大型項目關(guān)鍵在于項目組的業(yè)務(wù)劃分、部門之間的協(xié)調(diào)效率上浓恳，因為大型項目不是一兩個人刹缝，三五個人能夠完成的。一個項目之所以稱為大項目是在于它是公司大量部門協(xié)同合作下的產(chǎn)物奖蔓。也就是說赞草，解決了項目劃分等問題，使用vue和react都是可以的吆鹤。

終歸落點在于項目協(xié)同方面厨疙。

接下來細(xì)說一下vue和react之間的區(qū)別

react和vue的區(qū)別

參考博客1

1.設(shè)計思想上的區(qū)別（數(shù)據(jù)是不可變的）

• vue的思想是響應(yīng)式的，也就是基于是數(shù)據(jù)可變的疑务，通過對每一個屬性建立Watcher來監(jiān)聽沾凄，當(dāng)屬性變化的時候，響應(yīng)式的更新對應(yīng)的虛擬dom知允。
• 把組件設(shè)計成純組件撒蟀，狀態(tài)和邏輯通過參數(shù)傳入，所以在react中温鸽，是單向數(shù)據(jù)流保屯，推崇結(jié)合immutableJs來實現(xiàn)數(shù)據(jù)不可變

react中數(shù)據(jù)都是進(jìn)行手動更改達(dá)到視圖更新，而vue是響應(yīng)式的進(jìn)行更改涤垫。

2. 通過js來操作一切姑尺，還是用各自的處理方式

• react的思路是all in js，通過js來生成html蝠猬，所以設(shè)計了jsx切蟋，還有通過js來操作css，社區(qū)的styled-component榆芦、jss等柄粹，
• vue是把html，css匆绣，js組合到一起驻右，用各自的處理方式，vue有單文件組件崎淳，可以把html旺入、css、js寫到一個文件中，html提供了模板引擎來處理茵瘾。

3. 類式的組件寫法礼华，還是聲明式的寫法

• react是類式的寫法，api很少拗秘，也有傻瓜組件的函數(shù)式寫法
• 而vue是聲明式的寫法圣絮，通過傳入各種options，api和參數(shù)都很多雕旨。

所以react結(jié)合typescript更容易一起寫扮匠，vue稍微復(fù)雜。不過vue3.0也全面支持typescript凡涩。而且vue3.0也更加趨向于react了棒搜。這一點在2019年年末推出的vue3.0先行版本已經(jīng)體現(xiàn)。所以這一點也不在是區(qū)別活箕，而是共同點

4. 組件封裝（擴(kuò)展）

• react的高階組件hoc進(jìn)行封裝力麸，react提倡精度更細(xì)，純渲染的的組件封裝育韩，也就是什么都交給js去做
• vue使用mixins進(jìn)行擴(kuò)展

5. 社區(qū)活躍

• react做的事情很少克蚂，很多都交給社區(qū)去做
• vue很多東西都是內(nèi)置的，寫起來確實方便一些筋讨，

接下來說一些更細(xì)致的區(qū)別埃叭，也可以說是它們的缺陷，也是對上述幾點的補(bǔ)充

1. 復(fù)用組件

• react不太適合復(fù)雜邏輯悉罕。代碼復(fù)雜性隨著內(nèi)聯(lián)模板和 JSX 的增加而增加赤屋。如果有太多的小組件可能增加項目的龐大和復(fù)雜
• vue在這點做的很好。但是vue的數(shù)據(jù)雙向綁定（響應(yīng)式）導(dǎo)致數(shù)據(jù)的穩(wěn)定性不足壁袄，過多的數(shù)據(jù)會產(chǎn)生過多的watch益缎，從而導(dǎo)致性能上降低。
• vue2.0+和react都是單向數(shù)據(jù)流然想，只不過vue實現(xiàn)了數(shù)據(jù)雙向綁定的語法糖，不要混淆了同志們欣范。

2. 入門難度

• vue對于新手比較友好变泄。react有一個學(xué)習(xí)曲線。
• react也比較趨向于面向?qū)ο髮懛ā?/li>

3. 性能優(yōu)化

• vue的性能上相比與react還是比較高效的恼琼。例如react在渲染的時候?qū)⒔M件以及后代組件全部重新渲染妨蛹，當(dāng)然也不是完全重新渲染，但是這種對比不同點渲染又會帶來新的性能損耗晴竞。
• 而vue的更新要比react粒度要更細(xì)也更加不用去人為的關(guān)心蛙卤，
• 雖然react可以使用shouldComponentUpdate和pureComponent幫助我們對此進(jìn)行優(yōu)化，但仍然不及vue性能
• 但是react的手動性能優(yōu)化要強(qiáng)于vue，因為react編寫自由度更高

4. 代碼量

• react的高自由度也代表的開發(fā)功能的復(fù)雜性颤难，幾乎所有的功能邏輯都需要自己手動編寫神年，這無疑提升的項目成本
• vue雖然有些功能不夠完善，但是自己開發(fā)設(shè)計也不會太過困難行嗤。
• vue生產(chǎn)打包體積更小已日，實現(xiàn)功能的代碼也要比react少。

5. 渲染機(jī)制（對于第三點的補(bǔ)充）

• vue的訂閱機(jī)制能夠明確知道哪個value發(fā)生了改變栅屏，然后只重新渲染該部分即可
• react只要調(diào)用的setState就會觸發(fā)render重新渲染飘千，甚至視圖什么數(shù)據(jù)都沒使用，它不關(guān)心也不知道是哪個數(shù)據(jù)發(fā)生了改變栈雳。當(dāng)組件或節(jié)點比較多的時候护奈，更新數(shù)據(jù)可能會造成很多不必要的虛擬DOM的構(gòu)建，龐大的節(jié)點樹也拖慢了diff的速度哥纫，這時就需要引入一些優(yōu)化方案霉旗，比如PureComponent配合ImutableJS， PureComponent利用props和state屬性的淺對比來決定要不要重渲染磺箕，如果淺對比結(jié)果是相等奖慌，則組件及其子組件不參與重渲染。

總結(jié)

我總結(jié)了一下眾多開發(fā)者博客內(nèi)容松靡。關(guān)于廣為認(rèn)知的react更適合大型項目的說法简僧，我更加認(rèn)同vue和react同樣都適合大型項目，小破站都知道吧雕欺，b站就是使用vue+koa進(jìn)行實現(xiàn)的岛马，你要說小破站不是一個大型項目么？當(dāng)然我現(xiàn)在還是一個新手屠列，只是對于兩個框架使用上一些淺顯認(rèn)知啦逆，歡迎大家來怒懟我哈。

附上幾個鏈接可以看看

1. react VS vue 我們究竟該如何選擇(從項目的角度幫你分析)
2. React還是Vue：你該如何選擇笛洛？
3. 嗶哩嗶哩（B站）的前端之路
4. 為什么react比vue更適合大型應(yīng)用夏志？這里面有一個總結(jié)了react和vue等框架的項目目錄，為了方便大家苛让，在文末直接粘出來吧沟蔑。

第一次寫，語言不夠凝練或者疏漏請諒解狱杰。希望大家可以從中提煉出自己的認(rèn)知理解瘦材。希望大家積極怒懟，大家一起進(jìn)步仿畸。

各大框架使用項目目錄（部分）

• React：螞蟻數(shù)據(jù)可視化食棕、愛彼迎朗和、飛豬、阿里大于簿晓、蝦米音樂眶拉、口碑開放平臺、貓途鷹抢蚀、喜馬拉雅FM镀层、斗魚、知乎皿曲、豆瓣唱逢、美團(tuán)外賣H5、房多多屋休、石墨文檔坞古、墨刀、TalkingData劫樟、xiaopiu痪枫、Teambition、Uber叠艳、倍洽奶陈、同盾科技、心知天氣附较、拼多多（APP內(nèi)嵌H5）吃粒、滴滴出行、Sentry拒课、途牛徐勃、優(yōu)酷、京東服飾+生鮮+旅行+賺錢H5早像、瓜子金融H5僻肖、算力矩陣、鏈家H5卢鹦、阿里云管理后臺臀脏、Coding、CodePen冀自、樹莓派揉稚、36氪、Notion凡纳、GoDaddy、站酷海洛帝蒿、Plotly荐糜、麥客CRM、特贊營銷日歷、鹿班暴氏、網(wǎng)易云閱讀PC端+網(wǎng)易云音樂H5延塑、獵聘網(wǎng)、看云文檔編輯頁答渔、NIKE官網(wǎng)关带、丁香醫(yī)生、去哪兒H5多個模塊沼撕、藝龍H5個別模塊宋雏、租租車H5、汽車之家車商城务豺、PayPal中國磨总、Pocket、友盟笼沥、iH5...
• Vue：餓了么蚪燕、愛奇藝、中國平安H5奔浅、簡書馆纳、途虎養(yǎng)車、小紅書汹桦、樂視商城鲁驶、手機(jī)搜狐、優(yōu)酷营勤、土豆灵嫌、掘金、微博H5葛作、大麥網(wǎng)H5寿羞、唯品會H5、小米商城H5赂蠢、芒果TV移動版绪穆、嗶哩嗶哩、又拍云虱岂、七麥數(shù)據(jù)玖院、OneAPM、阿拉丁小程序統(tǒng)計第岖、網(wǎng)易云信+手機(jī)網(wǎng)易+網(wǎng)易郵箱H5登錄頁难菌、今日頭條+西瓜視頻網(wǎng)頁版、貝店（APP內(nèi)嵌H5）蔑滓、大搜車郊酒、滴滴開源遇绞、高德開放平臺、京東拼購+領(lǐng)券+新人頻道H5+京東云燎窘、瓜子二手車H5摹闽、土巴兔、分期樂褐健、BITMAIN付鹿、小豬短租H5、IT桔子蚜迅、創(chuàng)業(yè)邦H5舵匾、拍拍貸、極客邦科技+極客時間慢叨、開源中國纽匙、少數(shù)派、藍(lán)湖拍谐、百度指數(shù)烛缔、微信公眾平臺、大魚號（UC云觀）轩拨、創(chuàng)客貼践瓷、兌吧、國美電器H5亡蓉、聚美優(yōu)品觸屏版晕翠、錢咖、試客小兵砍濒、賺客淋肾、雪球財經(jīng)、電玩巴士爸邢、Hao123觸屏版樊卓、彈個車、攜程H5多個模塊杠河、窮游網(wǎng)碌尔、一加手機(jī)...
• AngularJS（免費贈送的）：百度腦圖、eolinker券敌、海致BDP唾戚、極光、Worktile待诅、錘子科技官網(wǎng)叹坦、微信網(wǎng)頁版、iTunes Connect卑雁、阿里云管理后臺募书、鯨準(zhǔn)對接平臺...