<progress id="2772j"><code id="2772j"><tt id="2772j"></tt></code></progress>

<optgroup id="2772j"><em id="2772j"><del id="2772j"></del></em></optgroup>

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

手機站
千鋒教育

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

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

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

【熱點話題】 零基礎學IT IT學習教程 IT學習筆記 IT技術干貨 IT培訓機構 IT應聘面試 IT職場就業
當前位置:首頁  >  關于學院  >  技術干貨  > 創建一個簡單的React自定義鉤子

創建一個簡單的React自定義鉤子

來源:千鋒教育
發布人:syq
時間: 2022-09-14 17:18:48 1663147128

  有關如何創建簡單的 React 自定義鉤子的教程。在編寫 React 函數式組件時,如果我們想重用組件的部分邏輯,我們可以考慮編寫自定義 Hooks。

React自定義鉤子

  首先,讓我們來看看 React 鉤子。鉤子只是 JavaScript 函數,但是在 React 中使用它們時,你需要遵循規則:

  僅在頂層調用鉤子

  僅從 React 函數調用鉤子

   第一點與 React Hook 的實現原理有關。當函數組件第一次執行時,react分配一個對象,當一個接一個地調用鉤子時,獲得的結果依次放入有序表中,然后存儲在對象中。

  對于后續的執行,這些鉤子的執行順序必須相同,以便比較依賴關系并與先前渲染的狀態進行比較。

  如果鉤子出現在循環、條件或嵌套函數中...不能保證鉤子的執行順序不會保持不變。

  第二點意味著你應該總是從 React 函數組件調用鉤子,而不是類組件或常規的 JavaScript 函數,但如果它是一個自定義 Hook,那么從中調用鉤子也是合法的。

  自定義鉤子是具有唯一命名約定的 JavaScript 函數,該約定要求以函數名稱開頭 ,并且能夠調用其他鉤子。use

  這聽起來很麻煩,我將嘗試用一個簡單的 React 示例來說明這一點。在下面的代碼示例中,我們將在組件內獲取并顯示圖像/ gif。

  首先,讓我們看一下這個簡單應用程序應該是什么樣子的最終結果,我們有兩個組件彼此疊加,頂部名為 RandomGif,底部名為 SearchImg。

41

  最終結果

  這兩個組件都在 App.js內:

42

  隨機極譜和搜索磁共振組件

  組件名稱說明了一切,隨機GIF顯示隨機GIF,搜索Img為用戶提供了使用輸入字段值搜索圖像的可能性。 我們將使用兩個 API 端點(Giphy 和 Pixabay),訪問密鑰將在我們注冊時自動生成。

  現在,從隨機Gif組件開始,*下面的API_KEY存儲在.env文件中。

43

  搜索模塊組件:

44

  正如我們所看到的,RandomGif和ScerImg之間的邏輯基本上是相同的,唯一的區別是我們使用兩個不同的端點,在SearchImg組件中有一個輸入字段和一個onChange事件處理程序,它以輸入值為目標,并使用戶能夠通過值查詢來搜索圖像, 更容易解釋的是,在同一API調用邏輯中有不同的參數。

  創建這樣的組件很簡單,但是如果我們有更多的組件,我們在其中進行相同的API調用但具有不同的參數,我們不想復制相同的代碼并將其粘貼到每個組件中,對吧?

  一個好的解決方案是自定義一個 Hook 來封裝組件之間并共享相同的邏輯,如 React Hooks 簡介所示:

  自定義鉤子是一個 JavaScript 函數,其名稱以“use”開頭,可以調用其他鉤子。 (例如: useFetch )

  讓我們為上面的這個例子創建一個自定義的鉤子,我將它命名為useFetch

45

  在上面的代碼中,我們創建了一個名為包含函數的新文件,其中包含獲取數據所需的所有邏輯。邏輯是從組件中復制的( fetchGif / fetchImg ),我們只是刪除了硬編碼的URL,并將它們替換為可以傳遞給自定義 Hook 的變量。useFetch.jsuseFetchurl

  自定義 Hook 不需要有特定的簽名,我們可以決定它接受什么作為參數,以及它應該返回什么(如果有的話),在這種情況下:(url)和return [{ img }, fetchImg]

  返回值 { img } 是初始化為 null 的 img 狀態,將在組件內導入和使用

  函數 fetchImg 將被導入并在組件內部使用

  而且,正如鉤子介紹中所示,從自定義鉤子調用預定義的 React 庫 Hook 是合法的,因此我們在這里使用了 useState 鉤子,它在兩個組件中完全相同。

  現在我們可以更新這兩個組件并使用此自定義鉤子:

46

  上面的代碼解釋道:

  我們導入我們的定制鉤子

47

  使用從我們的自定義鉤子返回的狀態和獲取函數

48

  請注意,這里的 fetchImg 函數不用于更新“img”狀態,它是來自 useFetch 自定義鉤子的提取函數,可以在另一個函數中調用,在這種情況下,按鈕 onClick 事件為“const SearchImg = () = > fetchImg()”和“const getRandomGif = () = > fetchImg()”。

  到目前為止,應用程序中沒有任何更改,但現在我們可以在任何組件中重用此自定義鉤子,只要它們使用相同的邏輯,就可以從任何URL獲取數據。使用自定義鉤子,我們可以將組件邏輯提取到可重用的函數中。

聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。

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 剛剛成功領取

推薦閱讀

最新文章

開班信息
北京校區
  • 北京校區
  • 大連校區
  • 廣州校區
  • 成都校區
  • 杭州校區
  • 長沙校區
  • 合肥校區
  • 南京校區
  • 上海校區
  • 深圳校區
  • 武漢校區
  • 鄭州校區
  • 西安校區
  • 青島校區
  • 重慶校區
  • 太原校區
  • 沈陽校區

久久国产精品无码HDAV