当前位置：首页 > news >正文

【实战】用 Custom Hook + TS泛型实现 useArray

news 2025/6/30 19:42:53

文章目录

一、题目
二、答案（非标准）
三、关键知识点
- 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 = <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]);