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

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

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

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

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

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

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

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

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

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

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

　　最終結(jié)果

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

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

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

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

　　搜索模塊組件：

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

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

　　一個(gè)好的解決方案是自定義一個(gè) Hook 來(lái)封裝組件之間并共享相同的邏輯，如 React Hooks 簡(jiǎn)介所示：

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

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

　　在上面的代碼中，我們創(chuàng)建了一個(gè)名為包含函數(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 庫(kù) Hook 是合法的，因此我們?cè)谶@里使用了 useState 鉤子，它在兩個(gè)組件中完全相同。

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

　　上面的代碼解釋道：

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

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

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

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