?todoList案例相关知识点
?? ??? ?1.拆分组件、实现静态组件，注意：className、style的写法
?? ??? ?2.动态初始化列表，如何确定将数据放在哪个组件的state中？
?? ??? ??? ??? ??? ?——某个组件使用：放在其自身的state中
?? ??? ??? ??? ??? ?——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）
?? ??? ?3.关于父子之间通信：
?? ??? ??? ??? ?1.【父组件】给【子组件】传递数据：通过props传递
?? ??? ??? ??? ?2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数
?? ??? ?4.注意defaultChecked 和 checked的区别，类似的还有：defaultValue 和 value
?? ??? ?5.状态在哪里，操作状态的方法就在哪里
下面为大家列出我写这个案例的详细步骤。
1、静态组件的拆分，这一步需要大家不慌不忙，一步一步的去完成。
2、展示动态组件，把App.js文件里面的静态数据传递给List
List组件接收并遍历，把结果传递给Item组件，这里用todo.id，添加了key
Item组件接收传递过来的每一个Item，并把其展开，这里用defaultCheack，是可以修改的，但是这里defaultCheack有一个缺陷，下文会提出，这里用defaultCheack是增加知识点的运行。使自己了解充分
3、添加Todo
首先获取头部input的框的输入内容，然后App组件给Header组件传递一个函数，这个函数能接收一个todoObj，然后Header组件在按下回车键的时候调用了App传递给自己的函数，然后把todoObj交给了App，这里用了nanoid库给自己新增的Item生成了随机唯一id。同时这里也对输入内容为空进行了提示，并且按下回车键后清空了输入框的内容
App在拿到这个todoObj之后把它放在了自己的状态里，引起了自身状态的更改，进而调用了自身的render，而List是自己的子组件，就引发了自己子组件的重新渲染。然后东西就被渲染到了页面。
当输入为空
4、鼠标移入效果，鼠标移入，添加背景颜色，显示删除按钮，鼠标移除，恢复样式
?这里让鼠标移入和移除对应一个函数（里面返回一个函数，即高阶函数解决调用函数的为undefind），传递不同的布尔值，然后更新state里面的状态，下面的样式用三元表达式，判断显示或者隐藏
5、让勾选和取消勾选的状态在App组件中更新
在Item组件中调用App组件updataTodo时，把当前的id以及对应复选框的勾选状态传给app
在App里面写函数传递给List组件，在App组件的updataTodo中判断传递过来的id是否与遍历出的todoObj中的id相当，如果有，更改其done值，如果，没有，返回原来的值。
List组件接收后不用，直接传递给Item组件
?
6、对props进行类型以及必要性的限制
7、删除一个todo，这里先给按钮添加一个点击事件，这里在删除之前进行了提示，如果用户点击确定，则把id传递给App。
在App.js文件中定义删除一个Todo的回调，这里将传递过来的id与原来todo里面的id做对比，过滤出与原来id不同的，并将其传递给List?，
在List中声明接收，同时对其类型进行了限制，并将其传递给Item组件?
?
8、底部功能实现
把todos整体和checkbox的选中函数传递给Flooter组件，这里checkbox的选中函数通过Flooter传递过来的done对其复选框进行了更新
这里要把Item组件里面的defaultchecked改为checked，因为defaultchecked只生效一次
?计算出todo.done为true的个数，和总数，当两者相等并且总数不会0的时候让最下面的复选框为选中状态，并把当选复选框的选中状态传给APP组件，让其更新每一个复选框的值。
?
?
9、清除所有已完成
首先给按钮添加点击事件，里面直接调用App组件传丢过来的函数
?
返回出done值围殴false的选项
? 至此，整个ToDoList案例的React版已经编写完成，希望有兴趣的小伙伴可以练习一下，有不懂的也可以DD我。