react-use hooks

将一些常用的需求封装成了可重用的 Hooks
Github https://www.npmjs.com/package/react-use
react-use中文 https://github.com/zenghongtu/react-use-chinese/blob/master/README.md
需要安装React 16.8.0或更高版本才能使用Hooks API

npm i react-use
import {useToggle} from 'react-use'

babelrc配置
将命名的导入语句转换为使用babel-plugin-import的单个导入语句

[
  "import", {
    "libraryName": "react-use",
    "libraryDirectory": "lib",
    "camel2DashComponentName": false
  }
]

传感器

• useBattery— 跟踪设备电池状态。
• useGeolocation— 跟踪用户设备的地理位置状态。
• useHoveranduseHoverDirty— 跟踪鼠标悬停某个元素的状态。
• useIdle— 跟踪用户是否处于非活动状态。
• useKey,useKeyPress,useKeyboardJs, 和useKeyPressEvent— 追踪按键。
• useLocation— 跟踪页面导航栏的位置状态。
• useMedia— 跟踪CSS媒体查询的状态。
• useMediaDevices— 跟踪连接的硬件设备的状态。
• useMotion— 跟踪设备的运动传感器的状态。
• useMouseanduseMouseHovered— 跟踪鼠标位置的状态。
• useNetwork— 跟踪用户的互联网连接状态。
• useOrientation— 跟踪设备屏幕方向的状态。
• usePageLeave— 当鼠标离开页面边界时触发。
• useScroll— 跟踪HTML元素的滚动位置。
• useSize— 跟踪HTML元素的维度。
• useStartTyping— 检测用户何时开始输入。
• useWindowScroll— 跟踪窗口滚动位置。
• useWindowSize— 跟踪窗口尺寸。

用户界面

• useAudio— 播放音频并公开其控件。
• useClickAway— 当用户点击目标区域外时触发回调。
• useCss— 动态调整CSS。
• useDropanduseDropArea— 跟踪文件，链接和复制粘贴。
• useFullscreen— 全屏显示元素或视频。
• useSpeech— 从文本字符串合成语音。
• useVideo— 播放视频，跟踪其状态，以及公开播放控件。
• useWait— UI的复杂等待管理。

动画效果

• useRaf— 在每个requestAnimationFrame上重新呈现组件。
• useSpring— 根据弹簧动力学随时间插入数字。
• useTimeout— 超时后返回true。
• useTween— 重新渲染组件，同时补间0到1之间的数字。
• useUpdate— 返回一个回调，在调用时重新呈现组件。

副作用

• useAsync— 解析一个async函数。
• useAsyncFn— 异步函数的状态管理。
• useAsyncRetry—useAsync带有retry()方法。
• useBeforeUnload— 当用户尝试重新加载或关闭页面时显示浏览器警报。
• useCopyToClipboard— 将文本复制到剪贴板。
• useDebounce— 防抖函数。
• useFavicon— 设置页面的favicon。
• useLocalStorage— 管理localStorage中的值。
• useLockBodyScroll— 锁定body元素的滚动。
• useSessionStorage— 管理sessionStorage中的值。
• useThrottleanduseThrottleFn— 节流一个函数。
• useTitle— 设置页面标题。

生命周期

• useEffectOnce— 仅运行一次的修改后的useEffect。
• useEvent— 订阅事件。
• useLifecycles— 调用mount和unmount回调。
• useRefMounted— 跟踪组件是否已挂载。
• usePromise— 仅在安装组件时解析promise。
• useLogger— 在组件经历生命周期时登录控制台。
• useMount— 调用mount回调。
• useUnmount— 调用unmount回调。
• useUpdateEffect— 仅在更新时运行一个effect。
• useDeepCompareEffect— 运行一个effect通过深度比较其依赖项。

状态

• createMemo— memoized hooks的工厂钩子。
• useGetSet— 返回状态 getterget()而不是原始状态。
• useGetSetState— 就像useGetSet和useSetState有个孩子。
• useObservable— 跟踪Observable的最新值。
• useSetState— 创建类似this.setState的setState方法。
• useToggleanduseBoolean— 跟踪布尔值的状态。
• useCounteranduseNumber— 跟踪数字的状态。
• useList— 跟踪数组的状态。
• useMap — 跟踪对象的状态。