beautiful-react-hooks库——入门实践常用hook详解

简介

beautiful-react-hooks 是一个专为 React 设计的高质量自定义 Hooks 集合，涵盖了事件、状态、生命周期、DOM 操作、性能优化等多个方面，极大提升了函数组件的开发效率和代码复用性。

安装方法

npm install beautiful-react-hooks
# 或
yarn add beautiful-react-hooks

常用 Hook 分类与详解

useToggle —— 布尔值/任意值切换

import useToggle from "beautiful-react-hooks/useToggle";

export default function BeautifulHooks() {
  const [on, toggle] = useToggle(false);
  return (
    <div className="container p-4">
      <button
        onClick={toggle}
        className={`px-4 py-2 rounded mb-2 text-white font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 ${
          on ? "bg-green-500 hover:bg-green-600" : "bg-red-500 hover:bg-red-600"
        }`}
      >
        {on ? "开关已打开" : "开关已关闭"}
      </button>
      <div className="mt-2 text-base">
        当前状态：
        <b className={on ? "text-green-600" : "text-red-600"}>
          {on ? "ON" : "OFF"}
        </b>
      </div>
    </div>
  );
}

usePreviousValue —— 获取前一个值

import useToggle from "beautiful-react-hooks/useToggle";
import usePreviousValue from "beautiful-react-hooks/usePreviousValue";

export default function BeautifulHooks() {
  const [on, toggle] = useToggle(false);
  const prevOn = usePreviousValue(on);
  return (
    <div className="container p-4">
      <button
        onClick={toggle}
        className={`px-4 py-2 rounded mb-2 text-white font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 ${
          on ? "bg-green-500 hover:bg-green-600" : "bg-red-500 hover:bg-red-600"
        }`}
      >
        {on ? "开关已打开" : "开关已关闭"}
      </button>
      <div className="mt-2 text-base">
        当前状态：
        <b className={on ? "text-green-600" : "text-red-600"}>
          {on ? "ON" : "OFF"}
        </b>
      </div>
      <div className="mt-1 text-sm text-gray-500">
        上一次状态：
        <b className={prevOn ? "text-green-600" : "text-red-600"}>
          {prevOn === undefined ? "无" : prevOn ? "ON" : "OFF"}
        </b>
      </div>
    </div>
  );
}

useObjectState —— 对象状态管理

import useObjectState from "beautiful-react-hooks/useObjectState";

export default function BeautifulHooks() {
  const [form, setForm] = useObjectState({ name: "", age: "" });
  return (
    <div className="container p-4">
      <div className="mt-6 p-4 border rounded bg-gray-50">
        <div className="mb-2 font-semibold">useObjectState 示例</div>
        <div className="flex flex-col gap-2">
          <input
            className="border px-2 py-1 rounded focus:outline-none focus:ring-2 focus:ring-blue-400"
            type="text"
            placeholder="姓名"
            value={form.name}
            onChange={(e) => setForm({ name: e.target.value })}
          />
          <input
            className="border px-2 py-1 rounded focus:outline-none focus:ring-2 focus:ring-blue-400"
            type="number"
            placeholder="年龄"
            value={form.age}
            onChange={(e) => setForm({ age: e.target.value })}
          />
        </div>
        <div className="mt-2 text-sm text-gray-700">
          当前表单状态：
          <span className="font-mono">{JSON.stringify(form)}</span>
        </div>
      </div>
    </div>
  );
}

useValidatedState —— 校验型状态

import useValidatedState from "beautiful-react-hooks/useValidatedState";

export default function BeautifulHooks() {
  // 校验函数：密码长度大于3
  const passwordValidator = (password) => password.length > 3;
  const [password, setPassword, validation] = useValidatedState(
    passwordValidator,
    ""
  );

  return (
    <div className="container p-4">
      <div className="mb-2 font-semibold">useValidatedState 示例</div>
      <input
        className={`border px-2 py-1 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 w-64 ${
          !validation.valid ? "border-red-500" : ""
        }`}
        type="password"
        placeholder="请输入密码（大于3位）"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <div className="mt-2 text-sm">
        {validation.valid ? (
          <span className="text-green-600">密码合法</span>
        ) : (
          <span className="text-red-500">密码太短</span>
        )}
      </div>
    </div>
  );
}

useEvent —— 事件回调

import { useState, useRef } from "react";
import useEvent from "beautiful-react-hooks/useEvent";

