react

参考hooks：

https://github1s.com/streamich/react-use

https://github.com/rehooks/awesome-react-hooks

useInterval: 用于设置定时器方法

import { useEffect, useRef } from 'react';

function useInterval(callback: () => void, delay: number | null) {
  const savedCallback = useRef(callback);

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    if (delay === null) {
      return undefined;
    }
    const timeoutId = setInterval(() => savedCallback.current(), delay);
    return () => clearInterval(timeoutId);
  }, [delay]);
}

export default useInterval;

useCancelToken，用于取消request

import { useCallback, useRef, useEffect } from 'react';
import axios, { CancelTokenSource } from 'axios';

export const useCancelToken = () => {
  const cancelTokens = useRef<Array<CancelTokenSource>>([]);
  const isCancel = axios.isCancel;

  const createCancelToken = useCallback(() => {
    const newSource = axios.CancelToken.source();
    cancelTokens.current.push(newSource);
    return newSource;
  }, []);

  // cancel user defined token.
  useEffect(
    () => () => {
      cancelTokens.current.forEach((item) => {
        item.cancel();
      });
      cancelTokens.current = [];
    },
    []
  );

  return { createCancelToken, isCancel };
};

useMountState:也可以用于判断component是否unmount，如果已经unmount，则不setState

export const useMountState = () => {
  const isUnmountRef = useRef(false);
  // Tracking mount state
  useEffect(() => {
    isUnmountRef.current = false;
    return () => {
      isUnmountRef.current = true;
    };
  }, []);

  const isUnmount = useCallback(() => isUnmountRef.current, []);

  return isUnmount;
};