React 中的自訂 Hook：為什麼以及如何建立它們

React 已成為建立使用者介面最受歡迎的函式庫之一，這很大程度上歸功於其模組化方法和鉤子等強大功能。其中，自訂掛鉤作為一種使程式碼更乾淨、更可重複使用且更易於維護的方法脫穎而出。在本文中，我們將探討為什麼應該使用自訂掛鉤以及如何有效地建立它們。

---

為什麼要建立自訂 Hook？

自訂掛鉤可讓您以乾淨且模組化的方式封裝可重複使用邏輯。它們有助於簡化您的程式碼並提供多種優勢：

1. 程式碼可重複使用性：自訂掛鉤讓您可以編寫一次邏輯並在多個元件中重複使用它。這可以減少重複並使您的應用程式保持一致。

2. 更乾淨的元件：將邏輯移至自訂掛鉤中，您可以簡化元件，將它們集中在渲染 UI 而不是管理狀態或副作用。

3. 提高了可測試性：由於自訂鉤子是獨立的函數，因此您可以為它們編寫單元測試，而不依賴元件的 UI。

4. 關注點分離：自訂掛鉤透過將邏輯與表示分離來鼓勵更好的關注點分離。

---

如何建立自訂掛鉤

自訂鉤子是一個名稱以「use」開頭的 JavaScript 函數，可以呼叫其中的其他 React 鉤子（例如 useState、useEffect 等）。

建立自訂鉤子的步驟：

1. 辨識元件中的可重複使用邏輯。
2. 將邏輯移至新函數中。
3. 在函數名稱前加上「use」前綴（例如 useFetch）。
4. 在此函數內使用鉤子來管理狀態或副作用。
5. 從自訂鉤子傳回所需的狀態或函數。

---

範例：用於取得資料的自訂掛鉤

假設您需要從多個元件中的 API 取得資料。您可以建立一個自訂掛鉤來處理資料獲取，而不是在每個元件中重複邏輯。

執行：

import { useState, useEffect } from "react";

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

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error("Failed to fetch data");
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

如何使用自訂鉤子：

您現在可以在任何元件中使用 useFetch 來取得資料：

import React from "react";
import useFetch from "./useFetch";

function App() {
  const { data, loading, error } = useFetch("https://api.example.com/data");

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Data:</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}