大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 rooks

Essential React custom hooks  to super charge your components!

rooks 是一系列必备的 React 自定义钩子，用于极大提升开发者日常编码效率。支持以下优秀的 hooks:

• 动画和时间：支持 5 个钩子，包括：useIntervalWhen、useLockBodyScroll、useRaf、useResizeObserverRef、useTimeoutWhen 等
• 浏览器 API ：支持 9 个钩子，包括：useGeolocation、
  useIdleDetectionApi 、useNavigatorLanguage 、useOnline、useOrientation 、useScreenDetailsApi、
  useWebLocksApi 、useSpeech 、useVibrate 等
• 事件相关 ：支持 15 个钩子，包括：useDocumentEventListener 、useDocumentVisibilityState、useFocus、useFocusWithin 、useIsDroppingFiles 、useOnClickRef、useOnHoverRef 、useOnLongHover 、useOnLongPress 、useOnStartTyping 、useOnWindowResize、useOnWindowScroll 、useOutsideClick 、useOutsideClickRef 、seWindowEventListener 等等
• 其他优秀 hooks：生命周期和 Effect 相关的 9 个钩子、鼠标和触摸的 3 个 Hooks、状态管理的 18 个 hooks、状态历史额 4 个 hooks 等等。

rooks 的典型特征可以概括为：

• 收集 97 个独立模块钩子
• 独立软件包，所有钩子均集中于一处
• 支持 CommonJS、UMD 和 ESM

目前 rooks 在 Github 通过 MIT 协议开源，有超过 3.3k 的 star，是一个值得尝试的前端开源项目。

如何使用 rooks

首先安装相应依赖:

// 安装 npm i -s rooks
import { useDidMount } from "rooks";

下面是基础使用方法：

function App() {
  useDidMount(() => {
    alert("mounted");
  });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

下面的示例表示当条件成立时立即设置 setInterval：

import { useIntervalWhen } from "rooks";
import { useState } from "react";
function App() {
  const [value, setValue] = useState(0);
  const [when, setWhen] = useState(false);
  useIntervalWhen(
    () => {
      setValue(value + 1);
    },
    1000, // run callback every 1 second
    when // start the timer when it's true
  );
  return (
    <div
      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
    >
      <h1>Rooks: useIntervalWhen example</h1>
      <h2>Value: {value}</h2>
      <button onClick={() => setWhen(true)}> Start interval </button>
    </div>
  );
}
export default App;

下面示例表示立即触发回调，不等待第一个间隔完成：

import { useIntervalWhen } from "rooks";
import { useState } from "react";
function App() {
  const [value, setValue] = useState(0);
  const [when, setWhen] = useState(false);
  useIntervalWhen(
    () => {
      setValue(value + 1);
    },
    1000, // run callback every 1 second
    when, // start the timer when it's true
    true // no need to wait for the first interval
  );
  return (
    <div
      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
    >
      <h1>Rooks: useIntervalWhen example</h1>
      <p>
        Notice how the first increment is instantly after interval is enabled.
        If n intervals run, the callback fires n+1 times.
      </p>
      <h2>Value: {value}</h2>
      <button onClick={() => setWhen(true)}> Start interval </button>
    </div>
  );
}
export default App;

更多关于 rooks 的用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/imbhargav5/rooks

https://rooks.vercel.app/docs