个人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相关问题