为什么又是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，然后尝试 -> 处理。 末了一句： 靠本身。
