共计 1277 个字符，预计需要花费 4 分钟才能阅读完成。
最近看到网上很多 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 的削减性能。
