为什么又是Todo,全球的初学者都在做todo吗?可以很多人要问这句话,着实这句话可以等同于:
为什么你做了个云音乐播放器?
为什么你做了个消息浏览APP?
为什么你做了个VUE/REACT版本的CNODE?
究其实质,这几个应用都是data-map情势,哈哈哈哈这是我本身创的词,意义就是说,实质都是拿到一组数据,然后就像遍历数组一样将这些数据遍历衬着,这类project都可以算是pure-data-driven的。
至于我为什么做了Todo,答案很简单,我初学react&redux时打仗的例子就是Todo,将这个app举行功用拓展,将会应用到react和redux的种种特征。
这个App的UI直接参考了知乎@黄玄的Vue写的TodoApp,已取得他本人的允许。设想活儿太磨人,本着闇练react&redux的项目实战的目的,UI和交互就没有想花太多时刻去设想,直接照着模样写了一个,他的代码我可一个字都没看过,别喷我山寨哈哈哈。
在线地点
源代码
Github
假如对你有有所启示或许协助,送我一个star吧 :)
预览
Login
Logged
Main
Add Todo
Responsive
Drawer
哈哈哈用drawer来插进去一下自我推行的信息貌似是经常应用套路?重要的页面导航应用bottomBar去切换,如许切换起来越发轻易。
目次组织
规范目次组织,有两个处所提一下:
styled 用来存储一切经由styled-components举行装潢后的组件,清一色presentational components,所以移入components目次下是没有题目的,但考虑到它的feature,在项目存在潜伏范围扩展可以时,经由过程Feature举行分类更好,所以就没有举行兼并。
关于components 和 container的分类市面上真是八门五花,对我而言,我更偏向追随redux作者(真是帅啊)的定义:
It's up to whether the component is aware of Redux
,浅显点说,不须要connect至store的组件都不是container. 如许确实make sense, 不过在组件的分派上会显得有点新鲜,这就比较考功力和履历了。
Function
Single Page App
在线注册账号,数据存储于leanCloud。
todoItem增编削,数据同步到云
依据完成状况切换视图
增加日期标签,一切item按日期分组
TechStack
React: 全套ES6及以上语法,性命周期函数,ref操纵,动态衬着,无奇不有。
Redux: 采纳最好实践,针对差别的逻辑state治理举行拆分,然后combine之. 采纳Thunk处置惩罚Action,掌握异步操纵。
React-Routerv4:跟之前的版本有明显变化,构建单页APP利器。
Styled-Components: 强推,什么BEM,什么CSS-Module,统统靠边,连系Helper: Styled-props,彻底处理css组件化计划。离别预处置惩罚器,防止制造更多进修本钱。
Webpack: 自动化构建,采纳chunkhash体式格局分类打包文件,优化用户缓存战略。
CSS3: 连系CSSTransitionGroup,竖立组件过场动画,优化体验。
underscore: 用它照样用lodash都行,我只是须要用一下内里的debounce,用来掌握edit todoItem时API通讯的频次。着实本身手写一个helper也行,在进修redux的练手项目里我就手写= = 。
后续可以优化应用的:
reselect: 再也不必手写那么多反复的state selector了!
immutable: 觉得函数式的威力。
redux saga: 2017年了,还不应用generator的异步action掌握系统。
Problem
state
的设想重要针对数据的猎取与查找战略,模拟数据库的体式格局,竖立LookupTable
,存储目的id,遍历id举行数据拉取。如许的体式格局优点是在分状况显现todoItems时只须要操纵id,而不须要操纵数据实体,进步机能。 然则同时也碰到一个题目: 针对查找战略对应肯定的api层组织相对耦合,数据拉取体式格局没法当地模拟,因而让我摒弃了应用LocalStorage
的举行离线状况的支撑。 黄玄的战略是优先举行当地操纵,用户可以挑选上传或许下载数据,这个体式格局不错,对我有所启示。 过分对数据模子举行装潢的结果就是高耦合,这跟我初志是基于在线存储数据有关。 算是一个经验。之前想要给登录胜利页面增加延时跳转的功用,以便应用户体验越发完全,然则尝试未果,原因是login页面和list页面实质上是两个
route
下的组件,举行切换时会举行拉取数据 =>Re-render
,一旦我登录后再次进入login页面,不管我在login组件里怎样尝试记录上一次的状况举行比对(componentWillReceiveProps
),都是白费。 厥后想到根目次下App组件可以举行connect保留一个登录的flag,以此来确保第一次从未登录状况进入登录状况常常才会举行跳转。然则我没有如许做,我着实不想污染APP这个root组件,除非再包一层…跳转部份React-router并没有供应更多API,其
Redirect
的时刻上的可操控性不高,只能依靠注入BrowserHistory
属性来举行人工push地点,略为貌寝。鄙人才疏学浅,置信不久后能找到更文雅的体式格局。
总结
我的不足
消耗时长:从进修React&Redux最先,花费了相对较多的时刻在进修相干的综合学问(组件设想,组织设想,reducer,action的组织最好实践等等),使得我的项目迟迟未能完工,个人可以更习气有所深度的进修后再举行实践,也是贪了想少走弯路的动机。然后习气性被炫酷的手艺吸收,研讨了两天react-motion(敬拜@chengmo大神啊,我们中国小伙有伶俐),因为当时想要完成drag Sortable List的结果,厥后回过神来,先做出基本再说!这个APP从做出原型到重构修正总工时大略盘算也许不到8天,假如撸起袖子直接干,应当可以压缩到6天。固然了进修本钱不可疏忽,我给本身的时长盘算时从0相识到输出制品。
App结果: 给本身打7分,可优化拓展的东西太多。还记得我说的
data-map
模子吗?我完全可以把这个App打造成一个事情台,把之前那些满地飞的项目都席卷进来,可以加大演习手艺的力度,如许我就可以终结满知乎闹的什么“为什么vue的demo比react多”之类的无聊话题,纯属Vue好上手!文档亲热直白如私教!各大中文网示例重构demo多到不可好吗!光是react这英文环境就够国内60%顺序猿吃一壶了。(扯远了哈哈哈)
夸夸本身
实时总结: 进修的时刻轻易懵逼轻易影象断片怎么办!?这一度让我很苦恼,为了加快进修历程,惟有: 总结!梳理!写博客!因而诞生了这俩货:(新手朋友们看一看对观点道理明白肯定会有协助)
自学上手效力: 曾一度不是很自信,固然了都是老大徒伤悲如此,对本身的实在气力照样有肯定自信,我置信我可以短时刻接收并应用以至拓展所学学问,我也确实做到了。因为一最先便对react有迷之好感(这辈子第一次对一个手艺生态有这类觉得),加上本身英语无压力,浏览了很多关于react手艺栈的文章,相识了刀耕火种到如今一片大繁华的react系统下的手艺变迁,对学问系统有了一个宏观的把控,这个阶段也许一周,时期还看着网上的教程写了几个小demo用来针对练习一些手艺点:比方
父子双向通讯
,性命周期函数应用场景
,异步action处置惩罚计划
,模拟redux内部中心功用
:github(1),github(2)。 我个人的头脑很发散,轻易噼里啪啦想到很远很歪,致使了之前进修过程当中缺少一致的节拍,一下捣鼓一下动画行列,一下看看源码,没有很耐久的去做一件事,此次算是美满啦。不过此次能上手这么快,也得益于之前javascript的基本,细节不保证悉数能回想,然则头脑和履历都沉淀进了本身的头脑,接下来要去找事情,还得把基本好好过一遍,重中之重!处理实际题目的才能: 如今本身处理题目的觉得越来越好,可以疾速定位题目的关键,擅用搜索引擎(我真的良久良久没有用过baidu了…),specific的题目会一股脑先用笔墨输出的情势形貌一遍,如许让题目的组织在脑中有个印象,然后过一会儿返来本身就萌生idea,然后尝试 -> 处理。 末了一句: 靠本身。