React 中的自訂 Hook

自訂 Hook 是一個(gè) JavaScript 函數(shù)，可讓您在 React 應(yīng)用程式中的多個(gè)元件之間重複使用有狀態(tài)邏輯。自訂鉤子是一個(gè)強(qiáng)大的工具，用於封裝可在元件之間共享的邏輯，保持元件清潔並提高程式碼可重複使用性。

自訂鉤子以 use 為前綴，遵循 React 的約定，並且可以在其中使用其他鉤子（例如 useState、useEffect、useContext 等）。

---

為什麼要使用自訂 Hook？

自訂掛鉤有幾個(gè)好處：

1. 程式碼可重複使用性：它們?cè)试S您從元件中提取可重複使用的邏輯。如果您有需要在多個(gè)元件之間共用的邏輯，您可以將其提取到自訂掛鉤中。
2. 關(guān)注點(diǎn)分離：透過(guò)將複雜的邏輯從元件中移出，自訂掛鉤可以幫助元件更專注於渲染 UI，從而提高可讀性和可維護(hù)性。
3. 抽象：它們提供了一種抽象複雜邏輯的方法，使您的元件更清晰、更易於理解。

---

如何建立自訂掛鉤

要建立自訂掛鉤，請(qǐng)依照下列步驟操作：

1. 寫一個(gè)函數(shù)：函數(shù)應(yīng)包含您要重複使用的邏輯。
2. 使用內(nèi)建鉤子：在函數(shù)內(nèi)部，您可以使用其他 React 鉤子，例如 useState、useEffect 或任何其他鉤子來(lái)管理狀態(tài)或副作用。
3. 傳回值：從要在元件中使用的自訂掛鉤傳回必要的狀態(tài)、函數(shù)或值。

---

自訂 Hook 的基本範(fàn)例

這是管理滑鼠位置的自訂掛鉤的簡(jiǎn)單範(fàn)例：

說(shuō)明：

• 自訂鉤子 useMousePosition 追蹤滑鼠在螢?zāi)簧系奈恢谩?
• 它使用 useState 來(lái)管理滑鼠座標(biāo)（x 和 y）的狀態(tài)。
• 它使用 useEffect 為 mousemove 事件添加事件監(jiān)聽(tīng)器，並在卸載元件或重新運(yùn)行效果時(shí)清理它。
• 鉤子返回滑鼠位置（x和y），任何匯入並呼叫useMousePosition的元件都可以使用該位置。

---

在元件中使用自訂 Hook

現(xiàn)在，您可以在任何元件中使用此自訂鉤子來(lái)存取滑鼠位置：

說(shuō)明：

• MouseTracker 元件使用 useMousePosition 自訂掛鉤來(lái)存取滑鼠位置。
• 每當(dāng)滑鼠移動(dòng)時(shí)，位置都會(huì)更新，並且元件會(huì)重新渲染以顯示新座標(biāo)。

---

進(jìn)階範(fàn)例：用於表單處理的自訂掛鉤

您可以為更複雜的邏輯建立自訂掛鉤，例如表單處理。

說(shuō)明：

• useFormInput 鉤子接受一個(gè)初始值並傳回輸入值和一個(gè)handleChange 函數(shù)。
• 該鉤子可以在任何表單元件中使用來(lái)管理表單輸入狀態(tài)。

---

在組件中使用 Form Hook

現(xiàn)在，您可以在表單元件中使用 useFormInput：

說(shuō)明：

• useFormInput 掛鉤用於處理姓名和電子郵件輸入的狀態(tài)和更改事件。
• handleSubmit 函數(shù)在提交表單時(shí)記錄表單值。

---

自訂 Hook 規(guī)則

自訂鉤子遵循與 React 鉤子相同的規(guī)則：

1. 僅在頂層呼叫鉤子：不要有條件或在循環(huán)內(nèi)呼叫鉤子。
2. 僅從 React 函數(shù)呼叫鉤子：自訂鉤子只能從 React 功能元件或其他自訂鉤子呼叫。
3. 以 use 開(kāi)頭：自訂掛鉤必須以 use 前綴開(kāi)頭，以區(qū)別於常規(guī) JavaScript 函數(shù)。

---

使用自訂 Hook 產(chǎn)生副作用

自訂掛鉤也可用於處理副作用，例如取得資料。

說(shuō)明：

• useFetchData 是一個(gè)從 API 取得資料的自訂鉤子。
• 它管理資料、isLoading 和錯(cuò)誤狀態(tài)。
• 該鉤子可在任何需要從 API 取得資料的元件中重複使用。

---

在元件中使用取得資料鉤子

以下是如何在元件中使用 useFetchData 掛鉤：

說(shuō)明：

• DataComponent 使用 useFetchData 自訂掛鉤從 API 取得資料。
• 元件根據(jù)自訂鉤子傳回的狀態(tài)處理載入、錯(cuò)誤和顯示所取得的資料。

---

自訂 Hook 總結(jié)

• 自訂鉤子允許您在React應(yīng)用程式中封裝和重複使用邏輯。
• 它們透過(guò)抽象複雜的邏輯來(lái)幫助保持組件的整潔。
• 自訂鉤子可以使用內(nèi)建鉤子，如 useState、useEffect 等，它們遵循與 React 鉤子相同的規(guī)則。
• 自訂掛鉤的常見(jiàn)用例包括管理表單輸入、取得資料、處理副作用等。

---

以上是React 中的自訂 Hook：跨元件重複使用邏輯的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！