個人React實例 - TodoList

都說真正入門一個前端框架都要用它來寫一個todo-list，如今寫了兩三天的todo-list（還未寫完），發現所言不虛。如今我就將我已經完成的過程和未完成的部分一塊兒寫下來，同時慢慢與個人進度同步。

練習連接 ：https://github.com/dirstart/React-learning/tree/master/todo-list1
版本1連接： https://github.com/dirstart/My-React-Todolist --使用create-react-app+react
版本2連接： https://github.com/dirstart/My-React-Todolist-v2.0 --使用webpack+react+redux+react-redux

項目版本1- github演示地址：https://dirstart.github.io/My-React-Todolist/build/

• 我學習一門語言老是習慣於直接建立一個語言名-learning，而後裏面放着不少垃圾代碼和一些項目，如個人vue-learn,react-learnning如今想來這樣還真是凌亂，因而此次單獨把todo-list放一個倉庫，這裏有如何將原倉庫內的文件轉爲倉庫的騷操做，在第三序列裏面。http://www.cnblogs.com/can-i-do/p/7091684.html

編寫背景：本身在實習的公司裏面寫的，我發現本身運氣還真的挺好哈哈，實習公司暫時沒有什麼事情，據說是項目的收尾階段，也是由於本身比較菜還幫不上忙吧哈哈，無論怎麼說，得感謝這個公司，正是由於這麼閒我纔有這樣一個溫馨的系統學習react的時間

---

以上就是暫時完成的部分。下面是我關於本次項目的一些思考和不足的總結。也可在個人項目地址中readme看到最新改動。

項目進度

---

1.完成了增長任務

2.完成了刪除任務

3.完成了部分css任務

4.由原本的{content} => {content,flag} => 目前想要改成 {content,flag,id} 緣由是遇到了Bug，在刪除的時候經過給index的flag改爲false，以後在map的時候用默認i賦值致使出錯，改進方案==> 改成{content,flag,id},同時分爲dustbinList和TodoList兩塊

5.懸浮彈窗的實現，目前已經實現，利用css動畫實現

6.input等css動畫的改進

當前準備完成

---

1.當輸入文本過長的一些操做

2.關於if-else的各個地方的判斷

3.組件的重用，實在是太多重複的邏輯了，好比說不斷傳遞的那些函數，這個可能須要redux來解決？此外還有很明顯的的兩個list，兩個list的邏輯其實基本相同，考慮可以合成一個組件

4.關於重複樣式的改進,關於鼠標hover有沒有那種擴散狀態的樣式

5.重構。關於動用webpack而不是直接用create-react-app來作，同時可在樣式中使用stylus開發更清晰

6.還能夠加一個搜索計劃,關於搜索過程當中怎麼提高搜索的效率

7.關於刪除和增長的特效可否更加平滑

8.從個人todo項目從React-learning移到另一個倉庫單獨存放。 （已完成）

9.再作個導出功能

10.再加點文藝的東西配合個人css，如別人的成功每每是冰山的一腳，由於咱們每每看不見人們冰山下的努力。

11.關於防止用戶屢次Enter(或者是不當心按到了Enter)

過程當中遇到的問題

---

1.map的問題，大意疏漏的bug

解決方案：
在刪除的時候經過給index的flag改爲false，以後在map的時候用默認i賦值致使出錯，改進方案==> 改成{content,flag,id},同時分爲dustbinList和TodoList兩塊

2.!!!!!!!input和button明明設置的height同樣卻不能等高

3.在list的地方我也加上了animation，可是此次出現了抖動的現象，主要是下方出現了波浪線

4.當任務欄過長，則suspension會出現問題，應該將suspension設置爲fixed定位

5.css動畫出現了波浪線的問題，截圖的時候沒有，可是在播放的時候肉眼可見

有沒有一種能夠先寫一個可重用的css而後再套用的東西？不用多加一個class的那種

7.解決的問題:關於這裏的彈窗當第二次點擊的時候如何使上一次的setTimeout中止(之前只用過clearInterval，這下學到了)

解決方案：
var t=setTimeout(()=>{},5000);
clearTimemout(t);
// 其實和setInterval停下的方法是同樣的

if (this.state.content === '') {
      console.log("沒有任務");
      this.setState({
        suspension: true
      }, function() {
        setTimeout(() => {
          this.setState({
            suspension: false
          })
        }, 5000);
      })
      return;
    }

感想

---

1.用animation加個動畫真是好玩

2.獲得了成就感，找bug的能力，着急並無卵用

3.css動畫問題，感受仍是屢次建立suspension的div往下滑以後再銷燬，這樣的效果應該比較好。再次更新，本身蠢不能怪css3無法實現，仍是用css3實現吧

4.須要學習的：Map，let of，filter等ES6相關問題