你是否曾經在選擇 react 和 vue時猶豫不決 ? 
2017年已經完結,你該結束選擇選擇困難征了! 
我從2016下半年 ~ 2017陸陸續續研究使用vue全家桶和react全家桶已經一年多了,
不同的框架有不同的感受, 下面來談談我個人在學習和開發中對這兩個框架的感受 (個人觀點, 僅供參考)

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

• 1.學習曲線
• 2.開發效率
• 3.維護成本
• 4.性能對比
• 5.生態對比
• 6.技術提升
• 7.職位要求
• 8.學習建議

1.學習曲線

總體來說, vue全家桶的學習曲線肯定是比react全家桶平緩要平緩的:

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

2.開發效率

開發效率, 因人而異 (^_), 說幾點區別

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

3.維護成本

維護成本, 理論上和框架關系不大, 主要關系到團隊的開發規范, 指標, codeReview 和 個人

4.性能對比

vue和react的性能都能滿足實際生產需求, 不過vue的包更小巧; 我相信, 性能應該不是你選擇其中一個框架的首要原因

5.生態對比

從全球范圍來看, react的使用者更多, 生態圈更強大, 輪子也更多, 而且, react還有更為強大的 react-native(當然vue也有 weex, 但是量級暫時無法和RN抗衡); 從國內來看, vue使用的人更多(個人感覺, 主要是中小型公司) ,使用react主要是一些大公司和老司機,

6.技術提升

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

7.職位要求

現在一般的前端崗位都要求至少會使用 vue/react中的一種, 因為大部分公司已經使用這些框架在實際生產中一兩年了, 所以無論如何, 你至少需要精通一個框架, 例如vue, 因為這是你的飯碗, 便于你更快的干活兒, 你必須精通它; 當然, 如果時間允許, 還是建議你 avr這三種框架都學習一下, 以便在職位關鍵詞上匹配更多的公司

8.學習建議

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

只有不斷學習, 才能讓自己立于不敗之地!

不說了, 表演結束^_, 我去學習了...

轉載請注明原地址，我的新版博客：blog.nodejsx.tech 謝謝！