export default function BeautifulHooks() {
  const targetRef = useRef();
  const [clicksNo, setClicksNo] = useState(0);
  const onTargetClick = useEvent(targetRef, "click");

  onTargetClick(() => {
    setClicksNo((c) => c + 1);
  });

  return (
    <div className="container p-4">
      <div className="mb-2 font-semibold">useEvent 示例</div>
      <div
        ref={targetRef}
        className="p-4 border rounded cursor-pointer select-none hover:bg-blue-50 text-gray-800"
      >
        点击此文本增加计数：{clicksNo}
      </div>
    </div>
  );
}

useGlobalEvent —— 全局事件监听

import { useState } from "react";
import useGlobalEvent from "beautiful-react-hooks/useGlobalEvent";

export default function BeautifulHooks() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  const onWindowResize = useGlobalEvent("resize");

  onWindowResize(() => {
    setWindowWidth(window.innerWidth);
  });

  return (
    <div className="container p-4">
      <div className="mb-2 font-semibold">useGlobalEvent 示例</div>
      <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded text-blue-800">
        调整浏览器窗口大小以更新状态
      </div>
      <div className="p-4 border rounded bg-gray-50 text-gray-800">
        window width:{" "}
        <span className="inline-block px-2 py-1 bg-green-100 text-green-700 rounded font-mono">
          {windowWidth}
        </span>
      </div>
    </div>
  );
}

useWindowResize —— 监听窗口尺寸变化

import useWindowResize from "beautiful-react-hooks/useWindowResize";
import { useState } from "react";

export default function BeautifulHooks() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  useWindowResize(() => {
    setSize({ width: window.innerWidth, height: window.innerHeight });
  });

  return (
    <div className="container p-4">
      <div className="mb-2 font-semibold">useWindowResize 示例</div>
      <div className="p-4 border rounded bg-gray-50 text-gray-800">
        当前窗口尺寸：
        <span className="font-mono">
          {size.width} x {size.height}
        </span>
      </div>
    </div>
  );
}

useDebouncedCallback —— 防抖回调

import useDebouncedCallback from "beautiful-react-hooks/useDebouncedCallback";
import { useState } from "react";

export default function BeautifulHooks() {
  const [value, setValue] = useState("");
  const [debouncedValue, setDebouncedValue] = useState("");
  const debounced = useDebouncedCallback((val) => {
    setDebouncedValue(val);
  }, 800);

  const handleChange = (e) => {
    setValue(e.target.value);
    debounced(e.target.value);
  };

  return (
    <div className="container p-4">
      <div className="mb-2 font-semibold">useDebouncedCallback 示例</div>
      <input
        className="border px-2 py-1 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 w-64"
        type="text"
        placeholder="输入内容，800ms后触发防抖"
        value={value}
        onChange={handleChange}
      />
      <div className="mt-2 text-gray-700 text-sm">
        最后一次防抖触发内容：
        <span className="font-mono">{debouncedValue}</span>
      </div>
    </div>
  );
}

useThrottledCallback —— 节流回调

import useThrottledCallback from "beautiful-react-hooks/useThrottledCallback";
import { useState } from "react";

export default function BeautifulHooks() {
  const [value, setValue] = useState("");
  const [throttledValue, setThrottledValue] = useState("");
  const throttled = useThrottledCallback((val) => {
    setThrottledValue(val);
  }, 800);

  const handleChange = (e) => {
    setValue(e.target.value);
    throttled(e.target.value);
  };

  return (
    <div className="container p-4">
      <div className="mb-2 font-semibold">useThrottledCallback 示例</div>
      <input
        className="border px-2 py-1 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 w-64"
        type="text"
        placeholder="输入内容，800ms节流触发"
        value={value}
        onChange={handleChange}
      />
      <div className="mt-2 text-gray-700 text-sm">
        最后一次节流触发内容：
        <span className="font-mono">{throttledValue}</span>
      </div>
    </div>
  );
}

useDidMount —— 组件挂载时执行

import useDidMount from "beautiful-react-hooks/useDidMount";
import { useState } from "react";

export default function BeautifulHooks() {
  const [mounted, setMounted] = useState(false);
  useDidMount(() => {
    setMounted(true);
  });

  return (
    <div className="container p-4">
      <div className="mb-2 font-semibold">useDidMount 示例</div>
      {mounted && (
        <div className="p-4 border rounded bg-green-50 text-green-800">
          组件已挂载！
        </div>
      )}
    </div>
  );
}

