都说真正入门一个前端框架都要用它来写一个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相关问题

来源：https://www.cnblogs.com/can-i-do/p/7222550.html

标签

react

css

content

我的React实例 - TodoList