React强大且灵活hooks库——ahooks入门实践之常用场景hook

什么是 ahooks？

ahooks 是一个 React Hooks 库，提供了大量实用的自定义 hooks，帮助开发者更高效地构建 React 应用。其中场景类 hooks 是 ahooks 的一个重要分类，专门针对特定业务场景提供解决方案。

安装 ahooks

npm install ahooks

常用场景类 hooks 详解

网络请求场景 – useRequest

useRequest是 ahooks 中最核心的 hooks 之一，用于处理异步请求。

import React from "react";
import { useRequest } from "ahooks";

const UserList = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch("/api/users");
      return response.json();
    },
    {
      manual: true, // 手动触发
      onSuccess: (result) => {
        console.log("请求成功:", result);
      },
      onError: (error) => {
        console.log("请求失败:", error);
      },
    }
  );

  return (
    <div>
      <button onClick={run} disabled={loading}>
        {loading ? "加载中..." : "获取用户列表"}
      </button>

      {error && <div>错误: {error.message}</div>}

      {data && (
        <ul>
          {data.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

高级特性

// 轮询请求
const { data } = useRequest(fetchUserData, {
  pollingInterval: 3000, // 每3秒轮询一次
  pollingWhenHidden: false, // 页面隐藏时停止轮询
});

// 防抖请求
const { data } = useRequest(searchUsers, {
  debounceWait: 500, // 500ms防抖
});

// 缓存请求
const { data } = useRequest(fetchUserData, {
  cacheKey: "userData",
  staleTime: 5 * 60 * 1000, // 5分钟内数据不重新请求
});

表单场景 – useAntdTable

useAntdTable用于处理表格与表单的联动场景。

import React from "react";
import { useAntdTable } from "ahooks";
import { Form, Input, Button, Table } from "antd";

const UserTable = () => {
  const [form] = Form.useForm();

  const { tableProps, search } = useAntdTable(
    async (params, form) => {
      const { current, pageSize } = params;

      const response = await fetch("/api/users", {
        method: "POST",
        body: JSON.stringify({
          page: current,
          size: pageSize,
          ...form,
        }),
      });
      const data = await response.json();
      return {
        list: data.list,
        total: data.total,
      };
    },
    {
      form,
      defaultPageSize: 10,
    }
  );

  return (
    <div className="container m-4">
      <Form form={form} layout="inline" className="mb-2">
        <Form.Item name="name" label="姓名">
          <Input placeholder="请输入姓名" />
        </Form.Item>
        <Form.Item name="email" label="邮箱">
          <Input placeholder="请输入邮箱" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={search.submit}>
            搜索
          </Button>
          <Button onClick={search.reset} style={{ marginLeft: 8 }}>
            重置
          </Button>
        </Form.Item>
      </Form>

      <Table
        {...tableProps}
        columns={[
          { title: "姓名", dataIndex: "name" },
          { title: "邮箱", dataIndex: "email" },
          { title: "创建时间", dataIndex: "createTime" },
        ]}
      />
    </div>
  );
};

状态管理场景 – useLocalStorageState

useLocalStorageState用于在 localStorage 中持久化状态。

import React from "react";
import { useLocalStorageState } from "ahooks";

const ThemeSwitcher = () => {
  const [theme, setTheme] = useLocalStorageState("theme", {
    defaultValue: "light",
    serializer: (value) => JSON.stringify(value),
    deserializer: (value) => JSON.parse(value),
  });

  return (
    <div>
      <p>当前主题: {theme}</p>
      <button onClick={() => setTheme("light")}>浅色主题</button>
      <button onClick={() => setTheme("dark")}>深色主题</button>
    </div>
  );
};

生命周期场景 – useMount & useUnmount

import React from "react";
import { useMount, useUnmount } from "ahooks";

const UserProfile = () => {
  useMount(() => {
    console.log("组件挂载，开始获取用户信息");
    // 初始化逻辑
  });

  useUnmount(() => {
    console.log("组件卸载，清理资源");
    // 清理逻辑
  });

  return <div>用户信息</div>;
};

事件处理场景 – useEventListener

import React, { useState } from "react";
import { useEventListener } from "ahooks";

const KeyboardListener = () => {
  const [key, setKey] = useState("");

  useEventListener("keydown", (event) => {
    setKey(event.key);
  });

  return (
    <div>
      <p>按下的键: {key}</p>
    </div>
  );
};

工具类场景 – useDebounce & useThrottle

import React, { useState } from "react";
import { useDebounce, useThrottle } from "ahooks";

const SearchComponent = () => {
  const [value, setValue] = useState("");
  const debouncedValue = useDebounce(value, 500);
  const throttledValue = useThrottle(value, 1000);

  return (
    <div>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="输入搜索内容"
      />
      <p>原始值: {value}</p>
      <p>防抖值: {debouncedValue}</p>
      <p>节流值: {throttledValue}</p>
    </div>
  );
};

媒体查询场景 – useResponsive

import React from "react";
import { useResponsive } from "ahooks";

const ResponsiveComponent = () => {
  const responsive = useResponsive();

  return (
    <div>
      <p>屏幕尺寸信息:</p>
      <ul>
        <li>xs: {responsive.xs ? "是" : "否"}</li>
        <li>sm: {responsive.sm ? "是" : "否"}</li>
        <li>md: {responsive.md ? "是" : "否"}</li>
        <li>lg: {responsive.lg ? "是" : "否"}</li>
        <li>xl: {responsive.xl ? "是" : "否"}</li>
      </ul>
    </div>
  );
};

滚动场景 – useScroll

import React from "react";
import { useScroll } from "ahooks";

const ScrollComponent = () => {
  const scroll = useScroll(document);

  return (
    <div style={{ height: "200vh" }}>
      <div style={{ position: "fixed", top: 0, left: 0 }}>
        <p>
          滚动位置: {scroll?.left || 0}, {scroll?.top || 0}
        </p>
        <p>滚动方向: {scroll?.direction || "none"}</p>
      </div>
    </div>
  );
};

总结

ahooks 的场景类 hooks 为 React 开发提供了强大的工具集，能够显著提升开发效率：

1. useRequest: 处理异步请求的完整解决方案
2. useFormTable: 表格与表单联动的便捷工具
3. useLocalStorageState: 状态持久化
4. useMount/useUnmount: 生命周期管理
5. useEventListener: 事件监听
6. useDebounce/useThrottle: 性能优化
7. useResponsive: 响应式设计
8. useScroll: 滚动处理

通过合理使用这些 hooks，可以大大简化 React 应用的开发复杂度，提高代码的可维护性和用户体验。

 React强大且灵活hooks库——ahooks入门实践之场景类hooks（scene） - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