ahooks3x

提供了常用的 Hooks，极大降低代码复杂度，提升开发效率。

• 蚂蚁 umi 团队、淘系 ice 团队以及阿里体育团队共建的开源库
• useRequest 成为 umi3 内置请求方案

中文文档 https://ahooks-next.surge.sh/zh-CN
https://www.yuque.com/abu0418/krqszr/usis1r

yarn add ahooks@next
import { useRequest } from 'ahooks';

ahooks介绍 https://zhuanlan.zhihu.com/p/149860703
https://zhuanlan.zhihu.com/p/103150605

hooks原理

https://github.com/brickspert/blog/issues/26

ahooks对比 react-use

• Render Props 把逻辑抽出来复用，自己来定义UI
• react-use 中的 Hooks 粒度比较小，类似于工具库的封装，没有实现组件的逻辑复用
• ahooks实现了组件和UI逻辑的复用

hooks缺点

1. hooks用不好，会导致各种奇怪的闭包问题
2. 如果碰到想不明白的问题，那 99% 是由于闭包导致的，有很确定的方向去排查问题。
   1. hook产生的闭包问题具体会出现在什么地方，该怎么预防或解决？

useRequest

• 自动请求/手动请求
• 轮询发送请求，并发请求
• 防抖，竞态处理 & 时序控制
• 节流
• 屏幕聚焦重新请求
• 错误重试
• 请求超时管理
• loading delay
• SWR(stale-while-revalidate)
• 缓存 & 预加载
• 加载更多，数据恢复，滚动位置恢复？

useRequest https://zhuanlan.zhihu.com/p/106796295
useRequest 接收了一个 Promise 函数

import { useRequest } from '@umijs/hooks';
function getUsername() {
  return Promise.resolve('jack');
}
export default () => {
  const { data, error, loading } = useRequest(getUsername)
  if (error) return <div>failed to load</div>
  if (loading) return <div>loading...</div>
  return <div>Username: {data}</div>
}

手动请求

对于“写”请求，我们一般需要手动触发
场景：添加用户，编辑信息，删除用户等

• 配置 manual = true，即可阻止初始化执行
• 只有触发 run 时才会开始执行。
• 防抖，无论调用了多少次 run ，只会在输入停止后，发送一次请求 ```jsx import { useRequest } from ‘@umijs/hooks’;

export default () => { const { run, loading } = useRequest(changeUsername, {manual: true})

return ( run(‘new name’)} loading={loading}> Edit ) }

<a name="EeeLZ"></a>
### 第一个参数不是 Promise
```jsx
// 用法 1
const { data, error, loading } = useRequest('/api/userInfo');
// 用法 2
const { data, error, loading } = useRequest({
  url: '/api/changeUsername',
  method: 'post',
});
// 用法 3
const { data, error, loading, run } = useRequest((userId)=> `/api/userInfo/${userId}`);
// 用法 4
const { loading, run } = useRequest((username) => ({
  url: '/api/changeUsername',
  method: 'post',
  data: { username },
}));

useAntdTable

一行代码封装所有逻辑，列表页开发变得如此简单

1. page，pageSize管理
2. page，pageSize 变化时重新进行异步请求
3. 筛选条件变化时，重置 page，并重新请求数据
4. 异步请求的 loading 处理
5. 异步请求的竞态处理
6. 组件卸载时丢弃进行中的异步请求（很多人通常不处理，在某些情况会报警告

   const { tableProps } = useAntdTable(asyncFn);
   const columns = [];
   return (
   <Table columns={columns} rowKey="id" {...tableProps} />
   )

usePagination 分页请求

useLoadMore 加载更多

useSearch 请求自带防抖

异步搜索场景，一般要处理：

1. 防抖
2. 异步请求的 loading 处理
3. 异步请求的请求时序控制
4. 组件卸载时取消防抖及异步请求等逻辑 ```jsx const { data, loading, onChange } = useSearch(asyncFn);

{data.map((item)=>)} ```

useDynamicList