关于javascript:用纯react-Hooks来编写一个todolist案例一

最近看到网上很多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的削减性能。

未完待续…..

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据