关于前端:React自定义Hook的使用

47次阅读

共计 1075 个字符，预计需要花费 3 分钟才能阅读完成。

自定义 Hook，就是应用了内置 Hook 的一般函数。
咱们能够把函数组件中反复解决的逻辑抽离进去封装成 hook，缩小代码量，不便疾速编写函数组件。

要以 use 结尾的小驼峰命名。如 useRequest、useLoad、useExport等等。

`useRequest`

基于 axios 申请异步 API 数据的自定义 hook

import {AxiosResponse} from "axios";
import {useState, useEffect} from "react";

interface Responses<D> {
  code: number,
  message: string,
  data: D,
};

type UseRequest<D> = [
  data: D,
  setData: React.Dispatch<React.SetStateAction<D>>,
  handleUpdate: () => void,]

export default function useRequest<D = any, P = any>(requestApi: (params?: P) => Promise<AxiosResponse<Responses<D>>>, 
  params?: P,
  handleError?: (err?: any | Responses<D>) => void,
  handleFinally?: () => void,): UseRequest<D> {const [data, setData] = useState<D>();
  const [update, setUpdate] = useState(1);

  const handleUpdate = () => {setUpdate((value) => {return value + 1;});
  };

  useEffect(() => {
    let active = true;

    if (active) {requestApi(params).then((response) => {switch (response.data.code) {
          case 0: {setData(response.data.data);
          } break;
          default: {
            // You error handle...
            handleError && handleError(response.data);
          };
        }
      }).catch(handleError).finally(handleFinally);
    }

    return () => {active = false;};
  }, [update]);

  return [data, setData, handleUpdate];
}

正文完