最近看到网上很多todolist案例都是类组件，发现这对ReactHooks初学者很不友好。然后写这篇文章。（脚手架是官方原版的create-react-app）页面效果如下，抛开功能不说，看到这张图，你还是分不清怎么敲出这样的布局。我的建议是多写几页，不要太大意。我的建议是你先不要看下面的文章，先打开你的代码编辑软件来实现这个简单的页面布局，先不要考虑功能，等你能自己完成这个页面，再回头看在本文中。可以去我的博客，我的文章都是给初学者的https://hanzhenfang.vercel.app/（点击博客客主页头像，可以打开空调，由于使用了黑科技，手机端可以从手机端吹到风口电脑端还没实现，以后会更新。。。）ok，我们完成了页面布局，接下来实现各个组件的小功能一步步。您不需要一次实现所有效果，您可以一点一点地完成。header:body:首先我们有三个默认值，打印出这个状态的肯定是array.map的方法。这里我选择使用useReducer，因为页面列表中有增删功能。当然你也可以使用useState，效果是一样的。需要在不考虑array.map的情况下渲染这个数组对象的值。这种方法最简单粗暴。这里为什么要传索引，因为我们后面要用到。footer:ok我们需要实现的第一件事是点击添加按钮向数组添加值。要添加用户输入的值，我首先必须获取输入的值。这里我使用最简单的uesRef来获取。首先，我们要使用它，所以我们要先定义它，然后在input标签上附加userInput.current.value，也就是我们需要获取的值。然后我们需要实现加法函数。首先，reduceaddition的逻辑定义很简单。这里也可以写逻辑判断，判断用户的数据是否为空，然后执行。这里使用了ES6扩展运算符语法来扩展原始数组。当我点击时，数组前面添加了一个新的id和新的内容。下一步是删除您当前选择的列表项。这就需要你熟悉array.slice的用法。slice()方法一般有两个参数，第一个表示从哪个索引开始切割，第二个参数表示从哪里停止，但是不包括第二个参数。意思是在第二个参数之前cut！！！了解这一点非常重要！第一个slice(0,action.index)的意思是我把list中的第一个item切掉到index（但不包括）items，然后返回这些数据，特别强调：不返回剩下的数据！！！！该方法不改变原来的数组，而是返回一个新数组。（注意：slice是切割的意思，不是切割rest）当第二个数组state.slice(action.index+1)只有一个参数时，begin是参数值，这个方法会把第二个参数的值放到第一个参数中end是数组的长度！意思是slice(1,array.length)，也就是说我从第一个index开始切（注意开始切的时候要包含这个参数对应的index，不然永远切不到index0的值！)这样就实现了todolist的新增功能。待续.....
