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

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

　　僅在頂層調用鉤子

　　僅從 React 函數調用鉤子

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

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

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

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

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

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

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

　　最終結果

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

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

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

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

　　搜索模塊組件：

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

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

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

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

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

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

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

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

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

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

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

　　上面的代碼解釋道：

　　我們導入我們的定制鉤子

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

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

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