摘要：在線注冊(cè)賬號(hào)，數(shù)據(jù)存儲(chǔ)于。年了，還不使用的異步控制體系。過度對(duì)數(shù)據(jù)模型進(jìn)行裝飾的結(jié)果便是高耦合，這跟我初衷是基于在線存儲(chǔ)數(shù)據(jù)有關(guān)。

為什么又是Todo，全世界的初學(xué)者都在做todo嗎？可能很多人要問這句話，其實(shí)這句話可以等同于：

為什么你做了個(gè)云音樂播放器？

為什么你做了個(gè)新聞閱讀APP？

為什么你做了個(gè)VUE/REACT版本的CNODE？

究其本質(zhì)，這幾個(gè)應(yīng)用都是data-map模式，哈哈哈哈這是我自己創(chuàng)的詞，意思就是說，本質(zhì)都是拿到一組數(shù)據(jù)，然后就像遍歷數(shù)組一樣將這些數(shù)據(jù)遍歷渲染，這類project都可以算是pure-data-driven的。

至于我為什么做了Todo，答案很簡(jiǎn)單，我初學(xué)react&redux時(shí)接觸的例子就是Todo，將這個(gè)app進(jìn)行功能拓展，將會(huì)使用到react和redux的各種特性。

這個(gè)App的UI直接參考了知乎@黃玄的Vue寫的TodoApp，已經(jīng)獲得他本人的許可。設(shè)計(jì)活兒太磨人，本著熟練react&redux的項(xiàng)目實(shí)戰(zhàn)的目的，UI和交互就沒有想花太多時(shí)間去設(shè)計(jì)，直接照著樣子寫了一個(gè)，他的代碼我可一個(gè)字都沒看過，別噴我山寨哈哈哈。

Byemess

Github
如果對(duì)你有有所啟發(fā)或者幫助，送我一個(gè)star吧 :)

哈哈哈用drawer來插入一下自我推廣的信息貌似是常用套路？主要的頁面導(dǎo)航使用bottomBar去切換，這樣切換起來更加方便。

標(biāo)準(zhǔn)目錄結(jié)構(gòu)，有兩個(gè)地方提一下：

styled 用來存儲(chǔ)所有經(jīng)過styled-components進(jìn)行裝飾后的組件，清一色presentational components，所以移入components目錄下是沒有問題的，但考慮到它的feature，在項(xiàng)目存在潛在規(guī)模擴(kuò)大可能時(shí)，通過Feature進(jìn)行分類更好，所以就沒有進(jìn)行合并。

對(duì)于components 和 container的分類市面上真是五花八門，對(duì)我而言，我更傾向跟隨redux作者（真是帥啊）的定義： It"s up to whether the component is aware of Redux，通俗點(diǎn)說，不需要connect至store的組件都不是container. 這樣的確make sense， 不過在組件的分配上會(huì)顯得有點(diǎn)奇怪，這就比較考功力和經(jīng)驗(yàn)了。

Single Page App

在線注冊(cè)賬號(hào)，數(shù)據(jù)存儲(chǔ)于leanCloud。

todoItem增刪改，數(shù)據(jù)同步到云

根據(jù)完成情況切換視圖

添加日期標(biāo)簽，所有item按日期分組

React： 全套ES6及以上語法，生命周期函數(shù)，ref操作，動(dòng)態(tài)渲染，應(yīng)有盡有。

Redux： 采用最佳實(shí)踐，針對(duì)不同的邏輯state管理進(jìn)行拆分，然后combine之. 采用Thunk處理Action，控制異步操作。

React-Routerv4：跟以前的版本有顯著變化，構(gòu)建單頁APP利器。

Styled-Components: 強(qiáng)推，什么BEM，什么CSS-Module，通通靠邊，結(jié)合Helper: Styled-props，徹底解決css組件化方案。告別預(yù)處理器，避免創(chuàng)造更多學(xué)習(xí)成本。

Webpack： 自動(dòng)化構(gòu)建，采用chunkhash方式分類打包文件，優(yōu)化用戶緩存策略。

