你是否曾經(jīng)在選擇 react 和 vue時(shí)猶豫不決 ? 
2017年已經(jīng)完結(jié),你該結(jié)束選擇選擇困難征了! 
我從2016下半年 ~ 2017陸陸續(xù)續(xù)研究使用vue全家桶和react全家桶已經(jīng)一年多了,
不同的框架有不同的感受, 下面來談?wù)勎覀€(gè)人在學(xué)習(xí)和開發(fā)中對(duì)這兩個(gè)框架的感受 (個(gè)人觀點(diǎn), 僅供參考)

本文將包含vue和react的以下方面

• 1.學(xué)習(xí)曲線
• 2.開發(fā)效率
• 3.維護(hù)成本
• 4.性能對(duì)比
• 5.生態(tài)對(duì)比
• 6.技術(shù)提升
• 7.職位要求
• 8.學(xué)習(xí)建議

1.學(xué)習(xí)曲線

總體來說, vue全家桶的學(xué)習(xí)曲線肯定是比react全家桶平緩要平緩的:

• (1)上手速度
  • vue具有良好且快速跟進(jìn)的中文開發(fā)文檔, 讓你可以快速上手, 官方的例子也足夠生動(dòng)
  • vue-cli拿來就用,css預(yù)處理器, css模塊化輕松實(shí)現(xiàn), 即使你不太懂 webpack
  • 相比之下, react的中文版跟進(jìn)沒有vue這么快, 對(duì)部分開發(fā)者來說會(huì)形成障礙.
  • react的腳手架: create-react-app, 搭建項(xiàng)目之后還需要改造, 自己實(shí)現(xiàn)css模塊化方案和css預(yù)處理器
• (2)編寫組件
  • react編寫組件相對(duì)更加自由,無需注冊(cè),核心api非常少,你只需要提前了解jsx語(yǔ)法
  • react組件是在 js中寫 html, 所以react的組件中可以注入更強(qiáng)大的邏輯操作
  • vue編寫組件只需要你懂 html/css/js即可, 但是需要去熟悉大量的api
  • vue的組件一般是在html中寫js表達(dá)式相對(duì)來說,邏輯處理能力會(huì)低于 react組件(雖然vue也支持jsx,但一般不這么做)
• (3)路由:vue-router 和 react-router
  • 相對(duì)來說, vue-router的學(xué)習(xí)比 react-router更簡(jiǎn)單, 文檔示例豐富
  • react-router更加強(qiáng)大, 因?yàn)樗酚上嚓P(guān)的東西都被視為組件(react-router4), 使用非常便利
  • react-router版本變化差異大, 你需要更多的時(shí)間去學(xué)習(xí)
  • vue-router默認(rèn)支持 keep-alive, 可以將路由組件完全保存在內(nèi)存中, 避免不必要的重復(fù)渲染, react-router暫時(shí)沒有
• (4)狀態(tài)管理vuex和redux系列
  • 總的來說react的狀態(tài)管理要比vue復(fù)雜很多
  • react狀態(tài)管理: redux/react-redux/react-router-redux/Hoc/pure-render/immutable/async/redux-saga...要學(xué)的東西和概念特別多, 例如函數(shù)式編程相關(guān)概念, 你要全部都弄明白的話, 建議閱讀源碼, 否則你只能是一知半解
  • 相對(duì)來說 vue的狀態(tài)管理 vuex更好掌握,概念更少

2.開發(fā)效率

開發(fā)效率, 因人而異 (^_), 說幾點(diǎn)區(qū)別

• vue提供各種指令和api, 可以說幫我們實(shí)現(xiàn)了部分我們邏輯, 例如 v-if ,$router, $route...
• react是聲明式的, api很少, 很多效果需要我們自己去實(shí)現(xiàn), 相對(duì)來說 react寫的代碼更多
• react組件在開發(fā)的時(shí)候要考慮 rerender的問題, 這一點(diǎn)在vue組件上基本上不用考慮
• 開發(fā)效率, 不能一概而論, 和團(tuán)隊(duì)的基礎(chǔ)建設(shè)有關(guān)系, 和個(gè)人能力也有關(guān)系

