如何在React使用影响()钩子中使用异步函数

　　在本文中，我们将介绍在 React 钩子中轻松调用函数的不同方法，以及在使用 / 时要避免的陷阱。async useEffect() async await

　　调用异步函数然后/捕获在使用中影响()

　　async函数在脚本中执行异步操作。要等待函数返回在 React useEffect() 钩子中得到解决(实现或拒绝)，我们可以使用它和方法：Promise async then() catch()

　　在以下示例中，我们调用异步方法以在示例阅读应用中提取和显示存储的书籍：fetchBooks()

　　异步/等待问题：异步回调无法传递到使用Effect()

　　也许您更愿意使用语法来代替。您可以尝试通过将回调传递给来执行此操作。async/await then/catch useEffect() async

　　这不是一个好主意，如果你正在使用棉绒，它会立即通知你这一点。

　　你的 linter 抱怨，因为的第一个参数应该是一个函数，要么不返回任何内容，要么返回一个函数来清理副作用。但函数总是返回(隐式或显式)，并且对象不能作为函数调用。这可能会导致 React 应用中出现实际问题，例如内存泄漏。useEffect() async Promise Promise

　　在此示例中，由于回调函数为，因此它实际上并不返回定义的清理函数，而是返回使用清理函数解析的对象。因此，永远不会调用此清理函数，并且观察者永远不会取消订阅可观察对象，从而导致内存泄漏。async Promise

　　那么我们该如何解决这个问题呢?我们如何在钩子中使用带有函数的运算符?await async useEffect()

　　异步/等待解决方案 1：调用 IIFE 中的异步函数

　　解决此问题的一种直接方法是立即调用的函数表达式 (IIFE) 中的函数：await async

　　顾名思义，IIFE是一个在定义后立即运行的函数。它们用于避免污染全局命名空间，以及在尝试调用可能导致包含 IIFE 的作用域(例如，在钩子中)出现问题的情况下。awaituseEffect()

　　异步/等待解决方案 2：在命名函数中调用异步函数

　　或者，您可以将函数放在命名函数中：await async

　　还记得使用可观察模式的示例吗?下面介绍如何使用命名函数来防止发生的内存泄漏：async

　　异步/等待解决方案 3：创建自定义挂钩

　　我们还可以创建一个自定义钩子，其行为类似于并且可以接受回调而不会引起任何问题。use Effect()async

　　自定义钩子可以这样定义：

　　我们将能够从代码中的多个位置调用它，如下所示：

　　通过这三种方法，我们现在可以轻松地将运算符与钩子中的函数一起使用。await async useEffect()

　　定义异步函数外部使用效果()

　　要在钩子外部定义一个命名函数，可以使用 useCallback() 钩子包装该函数：async useEffect()

　　如果没有，函数将在每次重新渲染时重新创建，从而不必要地触发并导致性能问题。useCallback()getBooks() useEffect()