使用自訂 Hook 提升您的 React 遊戲：有趣且實用的指南

嘿，React 愛好者們！如果你像我一樣，你會喜歡 React 如何讓建立使用者介面變得輕而易舉。但有時，我們發現自己在不同的元件中重複相同的邏輯。這就是自訂鉤子的用武之地——它們就像秘密的超能力，使我們的程式碼更乾淨、更有效率。讓我們深入了解自訂 Hook 的世界，看看它們如何提升我們的 React 遊戲。

到底什麼是 Hook？

首先，讓我們快速回顧一下 Hooks 是什麼。 React 16.8 中引入了鉤子，讓您無需編寫類別即可使用狀態和其他 React 功能。一些最受歡迎的內建鉤子是 useState、useEffect 和 useContext。

內建鉤子範例

從 'react' 導入 React, { useState, useEffect };

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

在這個簡單的範例中，useState 和 useEffect 協同工作來管理狀態和副作用。它乾淨、簡單、功能強大。

為什麼要關心自訂 Hook？

自訂掛鉤都是為了可重複使用性和保持組件清潔。它們允許您在元件之間提取和共用邏輯。將它們視為您的個人工具箱，您可以在其中儲存方便的功能並在需要時使用它們。

客製化 Hook 的好處

• 可重複使用：寫一次，隨處使用。在不同元件之間共用邏輯，無需重複程式碼。
• 可讀性：讓您的元件專注於渲染，使它們更易於閱讀和維護。
• 可維護性：在一個地方更新邏輯，並在使用鉤子的所有地方反映出來。

讓我們一起建立自訂 Hook

假設您有多個元件需要從 API 取得資料。您可以建立一個自訂掛鉤來處理它，而不是在每個元件中編寫相同的獲取邏輯。讓我們建立 useFetch。

逐步：建立 useFetch

1. 建立 Hook：先建立一個名為 useFetch.js 的新檔案。

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 () => {
          try {
            const response = await fetch(url);
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            const result = await response.json();
            setData(result);
          } catch (error) {
            setError(error);
          } finally {
            setLoading(false);
          }
        };

        fetchData();
      }, [url]);

      return { data, loading, error };
    }

    export default useFetch;

1. 使用 Hook：現在，讓我們在元件中使用 useFetch。

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

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

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

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