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

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

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

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

來源:千鋒教育
發(fā)布人:syq
時(shí)間: 2022-09-22 13:15:47 1663823747

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

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

  調(diào)用異步函數(shù) 然后/捕獲在使用中影響()

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

  在以下示例中,我們調(diào)用異步方法以在示例閱讀應(yīng)用中提取和顯示存儲(chǔ)的書籍:fetchBooks()

1

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

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

  這不是一個(gè)好主意,如果你正在使用棉絨,它會(huì)立即通知你這一點(diǎn)。

2

  你的 linter 抱怨,因?yàn)?的第一個(gè)參數(shù)應(yīng)該是一個(gè)函數(shù),要么不返回任何內(nèi)容,要么返回一個(gè)函數(shù)來清理副作用。但函數(shù)總是返回(隱式或顯式),并且對(duì)象不能作為函數(shù)調(diào)用。這可能會(huì)導(dǎo)致 React 應(yīng)用中出現(xiàn)實(shí)際問題,例如內(nèi)存泄漏。useEffect() async Promise Promise

3

  在此示例中,由于回調(diào)函數(shù)為 ,因此它實(shí)際上并不返回定義的清理函數(shù),而是返回使用清理函數(shù)解析的對(duì)象。因此,永遠(yuǎn)不會(huì)調(diào)用此清理函數(shù),并且觀察者永遠(yuǎn)不會(huì)取消訂閱可觀察對(duì)象,從而導(dǎo)致內(nèi)存泄漏。async Promise

  那么我們?cè)撊绾谓鉀Q這個(gè)問題呢?我們?nèi)绾卧阢^子中使用帶有函數(shù)的運(yùn)算符?await async useEffect()

  異步/等待解決方案 1:調(diào)用 IIFE 中的異步函數(shù)

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

4

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

  異步/等待解決方案 2:在命名函數(shù)中調(diào)用異步函數(shù)

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

5

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

6

  異步/等待解決方案 3:創(chuàng)建自定義掛鉤

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

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

7

  我們將能夠從代碼中的多個(gè)位置調(diào)用它,如下所示:

8

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

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

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

9

  如果沒有 ,函數(shù)將在每次重新渲染時(shí)重新創(chuàng)建,從而不必要地觸發(fā)并導(dǎo)致性能問題。useCallback()getBooks() useEffect()

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
深度學(xué)習(xí)模型權(quán)重h5、weights、ckpt、pth有什么區(qū)別?

1.來源框架不同h5格式通常用于Keras和TensorFlow框架,weights用于Darknet框架,ckpt是TensorFlow框架的一種格式,而pth則主要用于PyTorch框架...詳情>>

2023-10-15 00:05:17
大數(shù)據(jù)測(cè)試工程師需要具備哪些技能?

一、理解大數(shù)據(jù)概念大數(shù)據(jù)測(cè)試工程師需要理解大數(shù)據(jù)的基本概念和原理,如分布式存儲(chǔ)、MapReduce、實(shí)時(shí)計(jì)算等。他們還需要了解如何處理大規(guī)模的...詳情>>

2023-10-14 23:43:03
為什么SpringBoot的 jar 可以直接運(yùn)行?

一、JAR文件的結(jié)構(gòu)與執(zhí)行方式Spring Boot的JAR包是Java Archive的縮寫,它是一種壓縮文件格式,可以將Java項(xiàng)目的類文件、資源文件以及依賴庫等...詳情>>

2023-10-14 23:01:49
站群服務(wù)器是什么?

站群服務(wù)器的含義與用途站群服務(wù)器主要用于支持站群,即由一組相互鏈接的網(wǎng)站組成的群體。這些網(wǎng)站通常由同一組織或個(gè)人擁有,并且經(jīng)常會(huì)互相鏈...詳情>>

2023-10-14 22:46:12
自編碼器是什么?

一、自編碼器原理自編碼器的設(shè)計(jì)靈感源于神經(jīng)科學(xué)中關(guān)于感知系統(tǒng)的認(rèn)知原理,它的核心思想是將輸入數(shù)據(jù)經(jīng)過編碼過程,形成一個(gè)隱藏層的特征表示...詳情>>

2023-10-14 22:41:10
快速通道