位置: IT常识 - 正文

【实战】用 Custom Hook + TS泛型实现 useArray(custom用法)

编辑:rootadmin
【实战】用 Custom Hook + TS泛型实现 useArray 文章目录一、题目二、答案(非标准)三、关键知识点1.Custom Hook关键点案例useMountuseDebounce2.TS 泛型关键点一、题目

推荐整理分享【实战】用 Custom Hook + TS泛型实现 useArray(custom用法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:custom cursor怎么用,customs用法,customs用法,custom cursor怎么用,customize的用法,customize的用法,customs用法,custom用法及搭配,内容如对您有帮助,希望把文章链接给更多的朋友!

完善自定义 Hook —— useArray ,使其能够完成 tryUseArray 组件中测试的功能:

入参:数组返回值:value:最新状态的数组;add:添加元素;removeIndex:移除数组特定位置的元素;clear:清空数组;

相关文件代码:

src\utils\index.tsimport { useEffect, useState } from "react";export const useMount = (cbk: () => void) => useEffect(() => cbk(), []);export const useArray = () => {};src\tryUseArray.tsximport { useArray, useMount } from "utils";const TryUseArray = () => { const persons: { name: string; age: number }[] = [ { name: "jack", age: 25 }, { name: "ma", age: 22 }, ]; const { value, clear, removeIndex, add } = useArray(persons); useMount(() => { // 期待这里报错:Property 'notExist' does not exist on type '{ name: string; age: number; }[]'. // console.log(value.notExist); // 期待这里报错:Property 'age' is missing in type '{ name: string; }' but required in type '{ name: string; age: number; }'. // add({ name: "david" }); // 期待这里报错:Argument of type 'string' is not assignable to parameter of type 'number'. // removeIndex("123"); }); return ( <div> {/*期待: 点击以后增加 john */} <button onClick={() => add({ name: "john", age: 22 })}>add john</button> {/*期待: 点击以后删除第一项*/} <button onClick={() => removeIndex(0)}>remove 0</button> {/*期待:点击以后清空列表*/} <button style={{ marginBottom: "50px" }} onClick={() => clear()}> clear </button> {value.map((person, index) => ( <div key={index} style={{ marginBottom: "30px" }}> <span style={{ color: "red" }}>{index}</span> <span>{person.name}</span> <span>{person.age}</span> </div> ))} </div> );};export default TryUseArray;src\App.tsximport "./App.css";import TryUseArray from "tryUseArray";function App() { return ( <div className="App"> <TryUseArray /> </div> );}export default App;【实战】用 Custom Hook + TS泛型实现 useArray(custom用法)

答答答 案案案 在在在 后后后 面面面 ,,, 没没没 有有有 完完完 成成成 不不不 要要要 偷偷偷 看看看 哦哦哦 !!!

二、答案(非标准)import { useEffect, useState } from "react";// 我的练习作业// export const useArray = <T>(array: T[]) => {// const [value, setValue] = useState(array)// const clear = () => setValue([])// const removeIndex = (index: number) => setValue([...value].filter((item, _index) => _index !== index))// const add = (item: item) => setValue([...value, item]))// return {// value, clear, removeIndex, add// }// }export const useArray = <T>(array: T[]) => { const [value, setValue] = useState(array); return { value, add: (item: T) => setValue([...value, item]), removeIndex: (index: number) => { const temp = [...value]; temp.splice(index, 1); setValue(temp); }, clear: () => setValue([]), };};三、关键知识点1.Custom Hook

官方文档:自定义 Hook – React

关键点定义 Custom Hook 是一个函数,名字必须以 use 开头hook 只能在 React 函数组件 或其他 Hook 函数中调用(普通 js/ts 函数中不可用)相同的 Hook 不共享 state (重用状态逻辑的机制,所有 state 和副作用都是完全隔离的)不要在循环,条件或嵌套函数中调用 Hook(建议在 Hook 内部使用循环,条件或嵌套函数)React 16.8+ 中使用Hook 规则 – React案例useMount封装export const useMount = (cbk: () => void) => useEffect(() => cbk(), []);调用import { useMount } from "utils";const [list, setList] = useState([]);useMount(() => { fetch(`${apiUrl}/list`).then(async (res) => { if (res.ok) { setList(await res.json()); } });});useDebounce封装/** * @param { 值 } val * @param { 延时:默认 1000 } delay * @returns 在某段时间内多次变动后最终拿到的值(delay 延迟的是存储在队列中的上一次变化) */export const useDebounce = <V>(val: V, delay: number = 1000) => { const [tempVal, setTempVal] = useState(val); useEffect(() => { // 每次在 val 变化后,设置一个定时器 const timeout = setTimeout(() => setTempVal(val), delay); // 每次在上一个 useEffect 处理完以后再运行(useEffect 的天然功能即是在运行结束的 return 函数中清除上一个(同一) useEffect) return () => clearTimeout(timeout); }, [val, delay]); return tempVal;};调用import { useDebounce } from "utils";// 对 param 进行防抖处理const lastParam = useDebounce(param);const [list, setList] = useState([]);useEffect(() => { fetch( // name=${param.name}&personId=${param.personId} `${apiUrl}/projects?${qs.stringify(lastParam)}` ).then(async (res) => { if (res.ok) { setList(await res.json()); } });}, [lastParam]);

注意区别于 节流

拓展学习:

【笔记】Custom Hook2.TS 泛型

官方文档:

TypeScript: Documentation - Generics泛型(generic) - TypeScript 中文手册关键点不预先指定其具体的类型,而在使用的时候再进行定义函数是对“值”的编程,泛型是对“类型”的编程泛型是类型的变量

拓展学习:

【笔记】TS 泛型
本文链接地址:https://www.jiuchutong.com/zhishi/300147.html 转载请保留说明!

上一篇:魔改并封装 YoloV5 Version7 的 detect.py 成 API接口以供 python 程序使用(魔改toolbox)

下一篇:css圆角边框怎么设置(css圆角边框弧度代码)

  • 怎么清理手机内存(怎么清理手机内存)(怎么清理手机内存 垃圾清理)

    怎么清理手机内存(怎么清理手机内存)(怎么清理手机内存 垃圾清理)

  • docx文件怎样打开iphone手机(docx文件怎样打开)(word文档怎么打印)

    docx文件怎样打开iphone手机(docx文件怎样打开)(word文档怎么打印)

  • 拼多多怎么评论和发照片(拼多多怎么评论别人发的评价)

    拼多多怎么评论和发照片(拼多多怎么评论别人发的评价)

  • jfp1接口怎么插线(jfp1接口在哪)

    jfp1接口怎么插线(jfp1接口在哪)

  • 老年机开不了机是什么原因(老年机黑屏开不了机怎么办)

    老年机开不了机是什么原因(老年机黑屏开不了机怎么办)

  • qq相册视频怎样导出(qq相册视频怎样导出到电脑)

    qq相册视频怎样导出(qq相册视频怎样导出到电脑)

  • 微信群退出仍收到消息(微信群退出了为什么还是收到信息)

    微信群退出仍收到消息(微信群退出了为什么还是收到信息)

  • 小翼管家能绑定几个手机(小翼管家能绑定几个路由器)

    小翼管家能绑定几个手机(小翼管家能绑定几个路由器)

  • 5ipro与5z区别(5gcpepro和5gcpepro2)

    5ipro与5z区别(5gcpepro和5gcpepro2)

  • 淘宝挑选服务是什么意思(淘宝挑选服务是正品吗)

    淘宝挑选服务是什么意思(淘宝挑选服务是正品吗)

  • 剪映可以视频抠图吗(剪映视频抠成透明背景怎么弄)

    剪映可以视频抠图吗(剪映视频抠成透明背景怎么弄)

  • 域名总长度不能超过(域名长度有限制吗)

    域名总长度不能超过(域名长度有限制吗)

  • 苹果怎么打开夜间模式(苹果怎么打开夜间)

    苹果怎么打开夜间模式(苹果怎么打开夜间)

  • 苹果哪款机型是双卡双待(苹果哪款机型是2k)

    苹果哪款机型是双卡双待(苹果哪款机型是2k)

  • Reno Ace怎么设置解锁密码(reno ace rom)

    Reno Ace怎么设置解锁密码(reno ace rom)

  • pytorch是干什么的(pytorch的好处)

    pytorch是干什么的(pytorch的好处)

  • internet采用域名是因为什么(internet中的域名)

    internet采用域名是因为什么(internet中的域名)

  • 怎么把图片转成文档(怎么把图片转成cad图)

    怎么把图片转成文档(怎么把图片转成cad图)

  • 百度小程序怎么删除(百度小程序怎么做)

    百度小程序怎么删除(百度小程序怎么做)

  • 抖音个人中心在哪(抖音个人中心在哪里找)

    抖音个人中心在哪(抖音个人中心在哪里找)

  • 苹果xsmax支持多少w快充(苹果xsmax支持多少瓦无线充电)

    苹果xsmax支持多少w快充(苹果xsmax支持多少瓦无线充电)

  • 小度1s怎么绑第二个手机(小度1c怎么绑定小度app)

    小度1s怎么绑第二个手机(小度1c怎么绑定小度app)

  • Win10 5 月累计更新21H1存在新bug的解决方法(win10 5月更新已知bug)

    Win10 5 月累计更新21H1存在新bug的解决方法(win10 5月更新已知bug)

  • 苹果11关机教程(苹果11 关机方法)

    苹果11关机教程(苹果11 关机方法)

  • 静电是什么(图文)(静电现象什么意思)

    静电是什么(图文)(静电现象什么意思)

  • php中while和do...while有何不同(php的do while语句)

    php中while和do...while有何不同(php的do while语句)

  • 哪些税不用通过应交税费
  • 所得税优惠政策最新2022
  • 所得税费用是什么要素
  • 所得税视同销售行为有哪些
  • 不动产官网查询
  • 投标保证金退回规定
  • 软件公司主营业务是什么
  • 员工报销款可以公转私吗
  • 自然人管理系统银行信息
  • 企业所得税准予扣除
  • 上级工会返还的经费记什么收入
  • 代扣和代垫
  • 增值税缴纳的罚款怎么算
  • 冲去年其他应付款做管理费用凭证
  • 工资不到3500用交个税吗
  • 营业收入不开发票
  • 没进项发票要交多少税
  • 公司购买环保材料会计分录
  • 其他应收款要做账吗
  • 企业债务追诉期几年
  • 技术开发免征增值税属于普通零税率项目么?
  • 极路由好用吗
  • 委托加工物资的加工费计入什么科目
  • 光纤布线有什么作用
  • 要求快速启动
  • php面向对象优点,缺点
  • 新公司成立的前期准备工作计划
  • 营改增建筑企业增值税
  • 影视公司纳税标准
  • 房开企业增值税扣除土地价款包括契税吗
  • 购买材料发票未到如何做账
  • 服务,不动产和无形资产怎么填小规模
  • 金税盘,税控盘Ukey价格
  • php如何制作登录页面
  • php调试函数
  • 逾期增值税扣税凭证抵扣管理办法
  • 愚公全名
  • last命令详解
  • 文件不知道在哪怎么找
  • 企业确认坏账损失领导如何回复
  • 新购入的汽车需要年检吗
  • 门诊收费票据能作为报销凭证吗
  • 代收款用什么会计科目
  • 土地扣除项目金额
  • 以房租入股股份怎么计算
  • photoshop虚化局部
  • 织梦自定义表单diy.php更改名字
  • 酒店成本控制有哪些
  • 企业自查补税怎么报税
  • 企业所得税固定资产的计税基础
  • 如何做一份有效的面包
  • 结转上年
  • 金税四期对增值税专票
  • 残保金申报方式改变时间
  • 发票上的印记能去掉吗
  • 收到加油
  • 固定资产进项税率
  • 对方多开发票怎么处理?
  • 没签劳动合同的后果
  • 固定资产折旧是什么意思
  • 公司抽奖的成本怎么算
  • 简易征收增值税一般纳税人怎么报税
  • 结转本月销售材料成本
  • 固定资产二级明细科目有哪些
  • 在linux操作系统中,/etc/rc.d/init.d
  • googletoolbarnotifier.exe是什么进程?GoogleToolbarNotifier怎么关闭?
  • rhel6.5安装教程
  • explorer.exe进程在哪
  • w8系统ie浏览器在哪
  • shell脚本用法
  • Cocos2dx3.2 CrazyTetris 物理引擎使用初步
  • Python实现Mysql数据库连接池实例详解
  • js querySelector() 使用方法
  • [置顶]马粥街残酷史
  • javascript原型
  • jquery遍历div子元素
  • 深圳国税电子税务局
  • 税务如何稽查
  • 国家税务局增值税发票平台
  • 税务总局纪律作风
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设