Day3：Github项目每日优选之react-use

// Github项目每日优选 第3篇
// 正文共 1996 字
// 预计阅读时间：10 分钟

各位宝友大家好，今天给大家带来了 react-use 。咱说心里话，这个东西我第一次看见真觉得捡到了宝儿。React hooks我相信很多同学已经门清了，这个库实现了基本上我们常见的所有自定义Hooks,需要哪个直接查看源代码复制到你的项目中，二次在改一改，你的同事夸你666呢😁

• Github是个巨大的仓库，里面有非常多优秀的项目。其实并不是一定star多的项目才值得关注，有很多小而美的项目我们完全可以去关注学习，并及时fork。站在前人的肩膀上造轮子或者直接应用到项目中，这样才能不怕🙅🏻♀️被卷。我们每天争取用最短小的文章，最短的时间，给你带来最大的收益。

ℹ️ 一句话概述他就是必不可少的 React Hooks 集合.

react-use详情

1 传感器

• useBattery — 跟踪设备电池状态。

• useGeolocation — 跟踪用户设备的地理位置状态。

• useHover and useHoverDirty — 跟踪鼠标悬停某个元素的状态。

• useHash —跟踪用户hash变化。

• useIdle — 跟踪用户是否处于非活动状态。
• useIntersection — 跟踪元素的视窗变化区域（用于懒加载IntersectionObserver）

• useKey, useKeyPress, useKeyboardJs, and useKeyPressEvent — 追踪按键。

• useLocation and useSearchParam — 跟踪页面导航栏的位置状态。
• useLongPress — 跟踪某些元素的长按手势。
• useMedia —跟踪 CSS 媒体查询的状态。

• useMediaDevices — 跟踪连接的硬件设备的状态。
• useMotion — 跟踪设备运动传感器的状态。
• useMouse and useMouseHovered — 跟踪鼠标位置的状态。

• useMouseWheel — 跟踪滚动鼠标滚轮的 deltaY。

• useNetworkState — 跟踪浏览器网络连接的状态。

• useOrientation — 跟踪设备屏幕方向的状态。
• usePageLeave — 当鼠标离开页面边界时触发。
• useScratch — 跟踪鼠标点击和滑动状态。
• useScroll — 跟踪 HTML 元素的滚动位置。

• useScrolling — 跟踪 HTML 元素是否正在滚动。
• useStartTyping — 检测用户何时开始输入。
• useWindowScroll — 跟踪窗口滚动位置。

• useWindowSize — 跟踪窗口尺寸。

• useMeasure and useSize — 跟踪 HTML 元素的尺寸。

• createBreakpoint — 跟踪 innerWidth
• useScrollbarWidth — 检测浏览器的原生滚动条宽度。

2 UI

• useAudio — 播放音频并展示其控件。

• useClickAway —当用户点击目标区域外时触发回调。
• useCss — 动态调整 CSS。
• useDrop and useDropArea — 跟踪文件、链接和复制粘贴放置。
• useFullscreen —全屏显示元素或视频。

• useSlider — 在任何 HTML 元素上提供滑动行为。

• useSpeech — 从文本字符串合成语音。

• useVibrate — 使用振动 API 提供物理反馈。Vibration API.

• useVideo — 播放视频、跟踪其状态并展示播放控件。

3 Animations

• useRaf —在每个 requestAnimationFrame 上重新渲染组件。
• useInterval and useHarmonicIntervalFn — 使用 setInterval 在设定的间隔上重新渲染组件。
• useSpring — 根据弹簧动力学随时间插入数字。
• useTimeout — 超时后重新渲染组件。
• useTimeoutFn — 超时后调用给定函数。

• useTween — 重新渲染组件，同时对从 0 到 1 的数字进行补间。

• useUpdate —返回一个回调，它在调用时重新渲染组件。

4 Side-effects

• useAsync, useAsyncFn, and useAsyncRetry — 解析异步函数。
• useBeforeUnload — 当用户尝试重新加载或关闭页面时显示浏览器警报。
• useCookie — 提供读取、更新和删除 cookie 的方法。

• useCopyToClipboard — 将文本复制到剪贴板。
• useDebounce —函数去抖]

• useError — 错误调度程序。