useWillUnmount —— 组件卸载时执行

import useWillUnmount from "beautiful-react-hooks/useWillUnmount";
import { useState } from "react";

export default function BeautifulHooks() {
  const [show, setShow] = useState(true);
  useWillUnmount(() => {
    alert("组件已卸载！");
  });

  return (
    <div className="container p-4">
      <div className="mb-2 font-semibold">useWillUnmount 示例</div>
      <button
        className="px-4 py-2 rounded bg-blue-500 hover:bg-blue-600 text-white font-medium mb-4"
        onClick={() => setShow(false)}
      >
        卸载组件
      </button>
      {show && <UnmountDemo />}
    </div>
  );
}

function UnmountDemo() {
  useWillUnmount(() => {
    alert("子组件已卸载！");
  });
  return (
    <div className="p-4 border rounded bg-green-50 text-green-800">
      子组件挂载中，点击上方按钮卸载
    </div>
  );
}

useLocalStorage —— 本地存储状态

import useLocalStorage from "beautiful-react-hooks/useLocalStorage";

export default function BeautifulHooks() {
  const [count, setCount] = useLocalStorage("counter", 0);

  return (
    <div className="container p-4">
      <div className="mb-2 font-semibold">useLocalStorage 示例</div>
      <div className="flex items-center gap-4 mb-4">
        <button
          className="px-4 py-2 rounded bg-blue-500 hover:bg-blue-600 text-white font-medium"
          onClick={() => setCount((c) => c - 1)}
        >
          -
        </button>
        <span className="text-2xl font-mono">{count}</span>
        <button
          className="px-4 py-2 rounded bg-blue-500 hover:bg-blue-600 text-white font-medium"
          onClick={() => setCount((c) => c + 1)}
        >
          +
        </button>
      </div>
      <div className="text-gray-500 text-sm">
        计数值会自动保存在 localStorage
      </div>
    </div>
  );
}

useOnlineState —— 网络状态检测

import useOnlineState from "beautiful-react-hooks/useOnlineState";

export default function BeautifulHooks() {
  const online = useOnlineState();

  return (
    <div className="container p-4">
      <div className="mb-2 font-semibold">useOnlineState 示例</div>
      <div
        className={`p-4 border rounded text-lg font-mono ${
          online
            ? "bg-green-50 text-green-700 border-green-200"
            : "bg-red-50 text-red-700 border-red-200"
        }`}
      >
        {online ? "当前在线" : "当前离线"}
      </div>
    </div>
  );
}

useDarkMode —— 深色模式切换

import useDarkMode from "beautiful-react-hooks/useDarkMode";

export default function BeautifulHooks() {
  const { toggle, enable, disable, isDarkMode } = useDarkMode();

  return (
    <div
      className={`container p-4 min-h-screen transition-colors duration-300 ${
        isDarkMode ? "bg-gray-900 text-white" : "bg-white text-gray-900"
      }`}
    >
      <div className="mb-2 font-semibold">useDarkMode 示例</div>
      <div className="flex gap-2 mb-4">
        <button
          className="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700 text-white font-medium"
          onClick={enable}
        >
          启用暗黑模式
        </button>
        <button
          className="px-4 py-2 rounded bg-gray-300 hover:bg-gray-400 text-gray-900 font-medium"
          onClick={disable}
        >
          关闭暗黑模式
        </button>
        <button
          className="px-4 py-2 rounded bg-indigo-500 hover:bg-indigo-600 text-white font-medium"
          onClick={toggle}
        >
          切换模式
        </button>
      </div>
      <div className="mb-2">点击按钮切换 isDarkMode 状态</div>
      <div
        className="p-4 border rounded bg-opacity-60"
        style={{ background: isDarkMode ? "#222" : "#f9fafb" }}
      >
        isDarkMode:{" "}
        <span
          className={`inline-block px-2 py-1 rounded font-mono ${
            isDarkMode ? "bg-green-700 text-white" : "bg-gray-200 text-gray-900"
          }`}
        >
          {isDarkMode ? "true" : "false"}
        </span>
      </div>
    </div>
  );
}

常用 Hook 速查表

总结

beautiful-react-hooks 提供了丰富且实用的自定义 Hook，极大简化了 React 组件的开发。建议结合官方文档和 Playground 进行实践体验，快速掌握每个 Hook 的用法。

 beautiful-react-hooks库——入门实践常用hook详解 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