国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 如何在React使用影響()鉤子中使用異步函數

如何在React使用影響()鉤子中使用異步函數

來源:千鋒教育
發布人:syq
時間: 2022-09-22 13:15:47 1663823747

  在本文中,我們將介紹在 React 鉤子中輕松調用函數的不同方法,以及在使用 / 時要避免的陷阱。async useEffect() async await

在React使用影響()鉤子中使用異步函數

  調用異步函數 然后/捕獲在使用中影響()

  async函數在腳本中執行異步操作。要等待函數返回在 React useEffect() 鉤子中得到解決(實現或拒絕),我們可以使用它和方法:Promise async then() catch()

  在以下示例中,我們調用異步方法以在示例閱讀應用中提取和顯示存儲的書籍:fetchBooks()

1

  異步/等待問題: 異步回調無法傳遞到使用Effect()

  也許您更愿意使用 語法來代替 。您可以嘗試通過將回調傳遞給 來執行此操作。async/await then/catch useEffect() async

  這不是一個好主意,如果你正在使用棉絨,它會立即通知你這一點。

2

  你的 linter 抱怨,因為 的第一個參數應該是一個函數,要么不返回任何內容,要么返回一個函數來清理副作用。但函數總是返回(隱式或顯式),并且對象不能作為函數調用。這可能會導致 React 應用中出現實際問題,例如內存泄漏。useEffect() async Promise Promise

3

  在此示例中,由于回調函數為 ,因此它實際上并不返回定義的清理函數,而是返回使用清理函數解析的對象。因此,永遠不會調用此清理函數,并且觀察者永遠不會取消訂閱可觀察對象,從而導致內存泄漏。async Promise

  那么我們該如何解決這個問題呢?我們如何在鉤子中使用帶有函數的運算符?await async useEffect()

  異步/等待解決方案 1:調用 IIFE 中的異步函數

  解決此問題的一種直接方法是立即調用的函數表達式 (IIFE) 中的函數:await async

4

  顧名思義,IIFE是一個在定義后立即運行的函數。它們用于避免污染全局命名空間,以及在嘗試調用可能導致包含 IIFE 的作用域(例如,在鉤子中)出現問題的情況下。awaituseEffect()

  異步/等待解決方案 2:在命名函數中調用異步函數

  或者,您可以將函數放在命名函數中:await async

5

  還記得使用可觀察模式的示例嗎?下面介紹如何使用命名函數來防止發生的內存泄漏:async

6

  異步/等待解決方案 3:創建自定義掛鉤

  我們還可以創建一個自定義鉤子,其行為類似于并且可以接受回調而不會引起任何問題。use Effect()async

  自定義鉤子可以這樣定義:

7

  我們將能夠從代碼中的多個位置調用它,如下所示:

8

  通過這三種方法,我們現在可以輕松地將運算符與鉤子中的函數一起使用。await async useEffect()

  定義異步函數外部使用效果()

  要在鉤子外部定義一個命名函數,可以使用 useCallback() 鉤子包裝該函數:async useEffect()

9

  如果沒有 ,函數將在每次重新渲染時重新創建,從而不必要地觸發并導致性能問題。useCallback()getBooks() useEffect()

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT