学React和Angular有一段时间了，想检验一下学习的成果，就拿Todo这个最简单的例子练个手吧

React

组件化

一个container component，里面包含了TodoForm，TodoList和Footer三个组件

状态管理

Todo的状态管理不复杂，所以没有使用redux，就用原生的state来写就好。三个子组件通过lifting state up，来修改container component中的State
state={todos:[{id:string,title:string,completed:boolean}],filter: number }

Data Binding

因为要显示Todo List，所以会用到List。React规定，List item必须要定义key。我要把一个数组绑定到List上，默认的Key就是数组的index，但是这样做后面发现其实是有问题的。后来就在todo的state中加上了一个id，每次创建一条todo时生成一个unique的id

Event Binding

todo程序要实现一个效果，就是鼠标放到一条todo上时，显示delete按钮，移开时不显示。一开始用onMouseOver/onMouseOut有问题，好像会跟delete按钮的事件冲突；然后用onMouseEnter/onMouseLeave，解决了冲突的问题，但是当配合filter使用时，还是有问题。
最后用了CSS的hover来解决

CSS