我们在原来07demo的基础上又要添加一些新的功能！如下图所示

老规矩还是拆分组件

新的功能目录结构如下图所示：

        这一次父子组件的js代码居然超过了200行，大大出乎了明哥的预料，那么在这里我重点讲述一下最后全选全不选的功能。在之前几天学习的日子里，我们可以知道，组件中的state属性是用来存储一些数据的，如果在子组件中想要修改父组件的state，则需要在父组件中定义修改的方法，通过props传入到子组件中，然后子组件调用props传入的父组件方法去修改父组件的属性，同样，全选全不选也是如此

        首先state中定义一个默认值 isAllDone =false  代表默认全不选 ，将这个isAllDone 传入到footer组件中，使footer组件全选框默认为 未选中状态，而当全选框发生了变化，立即在子组件中调用父组件props传入的changeAllChecked方法，将父组件state中todos的所有值全部修改为isAllDone取反。

        看上去思路貌似很简单，但是明哥认为真正的核心部分就是下图

        js中filter函数，会对数组中每一个元素都执行一下指定的函数，将返回为true的元素 拼成一个新的数组，然后箭头函数(todo =>!todo.isDone)  等价于  function（todo）return(!to.isDone),这里就会获取所有未被选中元素的一个数组，然后无论你添加，删除任意一个元素都会去判断 未被选中的元素长度是否为0，并且数组总长度大于0，如果成立，则全选框勾选状态保持存在，如果不存在全选框勾选状态消失

附上代码如下

App.js

TodoHeader

TodoMain

TodoItem

TodoFooter

sass样式代码