資訊專欄INFORMATION COLUMN
摘要：引言兩個月前用全家桶實(shí)現(xiàn)過一次酷狗音樂，最近又用全家桶重構(gòu)了下，最終成果和的實(shí)現(xiàn)基本一致，放個圖手機(jī)預(yù)覽戳版本版本。的行為結(jié)構(gòu)表現(xiàn)分離，很明顯，而的分離雖然不是很明顯，但實(shí)際上也是有的。發(fā)送指令，最終會到里合并數(shù)據(jù)，與中的類似。
引言
兩個月前用 Vue 全家桶實(shí)現(xiàn)過一次 酷狗音樂，最近又用 React 全家桶重構(gòu)了下，最終成果和 Vue的實(shí)現(xiàn)基本一致，放個圖：
手機(jī)預(yù)覽戳 Vue 版本, React 版本。
demo 選擇本來想用 React 全家桶重新選個項(xiàng)目，但是沒有找到合適的，最終就重構(gòu)了下，因?yàn)檫@個項(xiàng)目難度適中，非常適合練手。
接近 10 個單頁，內(nèi)容不多不少，需要 router
音樂播放作為全局組件，數(shù)據(jù)全局共享增刪改，需要 redux, vuex
好幾個公共組件，可以封裝復(fù)用
項(xiàng)目源碼在 這里，歡迎大家 star、fork
項(xiàng)目對比我從根目錄開始分析，左邊 vue 右邊 react
根目錄 src 目錄這里有幾個區(qū)別：
React 版本并沒有 router 文件，因?yàn)樗С?path 和 component 屬性，來定位要渲染的組件，就像這樣：
而 Vue router 似乎并沒有提供 path 和 component API ，所以必須要到 Router 配置里去讀取 path 和 component 屬性。
React 也沒有 mixins, 因?yàn)橛?HOC 取代了 mixins。以我放在 components/HOC/index.js 里的代碼為例：
而且，你也可以在里面加上生命周期鉤子等等，實(shí)際上，React 之前也是采用 mixins 實(shí)現(xiàn)的，不過后來改了。
一個 .vue 組件對應(yīng) React 中三個文件？在很多情況下，是這樣子。Vue 的行為結(jié)構(gòu)表現(xiàn)分離，很明顯，而 React 的分離雖然不是很明顯，但實(shí)際上也是有的。以 App.vue 為例
App.vue 里的 style 對應(yīng) React 里的 App.less ，毫無疑問
App.vue 里的 template 和 props 對應(yīng) React 里的 App.js ，React 稱為 Presentational Components，一般只有一個 render 方法 return html, 譬如：
App.vue 里剩余的部分，包括 ajax, mapState, 狀態(tài)的變更，以及生命周期鉤子等等，都是對應(yīng) React 里的 AppContainer.js ，React 稱為 Container Components. 如圖：
實(shí)際上， AppContainer.js 負(fù)責(zé)行為邏輯，而 App.js 負(fù)責(zé)結(jié)構(gòu)展示， App.less 負(fù)責(zé)樣式表現(xiàn)，依舊是 行為/結(jié)構(gòu)/表現(xiàn) 的分離。只不過與 Vue 稍有不同而已。這一點(diǎn)上，React 多費(fèi)些腦力和膠水代碼。
Vuex 和 redux 目錄這里跟我的實(shí)現(xiàn)有關(guān)系，redux 可能是比 Vuex 麻煩些，但不至于圖示如此夸張。因?yàn)槲抑貥?gòu)的時候改了邏輯。
selectors 和 Vue 中的 getters 有相似，但底層原理不同。舉個例子，我們?nèi)绻獜囊粋€巨量的 array 里找到某個數(shù)據(jù)，比較耗性能怎么辦？很明顯可以對參數(shù)做個緩存，如果查詢 id 和上一次一樣，就返回上次的結(jié)果，不查詢了。selectors 做的就是這個事。
React 的 actions 和 Vuex 中的 actions 類似，都是發(fā)送指令，但不操作數(shù)據(jù)。
actions 發(fā)送指令，最終會到 reducers 里合并數(shù)據(jù)，與 Vue 中的 mutations 類似。
如果你注意的話，就會發(fā)現(xiàn)，reducers 里合并數(shù)據(jù)總是返回一個新對象。而 Vuex 中，我們是直接修改 state 的數(shù)據(jù)的。
這里其實(shí)牽涉到了 Vue 和 React 中的一個大不同。
總結(jié)總體的目錄和架構(gòu)是類似的，不過具體用起來差別還不小。
技術(shù)棧的廣度Vue 全家桶只要加上 Vuex 和 Vue-router 就可以了，而 React 在讀完 redux, react-redux, react-router 文檔之后，會發(fā)現(xiàn)他們還拆分、引出了不少東西，譬如 reselect, redux-thunk 等等，并且 redux, reselect還不是局限于 React 的。
API實(shí)踐過程中，發(fā)現(xiàn) Vue 中的一些類似的 API 在 React 中被進(jìn)行了重構(gòu)，比如 React 用 createRef 取代了 ref="string"，用 HOC 取代了 mixins 等等，雖然有些不習(xí)慣，但是感覺還好。
求職本人最近正在找工作，有興趣的歡迎私信哦，坐標(biāo)上海，半年經(jīng)驗(yàn)，比較了解 Vue+es6，了解一點(diǎn) React，具體簡歷 戳這里
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/101409.html
摘要：，在聽音樂的時候忽然想聽騰格爾的鋼鐵之翼隱形的翅膀，在網(wǎng)易云上卻找不到，就很氣。于是想到了做一個，音樂搜索的功能，把所有想聽的歌，能夠一次性在酷狗網(wǎng)易云蝦米等平臺上找找完。本項(xiàng)目非常適合新手練習(xí)熟悉全家桶，歡迎哦。 React-music React Music WebApp，在聽音樂的時候忽然想聽騰格爾的鋼鐵之翼（隱形的翅膀），在網(wǎng)易云上卻找不到，就很氣。于是想到了做一個，音樂搜索的...
摘要：調(diào)用鉤子渲染一波，然后把渲染后的元素賦值給并取代。大和小同為漸進(jìn)式框架，提供了大量的對數(shù)據(jù)視圖去進(jìn)行處理。微信小程序我選擇用原生主要是因?yàn)轭A(yù)覽還要再開一個很不開心。 前言 刷了一波 react 文檔,想找個東西練練手，在網(wǎng)上一看，什么實(shí)現(xiàn)一個 網(wǎng)易云、酷狗音樂、豆瓣 感覺找接口都夠費(fèi)神了,之前做過 vue 實(shí)現(xiàn)餓了么的一個系統(tǒng)，圖片資源，mock 數(shù)據(jù)齊全，再加之樣式寫過了，所以直接就...
摘要：學(xué)習(xí)成本很低，另外官方有比較完善的中文文檔。簡單本身是沒有錯誤，一個東西能以簡單的方式解決難道不好嗎關(guān)于這個中文文檔居然還有人噴那些喜歡用的是不是英文能力差，我就再報以呵呵一笑。本身擁有中文文檔就是一個優(yōu)勢，結(jié)果還成了被噴的地方。 前言 由于這段時間工作上也是挺忙的，就沒有時間去寫這個項(xiàng)目，中間一直都是寫寫停停，進(jìn)度也是非常慢的。正好前幾天都還比較空，就趕緊抓著空閑時間去寫這個項(xiàng)目，最...
摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運(yùn)，我不曉得。我只曉得，不認(rèn)命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...
閱讀 3120·2021-10-12 10:12
閱讀 1636·2021-09-09 11:39
閱讀 1963·2019-08-30 15:44
閱讀 2412·2019-08-29 15:23
閱讀 2951·2019-08-29 15:18
閱讀 3029·2019-08-29 13:02
閱讀 2760·2019-08-26 18:36
閱讀 796·2019-08-26 12:08
