在 useEffect 回调中使用异步语法

1. 什么是 React 中的 useEffect()
2. 如何在 React 中的 useEffect 中使用 async 语法
3. 在 React 的 useEffect 中使用 async 语法的最佳解决方案

React 16.8 版的发布在很多方面改变了库。随着钩子的引入，功能组件获得了维护状态和处理副作用的能力。

useEffect() 是 React 中函数式组件的关键钩子之一，它是专门为处理副作用而创建的。这很容易弄清楚，但仍然有一些 React 开发人员应该知道的警告。

本文将探讨其中一个警告 - 如何在 useEffect() 中使用 async 语法。

什么是 React 中的 useEffect()

useEffect() 是一种解决方案，允许你处理功能组件中的副作用。如果你以前使用过类组件，你可以将其视为生命周期方法的替代品。

React 应用程序中的副作用应该仅限于 useEffect()。常见的例子包括计算时间或通过请求异步加载外部数据，这将我们带到了我们的主要话题。

如何在 React 中的 useEffect 中使用 async 语法

如果你尝试使用 async 函数作为 useEffect 回调，你将收到一条错误消息，指出该钩子不支持它。

那么，如果你需要将此语法用于数据加载或任何其他目的，你究竟能做什么？为什么 React 的创建者决定让 useEffect() 与 async 语法不兼容？

让我们从第二个问题开始。useEffect() 不支持 async 回调，因为这些函数通常需要清理。

需要小心处理副作用，错误处理钩子内的 async 函数可能导致内存泄漏或其他可能暴露你的应用程序的错误。这就是 React 背后的团队决定不允许这样做的原因。

至于第一个问题，幸运的是，有一个库可以让你将 async 函数放入 useEffect() 而不会出错。

在 React 的 useEffect 中使用 async 语法的最佳解决方案

如果你必须使用 async await 语法，最好的解决方案是使用 use-async-effect 包。这个包提供了一个稍微修改过的 useAsyncEffect() 钩子，它具有与 useEffect() 相同的功能，但允许你使用 async 语法。

这很容易学习。它甚至接受与常规 useEffect() 相同的参数。

要了解有关安装和其他详细信息的更多信息，请阅读官方文档。