位置: 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圆角边框弧度代码)

  • 小规模免缴增值税吗
  • 小规模纳税人出售使用过固定资产
  • 公司月报表怎么做
  • 围挡属于什么类型
  • 异地缴纳税款
  • 盈利幼儿园和非盈利幼儿园的政策
  • 装水表财务是什么费用
  • 我公司给对方公司付款
  • 外贸公司有国企吗
  • 跨区域经营企业
  • 账务核对有账表核对吗
  • 报废资产取得的增值税
  • 公司股东法人变更流程
  • 工业设备基础
  • 销售合同印花税计税依据及税率
  • 饭店取得的烟酒是什么
  • 房产继承税征收标准是多少
  • 小规模纳税人计提增值税
  • 污水处理费计入哪里
  • 知识产权代理公司怎么盈利
  • 以前年度多做了收入怎样调账
  • 速冻食品增值税税率
  • 小型微利企业的
  • 1697511149
  • 电脑进入bios关机
  • mac系统 硬盘
  • 设计费要计入固定费用吗
  • 一种简单的快乐
  • PHP+Mysql+jQuery实现发布微博程序 php篇
  • 员工聚餐费用计入
  • php中session什么意思
  • 行政事业单位会计科目一览表
  • php找出字符串中出现最多的字母
  • CodeIgniter视图使用注意事项
  • php二维数组按某个键值排序
  • flex布局实现垂直居中
  • echarts series name
  • 轮播图效果用css怎么实现
  • css动画效果代码
  • php异常处理方法
  • 应收应付对冲的会计分录
  • 事业周转编制
  • python knn算法和结果
  • 生产企业免抵退税实例
  • 现金周期和经营周期的计算公式
  • 如何在税控盘上变更一般纳税人
  • 土地使用权使用寿命不确定要摊销吗
  • SQL Server 2005 镜像构建手册(sql2005数据库同步镜像方案)
  • 并发环境下,共享资源的正确使用方式是
  • 房租能不能一次性付清
  • 税金及附加如何计算公式
  • 其他债权投资如何计提减值
  • 物流辅助服务费属于什么费用
  • 小规模减免的附加税怎么做账
  • 银行贴息一般多久能到账
  • 执行迟延履行金的规定
  • 贷款减值准备如何计算
  • 还账准备计提方法
  • 销售酒怎么结转销售成本
  • 暂估入库后发票来不了会计分录
  • 如何远程连接小米摄像头
  • FreeBSD5.4之apache-2.0.54+php+ZendOptimizer简单安装、设置
  • 如何用pe弄双系统引导
  • win7系统玩游戏好吗
  • 利用windows资源管理
  • jQuery ajax读取本地json文件的实例
  • javascript date format
  • jsclass选择器
  • netcfghlp怎么安装
  • js拖拽div
  • python中安装模块的命令
  • android layout布局
  • JavaScript中Number.NEGATIVE_INFINITY值的使用详解
  • nodejs 异步io
  • div与script
  • [置顶]马粥街残酷史
  • 座机怎么查来电显示号码
  • 海关进口增值税如何入账
  • 无锡第三税务分局
  • 中医药文化进校园活动
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设