react構建淘票票webapp，及react與vue的簡單比較。

前言

前段時間使用vue2.0構建了淘票票頁面，並寫了一篇相關文章vue2.0構建淘票票webapp，獲得了不少童鞋的支持，所以這些天又使用react重構了下這個項目，目的無他，只爲了學習和共同進步！

項目技術棧

前端技術棧：react + react-router + redux + ant-design-mobile

後臺技術棧：nodejs + express

項目地址：https://github.com/canfoo/react-taopiaopiao

一樣地，先曬一張效果圖，想要看更多效果圖請點擊這裏

項目架構

本項目採用react棧構建前端頁面，採用express搭建後臺服務，主要目錄以下：

.
├── bin                      # 啓動腳本
├── build                    # webpack相關配置
├── config                   # 項目配置文件
├── server                   # 後臺服務
│   ├── bin                  # 程序啓動和渲染
│   ├── database             # 存放頁面所須要的json數據
│   ├── public               # 前端靜態資源存放位置
│   ├── routes               # 路因爲請求接口管理
│   ├── views                # 前端模板存放位置
│   ├── app.js               # 後臺服務入口
├── src                      # 程序源文件
│   ├── main.js              # 程序啓動和渲染
│   ├── components           # 全局組件
│   ├── containers           # 路由頁面容器組件
│   ├── layouts              # 主頁結構
│   ├── static               # 靜態文件
│   ├── styles               # 樣式文件
│   ├── store                # Redux管理
│   └── routes               # 前端路由管理
└

主要特點功能概覽

1. react路由組件是經過異步進行加載的，從而優化頁面加載時間，詳情請參考最好用的腳手架。

2. 經過組件設計思想實現電影院詳情中圖片滑動變速、選中動畫等功能，源碼位置在/react-taopiaopiao/src/routes/CinemaDetail/components/Film.js

3. 採用redux管理每次加載數據自動判斷是否須要顯示loading，源碼位置在/react-taopiaopiao/src/store/request.js

4. 使用阿里巴巴ant-design-mobile的ui庫來實現城市分類選擇等樣式，詳情請參考Mobile UI

...

react與vue的簡單比較

既然都用了react和vue都構建了淘票票這個項目，那麼就得來簡單扯扯着二者簡單的比較，其餘童鞋若是不一樣的觀點請留言指出。

相同點：

1. 二者都是輕量級，只專一狀態到頁面或者組件的映射。

2. vue2.0和react均可以使用虛擬DOM快速渲染、服務端渲染。

3. 響應式系統，當數據改變了，就會自動更新界面。

4. 都擁有優秀的社區來提供各式各樣的解決方案。

不一樣點：

1. 代碼風格：vue單文件組件是以模板＋javascript+css呈現的，react推薦作法是 JSX + inline style，前者更容易被web開發人員所接受。

2. 響應式數據：vue提供反應式的數據，當數據改動時，界面就會自動更新，而react裏面須要調用setState方法。

3. 學習成本：vue提供許多簡單易用的api，相對來講，新手更容易快速掌握。

4. 優化方案：對於複雜應用，react的虛擬DOM須要經過shouldComponentUpdate來判斷是否須要渲染頁面，而vue數據是依賴追蹤，默認就是優化狀態的。

5. 生態社區：react相對於vue的生態社區要龐大多，內容也是比較豐富的。

...

這裏只是作簡單的對比，若是對於一個新人，對於這二者的學習，建議先擼vue，緣由在上面對比已經體現出來了，😄。

最後，但願個人貢獻能夠幫助到你。

 

其餘

vue2.0實現的淘票票倉庫地址：https://github.com/canfoo/vue2.0-taopiaopiao

react-native實現的淘票票倉庫地址：https://github.com/canfoo/react-native-taopiaopiao