CSS3: 結(jié)合CSSTransitionGroup，創(chuàng)建組件過場(chǎng)動(dòng)畫，優(yōu)化體驗(yàn)。

underscore: 用它還是用lodash都行，我只是需要用一下里面的debounce，用來控制edit todoItem時(shí)API通信的頻率。其實(shí)自己手寫一個(gè)helper也行，在學(xué)習(xí)redux的練手項(xiàng)目里我就手寫= = 。

后續(xù)可能優(yōu)化使用的:

reselect: 再也不用手寫那么多重復(fù)的state selector了！

immutable： 感受函數(shù)式的威力。

redux saga: 2017年了，還不使用generator的異步action控制體系。

state的設(shè)計(jì)主要針對(duì)數(shù)據(jù)的獲取與查找策略，模擬數(shù)據(jù)庫的方式，建立LookupTable，存儲(chǔ)目標(biāo)id，遍歷id進(jìn)行數(shù)據(jù)拉取。這樣的方式好處是在分狀態(tài)顯示todoItems時(shí)只需要操作id，而不需要操作數(shù)據(jù)實(shí)體，提高性能。 但是同時(shí)也遇到一個(gè)問題： 針對(duì)查找策略對(duì)應(yīng)確定的api層構(gòu)造相對(duì)耦合，數(shù)據(jù)拉取方式無法本地模仿，因此讓我放棄了使用LocalStorage的進(jìn)行離線狀態(tài)的支持。 黃玄的策略是優(yōu)先進(jìn)行本地操作，用戶可以選擇上傳或者下載數(shù)據(jù)，這個(gè)方式不錯(cuò)，對(duì)我有所啟發(fā)。 過度對(duì)數(shù)據(jù)模型進(jìn)行裝飾的結(jié)果便是高耦合，這跟我初衷是基于在線存儲(chǔ)數(shù)據(jù)有關(guān)。 算是一個(gè)教訓(xùn)。

之前想要給登錄成功頁面添加延時(shí)跳轉(zhuǎn)的功能，以便使用戶體驗(yàn)更加完整，但是嘗試未果，原因是login頁面和list頁面本質(zhì)上是兩個(gè)route下的組件，進(jìn)行切換時(shí)會(huì)進(jìn)行拉取數(shù)據(jù) => Re-render，一旦我登錄后再次進(jìn)入login頁面，無論我在login組件里如何嘗試記錄上一次的狀態(tài)進(jìn)行比對(duì)（componentWillReceiveProps)，都是徒勞。 后來想到根目錄下App組件可以進(jìn)行connect保存一個(gè)登錄的flag，以此來確保第一次從未登錄狀態(tài)進(jìn)入登錄狀態(tài)時(shí)時(shí)才會(huì)進(jìn)行跳轉(zhuǎn)。但是我沒有這樣做，我實(shí)在不想污染APP這個(gè)root組件，除非再包一層...

跳轉(zhuǎn)部分React-router并沒有提供更多API，其Redirect的時(shí)間上的可操控性不高，只能依賴注入BrowserHistory屬性來進(jìn)行人工push地址，略為丑陋。鄙人才疏學(xué)淺，相信不久后能找到更優(yōu)雅的方式。

耗費(fèi)時(shí)長(zhǎng)：從學(xué)習(xí)React&Redux開始，花費(fèi)了相對(duì)較多的時(shí)間在學(xué)習(xí)相關(guān)的綜合知識(shí)（組件設(shè)計(jì)，結(jié)構(gòu)設(shè)計(jì)，reducer，action的結(jié)構(gòu)最佳實(shí)踐等等），使得我的項(xiàng)目遲遲未能開工，個(gè)人可能更習(xí)慣有所深度的學(xué)習(xí)后再進(jìn)行實(shí)踐，也是貪了想少走彎路的念頭。然后習(xí)慣性被炫酷的技術(shù)吸引，研究了兩天react-motion（膜拜@chengmo大神啊，咱們中國小伙有智慧），因?yàn)楫?dāng)時(shí)想要實(shí)現(xiàn)drag Sortable List的效果，后來回過神來，先做出基本再說！這個(gè)APP從做出原型到重構(gòu)修改總工時(shí)粗略計(jì)算大概不到8天，如果擼起袖子直接干，應(yīng)該可以壓縮到6天。當(dāng)然了學(xué)習(xí)成本不可忽略，我給自己的時(shí)長(zhǎng)計(jì)算時(shí)從0了解到輸出成品。

