[webpack+React]效率輕應用---ReallyDo
每天養成一個好習慣，從建立一個todolist開始。
ReallyDo的頁面UI借鑑於todoist ，是基於React全家桶，以leancloud作後端資料部署的輕量級Todo webApp
技術棧
- React全家桶：
React+Redux+React-router - styled-components : css in js，讓樣式也能成為元件。
- immutable : 解決js物件引用賦值的特性給redux state所帶來的問題。
- redux-thunk: 非同步處理state的解決方案。
- CSS 3 & react-transition-group: 使用CSS3 的transform/animation等建立動畫，並結合
react-transition-group實現元件過場動畫效果 - leancloud : 使用者資料 & todolist資料部署。
- webpack: 搭配
react-hot-loader實現熱載入區域性更新，加上DllPlugin提高開發體驗感。 - underscore : 使用了裡面一些工具函式處理一些資料。
目錄結構
. ├─ build/# webpack配置目錄 │├─── webpack.base.conf.js# 基本配置 │├─── webpack.dev.conf.js# 開發環境下特有的配置 │├─── webpack.prod.conf.js# 生產環境下特有的配置 │└─── webpack.dll.conf.js# 分離打包不常用的第三方庫 ├─ dist/# 編譯後的程式碼 ├─ src/# 原始碼 │├─── components/# 頁面上可複用的元件 │├─── config/# app配置檔案 ││├─── api.js# leancloud的api檔案 ││├─── AVConfig.js# 初始化leancloud AV的key ││├─── Router.js# SPA app的路由配置 ││└─── SvgConfig.js# Svg icon的例項指令碼 │├─── container/# 需要共享store的元件，一般是router-component │├─── store/# redux store配置 ││├─── constants.js# 所有 action type ││├─── reducer.js# 將各個container分割的reducer combine成一個大的reducer ││└─── utils.jsx# 對todolist資料的處理 │├─── styled/# styled-component │├─── app.jsx# app root component │└─── index.js# 入口檔案 ├─── template/# html template ├─── .babelrc ├─── .gitignore ├─── jsconfig.json ├─── package.json ├─── README.md └─── server.js 複製程式碼
預覽
- 登陸 & 登陸中
- 主要頁面 & 新增待辦
- 使用者頁面
- 響應式
功能
- SPA應用
- 含簡單使用者系統，當前無使用者狀態下，不可使用reallyDo功能。
- todoItem實現增刪改功能，所有資料同步到雲
- 所有item按日期先後分組，日期為今天的優先顯示第一組。
- 根據使用者完成情況切換檢視。
專案覆盤總結
-
關於todolist的資料設計略顯拙劣。state上的todolist是一個二維陣列。 todoitem的查詢策略不僅要遍歷id，還要遍歷due（到期時間）。在對資料的處理過程中往往需要經過兩次遍歷甚至是巢狀遍歷。在資料量還不大的現狀下，效能損耗方面尚未凸顯出問題。但當以後資料龐大之後，這應該是一個坑。資料的處理、資料結構與演算法能力是我的瓶頸。以後一定要突破它。
-
每個router component都會有使用者的檢測、及登陸成功後，登出使用者後等都需要js操控路由的跳轉。在react-router 文件中沒有提供到相關的API給我們操作。後來發現每個router component的props都有history這個物件，嘗試了一下直接在history中push跳轉的路由，發現成功了。於是解決方案是在非同步 action 中通過傳過來的history物件直接push路由。這樣的解決方法總感覺不太優雅，先留一個疑問，以後待解決。
-
最後打包生產環境的程式碼時，雖然將第三方庫抽離出來了。但vendor這個集合第三方庫的檔案略大。在網上搜索了一些解決方案。嘗試了一兩種，也許是自己的知識體系還不夠龐大，有些理解起來略略困難，另外由於時間問題，沒有繼續探索下去。之後希望有一個更優解決方案。
最後碎碎念
幾個月前，我第一次接觸React，就是做一個 todolist應用 。當時我剛開始接觸框架知識，所擁有的知識儲備並不能讓我很好地理解這些框架的原理及使用，因此作品十分粗糙。雖然基本功能已經實現，但那是的我早已暗下決心，等以後一定要做個更好一點點的。
通過這次專案的實踐，初次嘗試自己從零搭建一個專案的實踐，包括webpack開發環境的搭配、優化構建速度等。在開展一個專案之前，首先第一步要明確自己要做什麼功能的APP，其次要有一個大概的UI稿件。第二步，確認自己的技術棧，並根據自己的技術棧規劃大致的目錄結構（之後在專案開展過程中一般都會有小調整）。第三步，確認技術棧 & 目錄結構 就可以開始使用webpack搭建開發環境了。最後就可以開始愉快地coding了~
過程中也能發現自己的各種不足與短板，比如在查閱資料的時候，稍顯浮躁，沒有仔細檢視文件，導致開發過程中出現不該出現的bug，但好在對bug的解決能力尚可，能快速定位bug的原因，再不然就向帥氣的谷哥哥求助。現在越來越感覺到，不輕易向別人求助，靠自己解決bug所帶來的能力提升了。剛開始的時候，可能會花費的時間很長，長到甚至一天都沒解決。但是當你堅持下來，起碼你會知道，當自己出現問題時，應該使用什麼樣的關鍵字向谷歌個求助吧~ 最後，一定要堅持coding。learn by doing 於我，是最好的學習方法。但是事後總結也是必不可少的,只有通過總結，你才會發現自己的問題所在，並且確定自己下一步該前進的方向。