阿里 ahooks介绍（一）: ahooks简介

一、ahooks比umi hooks功能强大，所以不研究umi hooks，直接研究ahooks

   //  安装依赖：  

     npm i ahooks --save 或者tyan add ahooks 

  // 使用hooks

   import { useRequest }  from  'ahooks';

二、ahooks api开发规范

API 规范

这是 ahooks 的 API 规范文档。

返回值

1. 无输出

允许 Hooks 无输出，一般常见于生命周期类 Hooks。

useMount(()=>{});

2. value 型

Hooks 输出仅有一个值。

const documentVisibility = useDocumentVisibility();

3. value setValue 型

输出值为 value 和 setValue 类型的，结构为 [value, setValue] 。

const [state, setState] = useLocalStorageState(...)

4. value actions 型

输出值为单 value 与多 actions 类型的，结构为 [value, actions] 。

const [current, { inc, dec, set, reset }] = useCounter(...);

5. values 型

输出值为多 value 类型的，结构为 {...values} 

const {text, left, right, ...} = useTextSelection();

6. values actions 型

输出值为多 value 与多 actions 类型的，结构为 {...values, ...actions} 。

const {data, error, loading, run} = useRequest(...);

参数

原则上不允许超过两个参数。

1. 无参数

允许 Hooks 无参数。

const documentVisibility = useDocumentVisibility();

2. 单输入

单参数无论是否必填直接输入。

const size = useSize(dom);

3. 多必选参数

必选参数小于 2 个，应平级输入。

const ref = useKeyPress(keyFilter, eventHandler)

如果多于 2 个，应以 object 形式输入。

4. 多非必选参数

多非必选参数以 object 形式输入。

const result = useDrop({onText?, onFiles?, onURI?, onDOM?});

const result = useRequest(service, {

manual?,

initialData?,

onSuccess?,

});

5. 必选参数 + 非必选参数

必选参数在前，非必选参数在后。

const result = useTextSelection(items, defaultSelected?);

 

三、ahooks的各个hook简单介绍(这里只列出最常用ahooks)

（一）异步类 asyc hooks

       useRequest:  定义好了传参规则和返回值规定，常用于异步api的调用，例如用在添加/修改/删除，以及列表（带有分页，标题排序，过滤，查询条件等功能）。

（二）表格类 table hooks

        useAntdTable:

        useFunsionTable:

        useTable:

（三）界面类ui hooks

  useDrop: 拖拽，用于接收文件，文字和网址。

  useDrag: dom节点被拖拽，需要配合useDrop使用。

（四）SideEffect hooks 副作用类

   useDebounce:  处理防抖值，设置几秒后再更新。

  useDebounceFn:   处理防抖值, 用来控制按纽点击后才能几秒后才能执行。

  useInterval: 轮回定时器功能，间隔多秒后执行。

 useTimeout: 闹钟时钟功能，即在多少秒后执行。 

  (五）生命周期类 LifeCycle hooks

 useMount: 只能在mount时执行的hook,即首次渲染时才执行方法。

 useUnmount: 只在组件卸载时，执行方法。

  useUpate: 强调组件重新渲染的hook.

 useUpdateEffect: 依赖更新时才执行。

  (六）State Hooks

   useUrlState: 用于代替react自带的useState

    useBoolean: 切换布尔值

 

  useCookieState: state存储在cookide用法。

 useLocalStorageState: 状态持化到localStorage的用法。

 useSessionStorageState: state持化到sessionStorage的用法。

 

  useCountDown: 倒计时用法。

 useCounter: 计数用法

 useHistoryTravel: 撤销与重做的操作。

 

 useMap: 管理map类型状态的用法。 

 useSet: 管理set类型状态的用法。

 

 useNetwork: 判断网络状态的作用。

useWebSocket: 用于处理webSocket.

 

  useSetState: 管理object类型的state，和class的this.setState用法一样。

 useToggle: 在两个状态之间切换的用法。

 

 useWhyDidYouUpdate: 帮助开发者排查是什么改变导致了组件的 rerender。

 

 （七）Dom Hooks

 

  (八） Advanced Hooks