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的生态社区要庞大多,内容也是比较丰富的。
...
应该还可以做更多比较的,由于本人也是在对两者也在学习中,所以不能多做比较,希望厉害的童鞋们针对于这些差异踊跃提出自己的看法~
一些无关紧要的话
今天是西方情人节,唯有撸一篇文章,才能一解今天一个人的日子落寞啊,哈哈。。。
另外,本人最近在留意新环境,坐标北京,如果觉得有合适我的坑,请邮箱我178774618@qq.com,感激不尽!
最后,希望我的贡献,对你有帮助!
相关文章
- (尚043) vue_向路由组件传递数据+vue param和query两种传参方式
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
- vue/react框架中关于组件信息通信引发的面试题
- angular react vue 浏览器兼容情况汇总
- react、vue中的key有什么作用?(key的内部原理)
- Vue实战--尚品汇(分页器)
- vue-cli2.0 多环境打包配置
- React和Vue等框架什么时候操作DOM
- vue-router 之 keep-alive路由缓存处理include+exclude
- vue组件通信大总结
- Django REST framework+Vue 打造生鲜超市(五)
- Vue的axios如何全局注册
- vue 中 命名视图的用法
- 浅析Vue CompositionAPI和React Hooks对比:hook的意义、两者差别(原理-链表/Proxy、代码执行-每次渲染都执行/组件创建时运行、声明响应式状态、如何跟踪依赖、生命周期、自定义hook、Ref获取元素、计算属性附加函数、Context和provide/inject、在渲染上下文中暴露值)
- 深入理解Vue父子组件通讯的属性和事件
- 前端技术:vue(计算属性+监视)
- 01—Vue