自定义hook 片段

倒计时hook useCount

代码实现

export default (initCount: number, readyCallBack?: () => void) => {
  const [count, setCount] = useState(initCount);
  const refTime = useRef<any>(null);
  const start = () => {
    refTime.current = setInterval(() => {
      setCount((count) => count - 1);
    }, 1000);
  };
  useEffect(() => {
    return () => {
      clearInterval(refTime.current!);
    };
  }, []);
  useEffect(() => {
    if (count === 0) {
      readyCallBack && readyCallBack();
      clearInterval(refTime.current!);
    }
  }, [count]);
  return { count, start };
};

使用方法

  const { count, start } = useCount(10, () => {
    console.log('10秒倒计时结束');
  });

全屏展示 Hook

在图片展示的时候，有时候需要点击图片进入到全屏状态，所以利用requestFullScreen 事件来实现

注意：requestFullScreen 事件只能作用于元素上

代码实现

封装自定义hooks

import React, { useRef } from 'react'

export const UseScreenFull = () => {

  const eleScreenFullRef = useRef(null)
  const isFullScreen = useRef(false)

  const entryFullScreen = (element:any) => {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {   // 兼容火狐
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {    // 兼容谷歌
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {   // 兼容IE
      element.msRequestFullscreen();
    }
  }

  const exitFullscreen = () => {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } 
  }
  
  // 监听页面元素是否进入全屏，进入和退出都会触发
   document.addEventListener('fullscreenchange', () => {
    if (isFullScreen.current) {
      isFullScreen.current = false
    } else {
      isFullScreen.current = true
    }
  })

  const showFullSize = () => {
    const element = eleScreenFullRef.current; 
    entryFullScreen(element)
  }

  const exitFullSize = () => {
    if (isFullScreen.current) {
      exitFullscreen()
    }
  }

  const clickSelfOpen = () => {
    if (isFullScreen.current) {
      exitFullSize()
    } else {
      showFullSize()
    }
  }

  return {
    eleScreenFullRef, // 绑定的ref
    exitFullSize, // 退出全屏事件
    showFullSize, // 进入全屏事件
    clickSelfOpen, // 点击自己进入全屏或者退出全屏
  }

}

使用

引入自定义hook,将 eleScreenFullRef 绑定在要实现全屏的ref上即可

 const { 
   eleScreenFullRef,
   exitFullSize,
   showFullSize,
   clickSelfOpen } = UseScreenFull();

<img ref={eleScreenFullRef} onClick={clickSelfOpen} src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/83d888e2e61444d9952103e5cb3287e0~tplv-k3u1fbpfcp-zoom-1.image"/>`

useLocalStorage

代码实现

const isFunction = (value: any): boolean => {
  return typeof value === 'function';
};

export const useLocalStorage = <T,>(key: string, defaultValue: T | (() => T)) => {
  const [state, setState] = useState<T>(() => {
    try {
      // 判断当前key有没有对应的value值
      const getValue = localStorage.getItem(key);
      if (getValue) {
        return getValue;
      } else {
        // @ts-ignore
        localStorage.setItem(key, isFunction(defaultValue) ? defaultValue() : defaultValue);
      }
    } catch (error) {
      console.warn(error);
    }
    // @ts-ignore
    return isFunction(defaultValue) ? defaultValue() : defaultValue;
  });

  const updateState: typeof setState = (value?) => {
    if (isFunction(value)) {
      setState((val) => {
        const nextValue = (value as (value: T) => T)(val);
        // const nextValue = value(val)
        localStorage.setItem(key, JSON.stringify(nextValue));
        return nextValue;
      });
      return;
    }
    if (typeof value === 'undefined') {
      return localStorage.removeItem(key);
    }
    setState(value);
    localStorage.setItem(key, JSON.stringify(value));
  };

  return [state, updateState] as const;
};

使用方法

  const [state, update] = useLocalStorage('mytest', 11111);