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

这篇具有很好参考价值的文章主要介绍了【实战】用 Custom Hook + TS泛型实现 useArray。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、题目

完善自定义 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]);

注意区别于 节流

拓展学习:文章来源地址https://www.toymoban.com/news/detail-787579.html

  • 【笔记】Custom Hook

2.TS 泛型

官方文档:

  • TypeScript: Documentation - Generics
  • 泛型(generic) - TypeScript 中文手册

关键点

  • 不预先指定其具体的类型,而在使用的时候再进行定义
  • 函数是对“值”的编程,泛型是对“类型”的编程
  • 泛型是类型的变量

拓展学习:

  • 【笔记】TS 泛型

到了这里,关于【实战】用 Custom Hook + TS泛型实现 useArray的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包