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

自定义Hook的作用

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

自定义Hook的规范

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

自定义Hook的例子

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];
}