react-use ---- 一个强大的react hook 库useMap: 同 useList就像usePrevio

| 导语 react 16 后，react加入了hook的功能，让我们写react的武器库又多了一件，hook提供了更便捷更灵活的写法，但是官方自带的hook远远无法满足我们的开发需求，这里我介绍一个很强大的hook库供大家参考 ---- react-use,以下我会列几个我觉得比较好用的hook

1、函数类

主要提供一些工具类的函数：

createMemo: 对纯函数进行缓存
createReducer: 封装了一下reducer，跟useReducer有点类似，不过这个reducer 是 redux的reducer，而不是useReducer的类reducer
useToggle:toggle一个布尔值
useCounter:计数器
useDefault: 记录默认值，例如可以保存初始的state
useGetSet: 封装了get 和 set 函数
useGetSetState: 同上，不过可以用来模拟非函数组件的setSate
useList: 把list单独封装了一下，操作直接改变值
useMap: 同 useList就像usePrevious一样，但是它只在值实际发生更改时才会更新。
useObservable:封装了observable函数，让变量可以双向绑定，但是想吐槽的一点是写法有点复杂，不如直接用useRef
usePrevious: 记录操作之前的值，有点用
usePreviousDistinct: 就像usePrevious一样，但是它只在值实际发生更改时才会更新
useSetState:同 useGetSetState
useStateList: state数组操作
useUpsert: 一个更强大的uselist

列了几个例子

useToggle

提供了toggle功能

import {useToggle, useBoolean} from 'react-use';

const Demo = () => {
  const [on, toggle] = useToggle(true);

  return (
    <div>
      <div>{on ? 'ON' : 'OFF'}</div>
      <button onClick={toggle}>Toggle</button>
      <button onClick={() => toggle(true)}>set ON</button>
      <button onClick={() => toggle(false)}>set OFF</button>
    </div>
  );
};

createMemo

对纯函数进行缓存

import {createMemo} from 'react-use';

const fibonacci = n => {
  if (n === 0) return 0;
  if (n === 1) return 1;
  return fibonacci(n - 1) + fibonacci(n - 2);
};

const useMemoFibonacci = createMemo(fibonacci);

const Demo = () => {
  const result = useMemoFibonacci(10);

  return (
    <div>
      fib(10) = {result}
    </div>
  );
};

2、side effect类

主要包括一些异步操作hook:

useAsync:提供异步操作的hook
useAsyncFn: 封装异步操作的函数
useAsyncRetry:useAsync加了一个重试功能
useBeforeUnloadstate变化后的一个回调，可以用于变更操作后的确认弹框
useCopyToClipboard:拷贝内容
useDebounce: debounce
useFavicon: 设置页面favicon
useLocalStorage:操作localstorage
useLockBodyScroll:禁用页面滚动
usePermission: 浏览器api权限查询
useRafLoop: 循环执行
useSessionStorage: 同useLocalStorage
useThrottle: throttle
useTitle: 设置页面标题

举个栗子

useAsync

import {useAsync} from 'react-use';

const Demo = ({url}) => {
  const state = useAsync(async () => {
    const response = await fetch(url);
    const result = await response.text();
    return result
  }, [url]);

  return (
    <div>
      {state.loading
        ? <div>Loading...</div>
        : state.error
          ? <div>Error: {state.error.message}</div>
          : <div>Value: {state.value}</div>
      }
    </div>
  );
};

3、ui相关

useAudio: 使用音频
useCss: css
useDrop: 拖拽
useFullscreen: 全屏
useSpeech: 合成人声
useVideo: 视频

传感器相关，用了这个库我才知道原来浏览器提供了这么多传感器的api，但是部分已经过时不支持

useBattery: 电池使用状况，是否充电（我用电脑测了，chrome下可用）
useEvent: 事件，键盘鼠标操作
useGeolocation: 获取地理位置
useHover useHoverDirty: 检查是否hover
useIdle: 检查用户是否闲置，用的requestIdleCallback api
useKey useKeyPress useKeyPressEvent useKeyboardJs: 检测按键
useLocation: 获取location的数据。。。
useMeasure: 获取尺寸
useMedia: 检查css里面的media
useMediaDevices: 获取连接的设备
useMotion: 获取方向传感器
useMouse and useMouseHovered: 获取鼠标的坐标
useNetwork: 获取网络连接状态
useOrientation: 用户屏幕方向，横竖屏判断
usePageLeave: 鼠标移出页面
useScroll: 滚轮属性，触摸板不是很准
useSearchParam: 获取路由参数
useSize: 侦听尺寸变化 onsize

生命周期 useDeepCompareEffect: deepcompare后的useEffect
useEffectOnce: 运行一次的useEffect
useLifecycles: 提供mounted 和 unmount 两个生命周期
useLogger: 生命周期里面打log
useMount: mount生命周期
useMountedState: 判断组件内是否mounted
usePromise: 返回一个promise来判断组件是否渲染完成
useRefMounted: 是否mounted的ref,因为Mounted的值可能会经常变
useUnmount: 是否unmount
useUpdateEffect: 模拟 update生命周期（忽略第一次mount）

动画相关 useHarmonicIntervalFn: 延迟执行函数
useInterval useTimeout: 定时器
useRaf: requestAnimateFrame的hook
useSpring: Spring 弹簧，弹簧动画
useTween: 缓动，返回0-1的缓动值
useUpdate: 强制更新组件