【React】React全家桶（十一）ahooks

原创

已于 2022-10-12 14:52:50 修改 · 1.5w 阅读

55 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端

于 2022-06-09 17:36:30 首次发布

本文介绍了ahooks，一个强大的React Hooks库，它提供了useRequest进行高效异步数据管理，useAntdTable整合Ant Design UI与表单，useBoolean简化布尔状态管理，useMemoizedFn确保回调函数持久化。文章还展示了如何在实际项目中使用这些hook及其API细节。

文章目录

1 ahooks简介

1.1 什么是ahooks？

ahooks 一套高质量可靠的 React Hooks 库
React 虽然提供基础的 hooks 函数，但在实际场景中，我们需要在基础函数上再封装 , ahooks 就满足了这个需求, 它的功能非常强大，拥有的 hooks 已经 60+ 。
ahooks官方文档

1.2 ahooks的特点

易学易用
支持 SSR（服务器端渲染）
- React Hooks 在 SSR 场景下，普遍会碰到“DOM/BOM 缺失”、“useLayoutEffect 警告”两个问题。ahooks v3.0 彻底解决了这两个问题，你可以安心的将 ahooks 使用到 SSR 场景了。
对输入输出函数做了特殊处理，避免闭包问题
- 所有用户输入的函数，永远使用最新的一份( 通过useRef 进行实现 )
- ahooks 所有的输出函数，引用地址都是不会变化的( 通过useMemoizedFn（ahooks 封装的）实现的，其实现也是通过 useRef实现 )
包含大量提炼自业务的高级 Hooks
包含丰富的基础 Hooks
使用 TypeScript 构建，提供完整的类型定义文件

1.3 ahooks如何使用？

 //引入
 npm install --save ahooks
 或 yarn add ahooks
 //使用
 import {
   
    useRequest } from 'ahooks'

2 ahooks API

2.1 useRequest

useRequest 是一个强大的异步数据管理的 Hooks，React 项目中的网络请求场景使用 useRequest就够了

useRequest 通过插件式组织代码，核心代码极其简单，并且可以很方便的扩展出更高级的功能。目前已有能力包括：

自动请求/手动请求
轮询
防抖
节流
屏幕聚焦重新请求
错误重试
loading delay
SWR(stale-while-revalidate)
缓存

useRequest 的第一个参数是一个异步函数，在组件初次加载时，会自动触发该函数执行。同时自动管理该异步函数的 loading , data , error 等状态。

useRequest 的第二个参数可以为 options.manual = true ，若设置了这个参数,则 useRequest不会默认触发,需要通过run触发

data：service返回的数据

error：service抛出的异常

loading：service是否在执行

run：手动触发useRequest执行，参数会传递给service

params ：当次执行的 service 的参数数组。比如你触发了 run(1, 2, 3，则 params 等于 [1, 2, 3]

//第一个参数service是异步函数
const {
   
     data, error, loading,run } = useRequest(service, {
   
   
  manual: true//若设置了这个参数,则不会默认触发,需要通过run触发
  defaulParams:[]//首次默认执行时，传递给 service 的参数
});

useRequest 提供了以下几个生命周期配置项，供你在异步函数的不同阶段做一些处理。

onBefore：请求之前触发
onSuccess：请求成功触发
onError：请求失败触发
onFinally：请求完成触发

案例

//按需引入antd组件库
import {
   
    message } from 'antd';
import React, {
   
    useState } from 'react';
import {
   
    useRequest } from 'ahooks';

//异步函数
function editUsername(username: string): Promise<void> {
   
   
  return new Promise((resolve, reject) => {
   
   
    setTimeout(() => {
   
   
      if (Math.random() > 0.5) {
   
   
        resolve();
      } else {
   
   
        reject(new Error('Failed to modify username'));
      }
    }, 1000);
  });
}

export default () => {
   
   
    //添加输入框的内容状态
  const [state, setState] = useState('');

  const {
   
    loading, run } = useRequest(editUsername, {
   
   
      //手动触发
    manual: true,
      //四个声明周期函数
    onBefore: (params) => {
   
   
      message.info(`