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

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

　　僅在頂層調(diào)用鉤子

　　僅從 React 函數(shù)調(diào)用鉤子

　　 第一點與 React Hook 的實現(xiàn)原理有關(guān)。當(dāng)函數(shù)組件第一次執(zhí)行時，react分配一個對象，當(dāng)一個接一個地調(diào)用鉤子時，獲得的結(jié)果依次放入有序表中，然后存儲在對象中。

　　對于后續(xù)的執(zhí)行，這些鉤子的執(zhí)行順序必須相同，以便比較依賴關(guān)系并與先前渲染的狀態(tài)進(jìn)行比較。

　　如果鉤子出現(xiàn)在循環(huán)、條件或嵌套函數(shù)中...不能保證鉤子的執(zhí)行順序不會保持不變。

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

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

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

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

　　最終結(jié)果

　　這兩個組件都在 App.js內(nèi)：

　　隨機(jī)極譜和搜索磁共振組件

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

　　現(xiàn)在，從隨機(jī)Gif組件開始，*下面的API_KEY存儲在.env文件中。

　　搜索模塊組件：

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

　　創(chuàng)建這樣的組件很簡單，但是如果我們有更多的組件，我們在其中進(jìn)行相同的API調(diào)用但具有不同的參數(shù)，我們不想復(fù)制相同的代碼并將其粘貼到每個組件中，對吧?

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

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

　　讓我們?yōu)樯厦娴倪@個例子創(chuàng)建一個自定義的鉤子，我將它命名為useFetch

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

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

　　返回值 { img } 是初始化為 null 的 img 狀態(tài)，將在組件內(nèi)導(dǎo)入和使用

　　函數(shù) fetchImg 將被導(dǎo)入并在組件內(nèi)部使用

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

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

　　上面的代碼解釋道：

　　我們導(dǎo)入我們的定制鉤子

　　使用從我們的自定義鉤子返回的狀態(tài)和獲取函數(shù)

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

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