React 中的自訂鉤子是封裝可重複使用邏輯、管理狀態和處理副作用的絕佳方法，可保持程式碼整潔和可維護。以下是一些關鍵用例以及建立自訂掛鉤的意義：

1.跨元件重複使用邏輯

範例：從 API 取得資料。
您可以建立一個自訂掛鉤（例如 useFetch）來封裝獲取資料並處理載入、成功和錯誤狀態的邏輯。然後可以在多個元件中重複使用該邏輯。

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
};

export default useFetch;

2.管理複雜狀態邏輯

範例：管理表單狀態[​​&&&] 自訂掛鉤可用於以可重複使用的方式管理表單狀態和驗證邏輯。

從 'react' 導入 { useState }; const useForm = (初始狀態) => { const [值，setValues] = useState(initialState); const handleChange = (事件) => { const { 名稱，值 } = event.target; 設定值（{ ……價值觀， [名稱]：值， }); }; 常數重設表單 = () => { setValues(初始狀態); }; 傳回[值，handleChange，resetForm]； }; 導出預設的useForm；

import { useState } from 'react';

const useForm = (initialState) => {
  const [values, setValues] = useState(initialState);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const resetForm = () => {
    setValues(initialState);
  };

  return [values, handleChange, resetForm];
};

export default useForm;

3.抽象副作用

範例：與本地儲存同步。 您可以建立自訂掛鉤來管理與本機儲存同步的狀態。

從 'react' 導入 { useState, useEffect }; const useLocalStorage = (key, 初始值) => { const [值，setValue] = useState(() => { const storeValue = localStorage.getItem(key); 傳回儲存值？ JSON.parse(storedValue) : 初始值; }); 使用效果（（）=> { localStorage.setItem(key, JSON.stringify(value)); }， [核心價值]）; 返回[值，設定值]； }; 導出預設useLocalStorage；

import { useState, useEffect } from 'react';

const useLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

export default useLocalStorage;

---

自訂 Hook 的意義

1.代碼可重複使用性 自訂掛鉤可讓您在多個元件之間重複使用邏輯，而無需重複程式碼，從而促進 DRY（不要重複自己）原則。

2.關注點分離 透過將邏輯從元件移出並放入鉤子中，您可以使元件程式碼更清晰並更專注於渲染，而自訂鉤子則處理邏輯。

3.可測試性 自訂掛鉤可以獨立於使用它們的元件進行測試，從而更容易為複雜邏輯編寫單元測試。

3.一致性 使用自訂掛鉤可確保應用程式不同部分的行為一致，因為在呼叫掛鉤的任何地方都使用相同的邏輯。

結論 React 中的自訂鉤子是創建可重複使用、可維護和可測試程式碼的強大工具。它們可協助您封裝複雜的邏輯，有效管理狀態和副作用，並促進關注點分離和程式碼可重複使用性等最佳實踐。透過利用自訂掛鉤，您可以保持元件乾淨並專注於其主要目的：渲染 UI。