App效果： 給自己打7分，可優(yōu)化拓展的東西太多。還記得我說的data-map模型嗎？我完全可以把這個(gè)App打造成一個(gè)工作臺(tái)，把之前那些滿地飛的項(xiàng)目都囊括進(jìn)來，可以加大練習(xí)技術(shù)的力度，這樣我就可以終結(jié)滿知乎鬧的什么“為何vue的demo比react多”之類的無聊話題，純屬Vue好上手！文檔親切直白如私教！各大中文網(wǎng)示例重構(gòu)demo多到不行好嗎！光是react這英文環(huán)境就夠國內(nèi)60%程序猿吃一壺了。（扯遠(yuǎn)了哈哈哈）

及時(shí)總結(jié)： 學(xué)習(xí)的時(shí)候容易懵逼容易記憶斷片怎么辦！？這一度讓我很苦惱，為了加速學(xué)習(xí)進(jìn)程，唯有： 總結(jié)！梳理！寫博客！于是誕生了這倆貨：（新手朋友們看一看對(duì)概念原理理解一定會(huì)有幫助）

我的第一本Redux小書（基礎(chǔ)部分）

Redux上手思維導(dǎo)圖

自學(xué)上手效率： 曾經(jīng)一度不是很自信，當(dāng)然了都是老大徒傷悲云云，對(duì)自己的真實(shí)實(shí)力還是有一定自信，我相信我能夠短時(shí)間接受并運(yùn)用甚至拓展所學(xué)知識(shí)，我也的確做到了。由于一開始便對(duì)react有迷之好感（這輩子第一次對(duì)一個(gè)技術(shù)生態(tài)有這種感覺），加上自己英語無壓力，閱讀了許多關(guān)于react技術(shù)棧的文章，了解了刀耕火種到現(xiàn)在一片大繁榮的react體系下的技術(shù)變遷，對(duì)知識(shí)體系有了一個(gè)宏觀的把控，這個(gè)階段大概一周，期間還看著網(wǎng)上的教程寫了幾個(gè)小demo用來針對(duì)訓(xùn)練一些技術(shù)點(diǎn)：比如父子雙向通信，生命周期函數(shù)使用場(chǎng)景，異步action處理方案，模擬redux內(nèi)部核心功能：github（1），github（2）。 我個(gè)人的思維很發(fā)散，容易噼里啪啦想到很遠(yuǎn)很歪，導(dǎo)致了以前學(xué)習(xí)過程中缺乏統(tǒng)一的節(jié)奏，一下?lián)v鼓一下動(dòng)畫隊(duì)列，一下看看源碼，沒有很持久的去做一件事，這次算是圓滿啦。不過這次能上手這么快，也得益于以前javascript的基礎(chǔ)，細(xì)節(jié)不保證全部能回憶，但是思想和經(jīng)驗(yàn)都沉淀進(jìn)了自己的腦子，接下來要去找工作，還得把基礎(chǔ)好好過一遍，重中之重！

解決實(shí)際問題的能力： 現(xiàn)在自己解決問題的感覺越來越好，可以快速定位問題的癥結(jié)，擅用搜索引擎（我真的好久好久沒有用過baidu了...)，specific的問題會(huì)一股腦先用文字輸出的形式描述一遍，這樣讓問題的結(jié)構(gòu)在腦中有個(gè)印象，然后過一會(huì)兒回來自己就萌發(fā)idea，然后嘗試 -> 解決。 最后一句： 靠自己。