3.維護(hù)成本

維護(hù)成本, 理論上和框架關(guān)系不大, 主要關(guān)系到團(tuán)隊(duì)的開發(fā)規(guī)范, 指標(biāo), codeReview 和 個(gè)人

4.性能對(duì)比

vue和react的性能都能滿足實(shí)際生產(chǎn)需求, 不過vue的包更小巧; 我相信, 性能應(yīng)該不是你選擇其中一個(gè)框架的首要原因

5.生態(tài)對(duì)比

從全球范圍來看, react的使用者更多, 生態(tài)圈更強(qiáng)大, 輪子也更多, 而且, react還有更為強(qiáng)大的 react-native(當(dāng)然vue也有 weex, 但是量級(jí)暫時(shí)無法和RN抗衡); 從國(guó)內(nèi)來看, vue使用的人更多(個(gè)人感覺, 主要是中小型公司) ,使用react主要是一些大公司和老司機(jī),

6.技術(shù)提升

個(gè)人感覺, 弄懂react全家桶是一個(gè)漫長(zhǎng)的過程, 在學(xué)習(xí)react的過程中, 你需要學(xué)習(xí):react, jsx, redux, middleware, react-redux, react-router-redux, immutable, Hoc, generator, pure render, ES7, 函數(shù)式編程相關(guān)概念..., 你需要很多的思考, 甚至是閱讀源碼才能弄明白是它怎么回事. 這個(gè)學(xué)習(xí)的過程對(duì)你的提高是非常大的, 你明白了如何讓程序解耦, 如何避免重新渲染提高性能, 如何寫出健壯安全優(yōu)雅的代碼; 更重要的是你學(xué)會(huì)了思考, 學(xué)會(huì)了如何去優(yōu)化你的項(xiàng)目...所以, 不管怎樣, 你都要學(xué)學(xué)react, 這也許是對(duì)你前端生涯的升華

7.職位要求

現(xiàn)在一般的前端崗位都要求至少會(huì)使用 vue/react中的一種, 因?yàn)榇蟛糠止疽呀?jīng)使用這些框架在實(shí)際生產(chǎn)中一兩年了, 所以無論如何, 你至少需要精通一個(gè)框架, 例如vue, 因?yàn)檫@是你的飯碗, 便于你更快的干活兒, 你必須精通它; 當(dāng)然, 如果時(shí)間允許, 還是建議你 avr這三種框架都學(xué)習(xí)一下, 以便在職位關(guān)鍵詞上匹配更多的公司

8.學(xué)習(xí)建議

個(gè)人建議, 作為一個(gè)前端, 首先要打好專業(yè)基礎(chǔ), 再至少要深入學(xué)習(xí) vue 和 react 兩種框架, 不限于框架使用, 組件開發(fā), 性能優(yōu)化, 源碼解讀, SSR, 混合開發(fā). 這里為什么這里沒有提到angular呢? 因?yàn)樗谱兞? 變得你措手不及, 另外一點(diǎn)是, 現(xiàn)在在國(guó)內(nèi)vue和react是主流, angular更多是后臺(tái)開發(fā)者和一些老舊項(xiàng)目在使用. 那是不是學(xué)完這幾個(gè)框架就可以高枕無憂了? 當(dāng)然不是, 一入前端, 才知深似海, 那些說前端簡(jiǎn)單的, 我敢說他連css樣式都不懂, html屬性都不清, 更不用說易學(xué)難精的js了, 所以, 走自己的前端路讓他人默默裝 X 去吧; 你需要知道, 前端的世界變化太快, 半年不學(xué)習(xí)就到了淘汰的邊緣, 所以你需要不停的學(xué)習(xí), 你要學(xué)習(xí)的東西, 太多, 太多...

只有不斷學(xué)習(xí), 才能讓自己立于不敗之地!

不說了, 表演結(jié)束^_, 我去學(xué)習(xí)了...

轉(zhuǎn)載請(qǐng)注明原地址，我的新版博客：blog.nodejsx.tech 謝謝！