React 中的自訂 Hook：跨元件重複使用邏輯

React 中的自訂 Hook

自訂 Hook 是一個 JavaScript 函數，可讓您在 React 應用程式中的多個元件之間重複使用有狀態邏輯。自訂鉤子是一個強大的工具，用於封裝可在元件之間共享的邏輯，保持元件清潔並提高程式碼可重複使用性。

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

---

為什麼要使用自訂 Hook？

自訂掛鉤有幾個好處：

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

---

如何建立自訂掛鉤

要建立自訂掛鉤，請依照下列步驟操作：

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

---

自訂 Hook 的基本範例

這是管理滑鼠位置的自訂掛鉤的簡單範例：

說明：

• 自訂鉤子 useMousePosition 追蹤滑鼠在螢幕上的位置。
• 它使用 useState 來管理滑鼠座標（x 和 y）的狀態。
• 它使用 useEffect 為 mousemove 事件添加事件監聽器，並在卸載元件或重新運行效果時清理它。
• 鉤子返回滑鼠位置（x和y），任何匯入並呼叫useMousePosition的元件都可以使用該位置。

---

在元件中使用自訂 Hook

現在，您可以在任何元件中使用此自訂鉤子來存取滑鼠位置：

說明：

• MouseTracker 元件使用 useMousePosition 自訂掛鉤來存取滑鼠位置。
• 每當滑鼠移動時，位置都會更新，並且元件會重新渲染以顯示新座標。

---

進階範例：用於表單處理的自訂掛鉤

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

說明：

• useFormInput 鉤子接受一個初始值並傳回輸入值和一個handleChange 函數。
• 該鉤子可以在任何表單元件中使用來管理表單輸入狀態。

---

在組件中使用 Form Hook

現在，您可以在表單元件中使用 useFormInput：

說明：

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

---

自訂 Hook 規則

自訂鉤子遵循與 React 鉤子相同的規則：

1. 僅在頂層呼叫鉤子：不要有條件或在循環內呼叫鉤子。
2. 僅從 React 函數呼叫鉤子：自訂鉤子只能從 React 功能元件或其他自訂鉤子呼叫。
3. 以 use 開頭：自訂掛鉤必須以 use 前綴開頭，以區別於常規 JavaScript 函數。

---

使用自訂 Hook 產生副作用

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

說明：

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

---

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

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

說明：

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

---

自訂 Hook 總結

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

---

以上是React 中的自訂 Hook：跨元件重複使用邏輯的詳細內容。更多資訊請關注PHP中文網其他相關文章！