自定义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];}