• useFavicon — 设置页面的 favicon。
• useLocalStorage — 管理 localStorage 中的值。
• useLockBodyScroll — 锁定主体元素的滚动。
• useRafLoop — 在 RAF 循环内调用给定的函数。
• useSessionStorage — 管理 sessionStorage 中的值。
• useThrottle and useThrottleFn — throttles a function.

• useTitle — 置页面的标题。
• usePermission — 查询浏览器 API 的权限状态。

5 Lifecycles

• useEffectOnce — 修改后的 useEffect 钩子，只运行一次。
• useEvent — 订阅事件。
• useLifecycles — calls mount and unmount callbacks.
• useMountedState and useUnmountPromise — 踪组件是否已安装。
• usePromise — resolves promise only while component is mounted.
• useLogger — 在组件经历生命周期时控制台打印。
• useMount — 调用挂载回调。
• useUnmount — 调用卸载回调。
• useUpdateEffect — 仅对更新运行效果。
• useIsomorphicLayoutEffect — 服务端渲染时不显示警告的 useLayoutEffect。
• useDeepCompareEffect, useShallowCompareEffect, and useCustomCompareEffect — 根据其依赖项的深度比较运行效果

6 State

• createMemo — 记忆钩子工厂。
• createReducer — 带有自定义中间件的 reducer 钩子工厂。
• createReducerContext and createStateContext — 组件之间共享状态的钩子工厂。
• useDefault — 当 state 为 null 或 undefined 时返回默认值。
• useGetSet — 返回状态 getter get() 而不是原始状态。
• useGetSetState — as if useGetSet and useSetState had a baby（这句原谅我不厚道的笑了）.
• useLatest — 返回最新的 state 或 props
• usePrevious — 返回最新的 state 或 props.

• usePreviousDistinct — 与 usePrevious 类似，但使用谓词来确定是否应更新以前的内容。
• useObservable — 跟踪 Observable 的最新值。
• useRafState — 创建仅在 requestAnimationFrame 之后更新的 setState 方法。

• useSetState — 创建类似于 this.setState 的 setState 方法。

• useStateList —循环迭代数组。

• useToggle and useBoolean — 跟踪布尔值的状态。

• useCounter and useNumber — 跟踪数字的状态。

• useList and useUpsert — 跟踪数组的状态。

• useMap — — 跟踪对象的状态。

• useSet — 跟踪 Set 的状态。

• useQueue —实现简单的队列。
• useStateValidator — 跟踪对象的状态。

• useStateWithHistory — 存储先前的状态值并提供遍历它们的句柄。

• useMultiStateValidator — 与 useStateValidator 类似，但一次跟踪多个状态。

• useMediatedState —与常规 useState 类似，但通过自定义函数进行调解。

• useFirstMountState —检查当前渲染是否是第一个。

• useRendersCount — 计算组件渲染。

• createGlobalState — 跨组件共享状态。

• useMethods — useReducer 的简洁替代品。

7 其他各种各样的

• useEnsuredForwardedRef and ensuredForwardRef — 安全地使用 React.forwardedRef。

8. 代码演示

import {useBattery} from 'react-use';

const Demo = () => {
  const batteryState = useBattery();

  if (!batteryState.isSupported) {
    return (
      <div>
        <strong>Battery sensor</strong>: <span>not supported</span>
      </div>
    );
  }

  if (!batteryState.fetched) {
    return (
      <div>
        <strong>Battery sensor</strong>: <span>supported</span> <br />
        <strong>Battery state</strong>: <span>fetching</span>
      </div>
    );
  }

  return (
    <div>
      <strong>Battery sensor</strong>:&nbsp;&nbsp; <span>supported</span> <br />
      <strong>Battery state</strong>: <span>fetched</span> <br />
      <strong>Charge level</strong>:&nbsp;&nbsp; <span>{ (batteryState.level * 100).toFixed(0) }%</span> <br />
      <strong>Charging</strong>:&nbsp;&nbsp; <span>{ batteryState.charging ? 'yes' : 'no' }</span> <br />
      <strong>Charging time</strong>:&nbsp;&nbsp;
      <span>{ batteryState.chargingTime ? batteryState.chargingTime : 'finished' }</span> <br />
      <strong>Discharging time</strong>:&nbsp;&nbsp; <span>{ batteryState.dischargingTime }</span>
    </div>
  );
};