都说真正入门一个前端框架都要用它来写一个todo-list,现在写了两三天的todo-list(还未写完),发现所言不虚。现在我就将我已经完成的过程和未完成的部分一起写下来,同时慢慢与我的进度同步。
练习链接 :https://github.com/dirstart/React-learning/tree/master/todo-list1
版本1链接: https://github.com/dirstart/My-React-Todolist
项目版本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;
}