描述
在之前的项目中都是单纯的用react,并没有结合redux。对于中小项目仅仅使用react是可以的;但当项目变得更加复杂,仅仅使用react是远远不够的,我们需要将UI渲染和数据处理区分开,因此我们需要引入redux来管理数据层。写该小demo的目的主要是为了在理论学习的基础上更好的进行实践,通过自己亲手写个小项目我们才能更好的理解redux是如何管理数据层的。数据是取自淘票票官方二月份的部分数据。
技术栈
react.js、react-router、redux、es6、webpack、less等。
github地址
https://github.com/zhuotianbao/tiaopiaopiao--react-redux
目录结构
- dist [打包后代码] - src [源码] -- css [样式] -- data [数据] -- img [图片] -- js [js代码] └ actions [创建action] └ components [纯UI组件] └ constants [定义type类型] └ containers [获取store中的数据;将dispatch与actionCreator结合起来] └ reducers [reducer纯函数] └ store [创建store] └ index.js [路由配置] -- index.html [入口]
项目浏览
特色功能
- 用原生js封装一个轮播图组件。
- 引入异步加载组件。同步加载方式,每次都会把所有的依赖加载完再进行渲染,导致加载时间长。
- 各个组件的js分开打包。要是将所有的js都打包在一个文件夹,当项目太大时会导致文件太大,无法满足性能加载速度等要求。
备注
由于时间比较仓促,一些细节还没来得及完善,还要很多东西都还没来得及加入,如immutable.js进行性能优化,图片的懒加载,redux开发者工具的日志监控等等功能。后续会慢慢完善,敬请期待...
原文地址:https://www.jb51.cc/react/524387.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。