最近看到网上很多todolist的案例都是类组件的，发现这样对ReactHooks的初学者来说很不友好。遂编写此文章。(脚手架是官方原生的 create-react-app)

页面效果如下

先不考虑功能，如果当你看到这个图，脑子里还不能清晰的浮现出怎样敲出来这样的排版。我的建议是多写几个页面，千万不要眼高手低。我的建议是你先不要看下面的文章了，先打开你的代码编辑软件去把这个简单的页面排版实现，功能先不要考虑，等你可以自己完成这个页面，再回过头来看这篇文章。

可以去看我的博客，我的文章都是新手向https://hanzhenfang.vercel.app/
(点击博客客人主页头像，就可以打开空调，由于采用了黑科技，手机端可以从听筒吹到风。电脑端暂时还没实现，日后更新...)

ok，我们已经完成了页面排版，接下来一步一步实现各个组件的小功能。你不需要一下子就把所有的效果实现，一点一点来就可以。

header：

body：

首先我们有三个默认值，肯定是array.map的方法把这个状态打印出来。

在这里我选择使用 useReducer，因为页面列表里有添加和删除的功能，当然你也可以用usestate，实现的效果都是一样的。

需要渲染出这个数组对象的值，不需要考虑 array.map这个方法最简单粗暴。

这里为什么传index呢，因为后面我们需要用到。

footer：

ok我们首先需要实现的是点击添加按钮可以往数组里面添加值。

添加用户输入的值，我首先就得拿到input的value，这里采用最简单的uesRef来获取。

首先我们需要用，就得先定义

接着给input标签挂上这个

userInput.current.value就是我们需要得到的值.

接着我们需要实现添加功能

首先定义reduce

添加的逻辑就很简单了，这里你也可以写逻辑判断，来判断用户的数据是否为空然后再执行。
这里采用了ES6的拓展运算符语法，来展开原数组，当我点击的时候，在数组前面加上一个新的id和新的content。

接下来就是删除当前你选择的某个列表项，这个需要你对array.slice的用法比较熟悉。

slice（）方法一般有两个参数，第一个表示从第几个索引开始切，第二个参数表示切到哪里停下，但不是不包括第二个参数。意思就是切到第二个参数之前！！！一定要明白这个点，非常重要！

第一个slice(0,action.index)表示的是，我切下从列表第一项到 index(但是不包括)项，然后返回这些数据，特别强调:不是返回剩下的数据！！！！这个方法不改变原数组，而是返回一个新的数组。(注意：slice是切下的意思，不是切剩下的意思)

第二个数组 state.slice(action.index+1)当只有一个参数的时候，begin就是参数值，而这个方法会把第二个参数end的值为数组的长度！意思就是slice(1,array.length),意思就是我从第一个索引开始切（注意，开始切的时候这个参数对应的索引是包括在内的，不然你索引0这个值永远切不到！）
这样就实现了todolist的增添功能。

用纯react Hooks来编写一个todolist案例（一）