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