文章目录
- 一、题目
- 二、答案(非标准)
- 三、关键知识点
- 1.Custom Hook
- 关键点
- 案例
- useMount
- useDebounce
- 2.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}</span> <span>{person.name}</span> <span>{person.age}</span> </div> ))} </div> );};export default TryUseArray;
- src\App.tsx
import "./App.css";import TryUseArray from "tryUseArray";function App() { return ( <div className="App"> <TryUseArray /> </div> );}export default App;
答 答 答
案 案 案
在 在 在
后 后 后
面 面 面
, , ,
没 没 没
有 有 有
完 完 完
成 成 成
不 不 不
要 要 要
偷 偷 偷
看 看 看
哦 哦 哦
! ! !
二、答案(非标准)
import { useEffect, useState } from "react";// 我的练习作业// export const useArray = (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 Hook
2.TS 泛型
官方文档:
- TypeScript: Documentation – Generics
- 泛型(generic) – TypeScript 中文手册
关键点
- 不预先指定其具体的类型,而在使用的时候再进行定义
- 函数是对“值”的编程,泛型是对“类型”的编程
- 泛型是类型的变量
拓展学习:
- 【笔记】TS 泛型