前端攻城獅

前言

前段時(shí)間使用vue2.0構(gòu)建了淘票票頁(yè)面，并寫了一篇相關(guān)文章vue2.0構(gòu)建淘票票webapp，得到了很多童鞋的支持，因此這些天又使用react重構(gòu)了下這個(gè)項(xiàng)目，目的無他，只為了學(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路由組件是通過異步進(jìn)行加載的，從而優(yōu)化頁(yè)面加載時(shí)間，詳情請(qǐng)參考最好用的腳手架。

2. 通過組件設(shè)計(jì)思想實(shí)現(xiàn)電影院詳情中圖片滑動(dòng)變速、選中動(dòng)畫等功能，源碼位置在/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ù)來實(shí)現(xiàn)城市分類選擇等樣式，詳情請(qǐng)參考Mobile UI

...

react與vue的簡(jiǎn)單比較

既然都用了react和vue都構(gòu)建了淘票票這個(gè)項(xiàng)目，那么就得來簡(jiǎn)單扯扯著兩者簡(jiǎn)單的比較，其他童鞋如果不同的觀點(diǎn)請(qǐng)留言指出。

相同點(diǎn)：

1. 兩者都是輕量級(jí)，只專注狀態(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ū)來提供各式各樣的解決方案。

不同點(diǎn)：

1. 代碼風(fēng)格：vue單文件組件是以模板＋javascript+css呈現(xiàn)的，react推薦做法是 JSX + inline style，前者更容易被web開發(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ì)來說，新手更容易快速掌握。

4. 優(yōu)化方案：對(duì)于復(fù)雜應(yīng)用，react的虛擬DOM需要通過shouldComponentUpdate來判斷是否需要渲染頁(yè)面，而vue數(shù)據(jù)是依賴追蹤，默認(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)出來了，??。

最后，希望我的貢獻(xiàn)可以幫助到你。

其他

vue2.0實(shí)現(xiàn)的淘票票倉(cāng)庫(kù)地址：https://github.com/canfoo/vue2.0-taopiaopiao

react-native實(shí)現(xiàn)的淘票票倉(cāng)庫(kù)地址：https://github.com/canfoo/react-native-taopiaopiao