在 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() 相同的引數。

要了解有關安裝和其他詳細資訊的更多資訊，請閱讀官方文件。