酷狗音樂- 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，具體簡歷 戳這裏