如何将useEffect支持async和await的使用方式改写成长尾？

本文共计1854个文字，预计阅读时间需要8分钟。

目录+引言+背景+React+为什么要这么做？+useEffect+如何支持+async...await...+自定义hooks+还可以支持useEffect的清除机制吗？+总结与思考+引言+本文是深入浅出ahooks源码系列文章的第六篇，将探讨React的useEffect的使用和优化。

目录

• 引言
• 背景
• React 为什么要这么做？
• useEffect 怎么支持 async...await...
• 自定义 hooks
• 还可以支持 useEffect 的清除机制么？
• 总结与思考

引言

本文是深入浅出 ahooks 源码系列文章的第六篇，这个系列的目标主要有以下几点：

• 加深对 React hooks 的理解。
• 学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。
• 培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。

注：本系列对 ahooks 的源码解析是基于 v3.3.13。自己 folk 了一份源码，主要是对源码做了一些解读，可见 详情。

背景

大家在使用 useEffect 的时候，假如回调函数中使用 async...await... 的时候，会报错如下。