用纯react|用纯react Hooks来编写一个todolist案例（一）
最近看到网上很多todolist的案例都是类组件的，发现这样对ReactHooks的初学者来说很不友好。遂编写此文章。(脚手架是官方原生的 create-react-app)
页面效果如下
文章图片
先不考虑功能，如果当你看到这个图，脑子里还不能清晰的浮现出怎样敲出来这样的排版。我的建议是多写几个页面，千万不要眼高手低。我的建议是你先不要看下面的文章了，先打开你的代码编辑软件去把这个简单的页面排版实现，功能先不要考虑，等你可以自己完成这个页面，再回过头来看这篇文章。
可以去看我的博客，我的文章都是新手向https://hanzhenfang.vercel.app/
(点击博客客人主页头像，就可以打开空调，由于采用了黑科技，手机端可以从听筒吹到风。电脑端暂时还没实现，日后更新...)
【用纯react|用纯react Hooks来编写一个todolist案例（一）】
文章图片
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--项目开发|react 项目--博客系统（后端总结）
- 通过vue学习react(四)|通过vue学习react(四) - watch,computed,slot等功能
- 自定义hooks 同步获取useState的最新状态值
- React|React Router v6 探索
- Next.js+React+Node系统实战，搞定SSR服务器渲染一起无mi
- 七天接手react项目|七天接手react项目 系列 —— 尾篇（antd 和 mobx）
- react-native
- vue3和react17(三)|vue3和react17(三) - 生命周期(ts)
- React|同源策略限制及跨域问题的解决方法
- React|React 测试