React 中的自訂 Hook
自訂 Hook 是一個 JavaScript 函數，可讓您在 React 應用程式中的多個元件之間重複使用有狀態邏輯。自訂鉤子是一個強大的工具，用於封裝可在元件之間共享的邏輯，保持元件清潔並提高程式碼可重複使用性。
自訂鉤子以 use 為前綴，遵循 React 的約定，並且可以在其中使用其他鉤子（例如 useState、useEffect、useContext 等）。
為什麼要使用自訂 Hook？
自訂掛鉤有幾個好處：
-
程式碼可重複使用性：它們允許您從元件中提取可重複使用的邏輯。如果您有需要在多個元件之間共用的邏輯，您可以將其提取到自訂掛鉤中。
-
關注點分離：透過將複雜的邏輯從元件中移出，自訂掛鉤可以幫助元件更專注於渲染 UI，從而提高可讀性和可維護性。
-
抽象：它們提供了一種抽象複雜邏輯的方法，使您的元件更清晰、更易於理解。
如何建立自訂掛鉤
要建立自訂掛鉤，請依照下列步驟操作：
-
寫一個函數：函數應包含您要重複使用的邏輯。
-
使用內建鉤子：在函數內部，您可以使用其他 React 鉤子，例如 useState、useEffect 或任何其他鉤子來管理狀態或副作用。
-
傳回值：從要在元件中使用的自訂掛鉤傳回必要的狀態、函數或值。
自訂 Hook 的基本範例
這是管理滑鼠位置的自訂掛鉤的簡單範例：
說明：
- 自訂鉤子 useMousePosition 追蹤滑鼠在螢幕上的位置。
- 它使用 useState 來管理滑鼠座標（x 和 y）的狀態。
- 它使用 useEffect 為 mousemove 事件添加事件監聽器，並在卸載元件或重新運行效果時清理它。
- 鉤子返回滑鼠位置（x和y），任何匯入並呼叫useMousePosition的元件都可以使用該位置。
在元件中使用自訂 Hook
現在，您可以在任何元件中使用此自訂鉤子來存取滑鼠位置：
說明：
- MouseTracker 元件使用 useMousePosition 自訂掛鉤來存取滑鼠位置。
- 每當滑鼠移動時，位置都會更新，並且元件會重新渲染以顯示新座標。
進階範例：用於表單處理的自訂掛鉤
您可以為更複雜的邏輯建立自訂掛鉤，例如表單處理。
說明：
- useFormInput 鉤子接受一個初始值並傳回輸入值和一個handleChange 函數。
- 該鉤子可以在任何表單元件中使用來管理表單輸入狀態。
在組件中使用 Form Hook
現在，您可以在表單元件中使用 useFormInput：
說明：
- useFormInput 掛鉤用於處理姓名和電子郵件輸入的狀態和更改事件。
- handleSubmit 函數在提交表單時記錄表單值。
自訂 Hook 規則
自訂鉤子遵循與 React 鉤子相同的規則：
-
僅在頂層呼叫鉤子：不要有條件或在循環內呼叫鉤子。
-
僅從 React 函數呼叫鉤子：自訂鉤子只能從 React 功能元件或其他自訂鉤子呼叫。
-
以 use 開頭：自訂掛鉤必須以 use 前綴開頭，以區別於常規 JavaScript 函數。
使用自訂 Hook 產生副作用
自訂掛鉤也可用於處理副作用，例如取得資料。
說明：
-
useFetchData 是一個從 API 取得資料的自訂鉤子。
- 它管理資料、isLoading 和錯誤狀態。
- 該鉤子可在任何需要從 API 取得資料的元件中重複使用。
在元件中使用取得資料鉤子
以下是如何在元件中使用 useFetchData 掛鉤：
說明：
- DataComponent 使用 useFetchData 自訂掛鉤從 API 取得資料。
- 元件根據自訂鉤子傳回的狀態處理載入、錯誤和顯示所取得的資料。
自訂 Hook 總結
-
自訂鉤子允許您在React應用程式中封裝和重複使用邏輯。
- 它們透過抽象複雜的邏輯來幫助保持組件的整潔。
- 自訂鉤子可以使用內建鉤子，如 useState、useEffect 等，它們遵循與 React 鉤子相同的規則。
- 自訂掛鉤的常見用例包括管理表單輸入、取得資料、處理副作用等。
以上是React 中的自訂 Hook：跨元件重複使用邏輯的詳細內容。更多資訊請關注PHP中文網其他相關文章！
