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