简体中文

useAsyncEffect

Tags:

Lifecycle

一个类似于 React.useEffect 的 React Hook，但支持可取消的异步函数。

注意

它不应该返回一个清理函数，因为它是 async 的，无法同步返回清理函数并按预期进行清理。

如果你需要清理一些东西，请在 UseAsyncEffectCallback 中使用 isCancelled() 来检查 Effect 的状态。

场景

异步数据请求场景： 实现页面加载时或依赖项更改时的异步数据请求
状态更新监控场景： 在依赖项状态更新后执行异步状态同步更新操作
资源清理及取消操作场景： 通过 isCancelled() 实现 Effect 结束时的异步操作取消和资源清理
...

演示

源码

Try to click the button multiple times quickly.

Data:

none

Fetching:

false

Ignored count:

用法

useAsyncEffect(async () => {}, [state])


useAsyncEffect(async (isCancelled) => {
  // do something async

  if(isCancelled()) return
  
  // do something when effect is not cancelled
}, [state])

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook 🎨 Demo 📄 Document

API

useAsyncEffect(asyncCallback, deps)

异步回调 AsyncCallback

一个 Effect 回调，支持异步函数，但不支持返回清理函数。

export type AsyncEffectCallback = (isCancelled: () => boolean) => void

export type UseAsyncEffectCallback = AsyncEffectCallback

依赖项 Deps

与 React.useEffect 相同。

ON THIS PAGE

#useAsyncEffect

#场景

#演示

Try to click the button multiple times quickly.

#用法

#源码

#API

#异步回调 AsyncCallback

#依赖项 Deps

useAsyncEffect

场景

演示

用法

源码

API

异步回调 AsyncCallback

依赖项 Deps