酷狗音樂- Vue / React 全家桶的兩種實現

引言

兩個月前用 Vue 全家桶實現過一次 酷狗音樂，最近又用 React 全家桶重構了下，最終成果和 Vue的實現基本一致，放個圖：

手機預覽戳 Vue 版本, React 版本。

demo 選擇

原本想用 React 全家桶從新選個項目，可是沒有找到合適的，最終就重構了下，由於這個項目難度適中，很是適合練手。

• 接近 10 個單頁，內容很少很多，須要 router
• 音樂播放做爲全局組件，數據全局共享增刪改，須要 redux, vuex
• 好幾個公共組件，能夠封裝複用

項目源碼在 這裏，歡迎你們 star、fork

項目對比

我從根目錄開始分析，左邊 vue 右邊 react

根目錄

src 目錄

這裏有幾個區別：

• React 版本並無 router 文件，由於它支持 path 和 component 屬性，來定位要渲染的組件，就像這樣：

  

  而 Vue router 彷佛並無提供 path 和 component API ，因此必需要到 Router 配置裏去讀取 path 和 component 屬性。

• React 也沒有 mixins, 由於用 HOC 取代了 mixins。以我放在 components/HOC/index.js 裏的代碼爲例：

  

  並且，你也能夠在裏面加上生命週期鉤子等等，實際上，React 以前也是採用 mixins 實現的，不事後來改了。

• 一個 .vue 組件對應 React 中三個文件？在不少狀況下，是這樣子。Vue 的行爲結構表現分離，很明顯，而 React 的分離雖然不是很明顯，但實際上也是有的。以 App.vue 爲例

  • App.vue 裏的 style 對應 React 裏的 App.less ，毫無疑問
  • App.vue 裏的 template 和 props 對應 React 裏的 App.js ，React 稱爲 Presentational Components，通常只有一個 render 方法 return html, 譬如：

• App.vue 裏剩餘的部分，包括 ajax, mapState, 狀態的變動，以及生命週期鉤子等等，都是對應 React 裏的 AppContainer.js ，React 稱爲 Container Components. 如圖：

實際上， AppContainer.js 負責行爲邏輯，而 App.js 負責結構展現， App.less 負責樣式表現，依舊是 行爲/結構/表現 的分離。只不過與 Vue 稍有不一樣而已。這一點上，React 多費些腦力和膠水代碼。

Vuex 和 redux 目錄

這裏跟個人實現有關係，redux 多是比 Vuex 麻煩些，但不至於圖示如此誇張。由於我重構的時候改了邏輯。

selectors

selectors 和 Vue 中的 getters 有類似，但底層原理不一樣。舉個例子，咱們若是要從一個巨量的 array 裏找到某個數據，比較耗性能怎麼辦？很明顯能夠對參數作個緩存，若是查詢 id 和上一次同樣，就返回上次的結果，不查詢了。selectors 作的就是這個事。

actions

React 的 actions 和 Vuex 中的 actions 相似，都是發送指令，但不操做數據。

reducers

actions 發送指令，最終會到 reducers 裏合併數據，與 Vue 中的 mutations 相似。

若是你注意的話，就會發現，reducers 裏合併數據老是返回一個新對象。而 Vuex 中，咱們是直接修改 state 的數據的。

這裏其實牽涉到了 Vue 和 React 中的一個大不一樣。

總結

整體的目錄和架構是相似的，不過具體用起來差異還不小。

技術棧的廣度

Vue 全家桶只要加上 Vuex 和 Vue-router 就能夠了，而 React 在讀完 redux, react-redux, react-router 文檔以後，會發現他們還拆分、引出了很多東西，譬如 reselect, redux-thunk 等等，而且 redux, reselect還不是侷限於 React 的。

API

實踐過程當中，發現 Vue 中的一些相似的 API 在 React 中被進行了重構，好比 React 用 createRef 取代了 ref="string"，用 HOC 取代了 mixins 等等，雖然有些不習慣，可是感受還好。

求職

本人最近正在找工做，有興趣的歡迎私信哦，座標上海，半年經驗，比較瞭解 Vue+es6，瞭解一點 React，具體簡歷 戳這裏