ahoos的应用
Posted 前端More
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ahoos的应用相关的知识，希望对你有一定的参考价值。
文章目录
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(`Start Request: $params[0]`);
,
onSuccess: (result, params) =>
setState('');
message.success(`The username was changed to "$params[0]" !`);
,
onError: (error) =>
message.error(error.message);
,
onFinally: (params, result, error) =>
message.info(`Request finish`);
,
);
return (
<div>
<input
//输入框发生改变时,将状态state设置为e.target.value
onChange=(e) => setState(e.target.value)
//输入框的内容设置为state
value=state
placeholder="Please enter username"
style= width: 240, marginRight: 16
/>
//手动触发useRequest
<button disabled=loading type="button" onClick=() => run(state)>
loading ? 'Loading' : 'Edit'
</button>
</div>
);
;
API
const
//service是否正在执行
loading: boolean,
//service返回的数据
data?: TData,
//service抛出的异常
error?: Error,
//当次执行的service的参数数组。比如你触发了run(1, 2, 3)，则params等于[1, 2, 3]
params: TParams || [],
//手动触发service执行，参数会传递给service异常自动处理，通过onError反馈
run: (...params: TParams) => void,
//与run用法一致，但返回的是Promise，需要自行处理异常。
runAsync: (...params: TParams) => Promise<TData>,
//使用上一次的 params，重新调用 run
refresh: () => void,
//使用上一次的params，重新调用runAsync
refreshAsync: () => Promise<TData>,
//直接修改data
mutate: (data?: TData | ((oldData?: TData) => (TData | undefined))) => void,
//取消当前正在进行的请求
cancel: () => void,
= useRequest<TData, TParams>(
//第一个参数为异步函数
service: (...args: TParams) => Promise<TData>,
//第二个参数
//如果设置为 true，则需要手动调用 run 或 runAsync 触发执行。
manual?: boolean,
//首次默认执行时，传递给service的参数
defaultParams?: TParams,
//service执行前触发
onBefore?: (params: TParams) => void,
//service resolve时触发
onSuccess?: (data: TData, params: TParams) => void,
//service reject时触发
onError?: (e: Error, params: TParams) => void,
//service 执行完成时触发
onFinally?: (params: TParams, data?: TData, e?: Error) => void,
);
useRequest还有很多功能具体请参照官网
2.2 useAntdTable
useAntdTable： 基于 useRequest 实现，封装了 Ant Design UI组件库中Table(表格)与Form(表单)联动逻辑。
在使用之前，你需要了解它与 useRequest 的不同点：
-
service接收两个参数，第一个参数为分页数据current, pageSize, sorter, filters，第二个参数为表单数据。 -
service返回的数据结构为total: number, list: Item[]。 -
会额外返回
tableProps和search字段，管理表格和表单。 -
refreshDeps变化，会重置current到第一页，并重新发起请求。
Table 管理
useAntdTable 会自动管理 Table 分页数据，你只需要把返回的 tableProps 传递给 Table 组件就可以了
<Table columns=columns rowKey="email" ...tableProps />
Form 与 Table 联动
useAntdTable 接收 form 实例后，会返回 search 对象，用来处理表单相关事件。
search.type支持simple和advance两个表单切换search.changeType，切换表单类型search.submit提交表单行为search.reset重置当前表单
初始化数据
useAntdTable 通过 defaultParams 设置初始化值，defaultParams 是一个数组，第一项为分页相关参数，第二项为表单相关数据。如果有第二个值，我们会帮您初始化表单！
表单验证
表单提交之前，我们会调用 form.validateFields 来校验表单数据，如果验证不通过，则不会发起请求。
API
useRequest 所有参数和返回结果均适用于 useAntdTable，此处不再赘述。
type Data = total: number; list: any[] ;
type Params = [ current: number; pageSize: number, filter?: any, sorter?: any , [key: string]: any ];
//useAntdTable会返回tableProps和search字段，用于管理表格和表单
const
...,
//tableProp管理表格 Table组件需要的数据，直接透传给Table组件即可
tableProps:
//数据源
dataSource: any[];
//service是否在执行
loading: boolean;
//表格发生改变执行操作
onChange: (
pagination: any,
filters?: any,
sorter?: any,
) => void;
//分页数据
pagination:
//当前页
current: number;
//每页显示的数据
pageSize: number;
//总数据
total: number;
;
;
//search管理表单
search:
//当前表单类型
type: 'simple' | 'advance';
//切换表单类型
changeType: () => void;
//提交表单
submit: () => void;
//重置当前表单
reset: () => void;
;
= useAntdTable<TData extends Data, TParams extends Params>(
//异步函数
//service接收两个参数，第一个参数为分页数据 current, pageSize, sorter, filters ，第二个参数为表单数据。
//service 返回的数据结构为 total: number, list: Item[] 。
service: (...args: TParams) => Promise<TData>,
...,
//接受的第二个参数
//Form实例
form?: any;
//默认表单类型
defaultType?: 'simple' | 'advance';
//默认参数，第一项为分页数据，第二项为表单数据
// defaultParams: [
// current: 2, pageSize: 5 ,
// name: 'hello', email: 'abc@gmail.com', gender: 'female'
// ],
defaultParams?: TParams,
//默认分页数量
defaultPageSize?: numbe;
//refreshDeps 变化，会重置 current 到第一页，并重新发起请求。
refreshDeps?: any[];
);
2.3 useBoolean
useBoolean： 优雅的管理 boolean 状态的 Hook。
//state状态值和actions操作集合
//Actions toggle为切换state,set设置state,setTrue设置为true,setFals设置为false
const [ state, toggle, set, setTrue, setFalse ] = useBoolean(
//传入的参数可选项，传入默认的状态值
defaultValue?: boolean
);
以上是关于ahoos的应用的主要内容，如果未能解决你的问题，请参考以下文章