前言
前段時(shí)間使用vue2.0構(gòu)建了淘票票頁(yè)面，并寫(xiě)了一篇相關(guān)文章vue2.0構(gòu)建淘票票webapp，得到了很多童鞋的支持，因此這些天又使用react重構(gòu)了下這個(gè)項(xiàng)目，目的無(wú)他，只為了學(xué)習(xí)和共同進(jìn)步！
項(xiàng)目技術(shù)棧
前端技術(shù)棧：react + react-router + redux + ant-design-mobile
后臺(tái)技術(shù)棧：nodejs + express
項(xiàng)目地址：https://github.com/canfoo/react-taopiaopiao
同樣地，先曬一張效果圖，想要看更多效果圖請(qǐng)點(diǎn)擊這里
項(xiàng)目架構(gòu)
本項(xiàng)目采用react棧構(gòu)建前端頁(yè)面，采用express搭建后臺(tái)服務(wù)，主要目錄如下：
. ├── bin # 啟動(dòng)腳本 ├── build # webpack相關(guān)配置 ├── config # 項(xiàng)目配置文件 ├── server # 后臺(tái)服務(wù) │ ├── bin # 程序啟動(dòng)和渲染 │ ├── database # 存放頁(yè)面所需要的json數(shù)據(jù) │ ├── public # 前端靜態(tài)資源存放位置 │ ├── routes # 路由于請(qǐng)求接口管理 │ ├── views # 前端模板存放位置 │ ├── app.js # 后臺(tái)服務(wù)入口 ├── src # 程序源文件 │ ├── main.js # 程序啟動(dòng)和渲染 │ ├── components # 全局組件 │ ├── containers # 路由頁(yè)面容器組件 │ ├── layouts # 主頁(yè)結(jié)構(gòu) │ ├── static # 靜態(tài)文件 │ ├── styles # 樣式文件 │ ├── store # Redux管理 │ └── routes # 前端路由管理 └
主要特色功能概覽
1. react路由組件是通過(guò)異步進(jìn)行加載的，從而優(yōu)化頁(yè)面加載時(shí)間，詳情請(qǐng)參考最好用的腳手架。
2. 通過(guò)組件設(shè)計(jì)思想實(shí)現(xiàn)電影院詳情中圖片滑動(dòng)變速、選中動(dòng)畫(huà)等功能，源碼位置在/react-taopiaopiao/src/routes/CinemaDetail/components/Film.js
3. 采用redux管理每次加載數(shù)據(jù)自動(dòng)判斷是否需要顯示loading，源碼位置在/react-taopiaopiao/src/store/request.js
4. 使用阿里巴巴ant-design-mobile的ui庫(kù)來(lái)實(shí)現(xiàn)城市分類(lèi)選擇等樣式，詳情請(qǐng)參考Mobile UI
...
react與vue的簡(jiǎn)單比較
既然都用了react和vue都構(gòu)建了淘票票這個(gè)項(xiàng)目，那么就得來(lái)簡(jiǎn)單扯扯著兩者簡(jiǎn)單的比較，其他童鞋如果不同的觀點(diǎn)請(qǐng)留言指出。
相同點(diǎn)：
1. 兩者都是輕量級(jí)，只專(zhuān)注狀態(tài)到頁(yè)面或者組件的映射。
2. vue2.0和react都可以使用虛擬DOM快速渲染、服務(wù)端渲染。
3. 響應(yīng)式系統(tǒng)，當(dāng)數(shù)據(jù)改變了，就會(huì)自動(dòng)更新界面。
4. 都擁有優(yōu)秀的社區(qū)來(lái)提供各式各樣的解決方案。
不同點(diǎn)：
1. 代碼風(fēng)格：vue單文件組件是以模板＋javascript+css呈現(xiàn)的，react推薦做法是 JSX + inline style，前者更容易被web開(kāi)發(fā)人員所接受。
2. 響應(yīng)式數(shù)據(jù)：vue提供反應(yīng)式的數(shù)據(jù)，當(dāng)數(shù)據(jù)改動(dòng)時(shí)，界面就會(huì)自動(dòng)更新，而react里面需要調(diào)用setState方法。
3. 學(xué)習(xí)成本：vue提供許多簡(jiǎn)單易用的api，相對(duì)來(lái)說(shuō)，新手更容易快速掌握。
4. 優(yōu)化方案：對(duì)于復(fù)雜應(yīng)用，react的虛擬DOM需要通過(guò)shouldComponentUpdate來(lái)判斷是否需要渲染頁(yè)面，而vue數(shù)據(jù)是依賴(lài)追蹤，默認(rèn)就是優(yōu)化狀態(tài)的。
5. 生態(tài)社區(qū)：react相對(duì)于vue的生態(tài)社區(qū)要龐大多，內(nèi)容也是比較豐富的。
...
這里只是做簡(jiǎn)單的對(duì)比，如果對(duì)于一個(gè)新人，對(duì)于這兩者的學(xué)習(xí)，建議先擼vue，原因在上面對(duì)比已經(jīng)體現(xiàn)出來(lái)了，??。
最后，希望我的貢獻(xiàn)可以幫助到你。
分類(lèi): react
4
0
posted on 2017-02-14 00:53 canfoo#! 閱讀(1476) 評(píng)論(14) 編輯 收藏
評(píng)論
#1樓 2017-02-14 08:15thirking
情人節(jié)還在碼代碼。。。哎
#2樓 2017-02-14 08:46秦隨境遷
所以你個(gè)人有偏向哪個(gè)嘛？或者推薦新人學(xué)習(xí)的話你會(huì)推薦哪個(gè)？
#3樓[樓主] 2017-02-14 10:01canfoo#!
@ thirking
同嘆，哈哈
#4樓[樓主] 2017-02-14 10:03canfoo#!
@ 秦隨境遷
我比較喜歡react，但是react的學(xué)習(xí)成本會(huì)比較高。推薦新手先入門(mén)vue，vue簡(jiǎn)潔易用，而且比較符合web開(kāi)發(fā)人員的習(xí)慣。
#5樓 2017-02-14 11:00hlzfr
<img src="http://images2015.cnblogs.com/blog/696208/201702/696208-20170214110033519-1343411092.png" alt="" border="0" "="" style="border: 0px; max-width: 400px;">
#6樓 2017-02-14 11:01hlzfr
樓主，npm run dev報(bào)這個(gè)錯(cuò)怎么解決呢
#7樓[樓主] 2017-02-14 11:18canfoo#!
@ hlzfr
使用cnpm install安裝依賴(lài)包的嗎
#8樓 2017-02-14 11:20hlzfr
嗯嗯，是的，現(xiàn)在我跳過(guò)了這一步，npm run deploy后直接在9000端口下可以訪問(wèn)
#9樓[樓主] 2017-02-14 14:26canfoo#!
@ hlzfr
嗯，9000是另一個(gè)服務(wù)了。根據(jù)你的截圖，我估計(jì)是在react-taopiaopiao目錄下的依賴(lài)包沒(méi)裝好，如果你確定裝好的話，可以試試換一下node版本。
#10樓[樓主] 2017-02-16 10:40canfoo#!
有特別疑問(wèn)的可以進(jìn)609228927群
#11樓 2017-02-21 08:09cyberspace
能不能整個(gè)真實(shí)的app，比如 react-native ，哈哈
#12樓[樓主] 2017-02-21 09:36canfoo#!
@ cyberspace
有時(shí)間的話，也會(huì)打算搞一下的，哈哈
#13樓 2017-05-01 11:01Michael_Cyrus
你好，運(yùn)行 npm run dev 報(bào)錯(cuò)，能幫我解決下嗎？謝謝！
ERROR in ./src/main.js
Module parse failed: F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\src\main.js Unexpected token (77:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (77:2)
at Parser.pp$4.raise (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:603:10)
at Parser.pp$3.parseIdent (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:2189:12)
at Parser.pp$3.parsePropertyName (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:2052:101)
at Parser.pp$3.parseObj (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1988:14)
at Parser.pp$3.parseExprAtom (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1805:19)
at Parser.pp$3.parseExprSubscripts (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExprList (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:2165:22)
at Parser.pp$3.parseNew (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1927:52)
at Parser.pp$3.parseExprAtom (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1816:19)
at Parser.pp$3.parseExprSubscripts (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1692:19)
http://www.cnblogs.com/canfoo/p/6394761.html
延伸閱讀
- RxSwift 系列(九) -- 那些難以理解的概念 前言 2017-07-26
- 2017年讀書(shū)計(jì)劃 前言 2017-07-19
- 在Windows上安裝Elasticsearch v5.4.2 前言 2017-07-16
- OpenStack（企業(yè)私有云）萬(wàn)里長(zhǎng)征第四步——DevStack整體安裝規(guī)劃及使用 一、前言 2017-07-12
- Lombok : 讓你寫(xiě) Java代碼像C#一樣爽 前言 2017-07-07
- [前言] 實(shí)現(xiàn)一個(gè)Android電子書(shū)閱讀APP 2017-06-08
- 小議短網(wǎng)址系統(tǒng)的設(shè)計(jì)（有些時(shí)候，需要換個(gè)角度思考問(wèn)題） 前言 2017-06-06
- 刨根究底正則表達(dá)式之零——前言 2017-06-01
- 線程也瘋狂----線程同步（1） 前言 2017-05-19
- 理解Node.js(譯文) 前言 2017-05-18
2017年讀書(shū)計(jì)劃 前言