成都建设诚信网站,国外产品短视频拍摄,漳州正规网站建设公司,搜狗 优化网站文章目录一、题目二、答案#xff08;非标准#xff09;三、关键知识点1.Custom Hook关键点案例useMountuseDebounce2.TS 泛型关键点一、题目
完善自定义 Hook —— useArray #xff0c;使其能够完成 tryUseArray 组件中测试的功能#xff1a;
入参#xff1a;数组返回…
文章目录一、题目二、答案非标准三、关键知识点1.Custom Hook关键点案例useMountuseDebounce2.TS 泛型关键点一、题目
完善自定义 Hook —— useArray 使其能够完成 tryUseArray 组件中测试的功能
入参数组返回值 value最新状态的数组add添加元素removeIndex移除数组特定位置的元素clear清空数组
相关文件代码
src\utils\index.ts
import { useEffect, useState } from react;export const useMount (cbk: () void) useEffect(() cbk(), []);export const useArray () {};src\tryUseArray.tsx
import { 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}/spanspan{person.name}/spanspan{person.age}/span/div))}/div);
};export default TryUseArray;src\App.tsx
import ./App.css;
import TryUseArray from tryUseArray;function App() {return (div classNameAppTryUseArray //div);
}export default App;答答 答 案案 案 在在 在 后后 后 面面 面 没没 没 有有 有 完完 完 成成 成 不不 不 要要 要 偷偷 偷 看看 看 哦哦 哦
二、答案非标准
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 函数中清除上一个同一 useEffectreturn () 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 Hook 2.TS 泛型 官方文档 TypeScript: Documentation - Generics泛型(generic) - TypeScript 中文手册 关键点
不预先指定其具体的类型而在使用的时候再进行定义函数是对“值”的编程泛型是对“类型”的编程泛型是类型的变量 拓展学习 【笔记】TS 泛型
