理解並創建 React 中的自訂 Hook

目錄

1. 先決條件
2. 安裝
3. 簡介
4. 什麼是自訂 Hook？
5. 什麼時候應該建立自訂 Hook？
6. 範例：建立自訂掛鉤
   • 第 1 步：決定可重複使用邏輯
   • 第 2 步：將邏輯提取到自訂 Hook
   • 第 3 步：使用自訂 Hook
7. 自訂 Hook 的好處
8. 自訂 Hook 的最佳實務
9. 結論

先決條件：

確保您具備以下方面必要的背景知識：

React基礎
Node.js 和 npm

安裝：

要使用 Vite 開始新的 React 項目，請按照以下步驟操作：

我。開啟終端機並執行以下命令來建立新專案：

   npm create vite@latest my-react-app --template react

ii.導航到您的專案目錄：

     cd my-react-app

iii.安裝依賴項：安裝專案所需的套件：

   npm install

四。啟動開發伺服器： 運行開發伺服器：

    npm run dev

您的 React 應用程式現在將運行，您可以在瀏覽器中透過 http://localhost:5173 查看它。

介紹：

什麼是 React Hook？ ：

React hooks 是特殊的函數，可讓您在功能元件中使用狀態和其他 React 功能。像 useState 和 useEffect 這樣的鉤子對於管理狀態和副作用至關重要。

什麼是自訂掛鉤？ ：

自訂鉤子可以被描述為一種跨多個元件重複使用邏輯的方法。您可以將其封裝在自訂掛鉤中，而不是重複程式碼，從而使您的元件更清晰，程式碼更易於管理。就像使用自訂鉤子時的 React hooks 一樣，請確保您的元件名稱以以下形式開頭（use 後面跟著您想要為元件指定的名稱，例如 useFetchData）。 useFetchData 可以是一個自訂 Hook，它從 API 取得資料並將其傳回給您的元件。成分。

了解 Hooks 嗎？

了解 Hook：
useState、useEffect 和 useContext 等 Hook 可讓您在不編寫類別的情況下使用狀態和其他 React 功能。它們是讓您以模組化方式處理元件邏輯的建構塊。

什麼時候應該創建自訂掛鉤？

自訂掛鉤讓您可以在不同元件之間重複使用有狀態邏輯。一個簡單的例子是計數器元件，它具有遞增、遞減和重置功能，如果您需要在多個元件中使用相同的邏輯，則可以將邏輯移至自訂掛鉤。另一個常用的範例是從 API 取得資料的元件，如果您需要在多個元件中使用相同的邏輯，您可以將該邏輯移至自訂掛鉤。

建立自訂鉤子的範例

範例：讓我們使用 React hook(useState) 建立一個簡單的計數器應用程式。在 app.jsx

步驟 1 確定可重複使用邏輯

import React, { useState } from "react";

import "./App.css";

function App() {
  // usestate hooks
  const [counterstate, setCounterstate] = useState(0);

  // function for increment,decrement and reset
  const increment = () => {
    setCounterstate((prev) => prev + 1);
  };
  const decrement = () => {
    setCounterstate((prev) => prev - 1);
  };
  const reset = () => {
    setCounterstate(0);
  };
  return (
    <div className="container">
      <div>
        <h1>Counter App </h1>
        <h2>{counterstate}</h2>
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

在上面的程式碼中，可重複使用的邏輯包括計數器狀態、初始狀態(o)、遞增、遞減和重置函數。增量在初始狀態加 1，減量從初始狀態減 1，而重設則重設為第一個初始狀態。

步驟 2 將邏輯提取到自訂鉤子中

我們可以在 src 資料夾中建立一個名為 Hooks 的資料夾，然後為自訂鉤子建立一個名為 useCouter.jsx 的文件，如下所示。

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev + 1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

  return { value, increment, decrement, reset };
};

export default useCounter;

步驟 3 使用自訂鉤子

現在，讓我們在 App.jsx 中使用我們的自訂鉤子。

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";

function App() {

  const { value, increment, decrement, reset } = useCounter(0);
    return (
    <div className="container">
      <div>
        <h1>Counter App </h1>
        <h2>{value}</h2>
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

範例 2.

讓我們為所有 API 呼叫建立一個自訂鉤子 useFetch。

import React, { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, error, loading };
};

export default useFetch;

用法

在 App.jsx 中，我們可以使用這個自訂鉤子從 JSON 佔位符中取得使用者名，如下所示；

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";
import useFetch from "./Hooks/useFetch";

function App() {
  const { value, increment, decrement, reset } = useCounter(0);
  const { data, error, loading } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  return (
    <div className="container">
      <div>
        <h1>Counter Appp </h1>
        <h2>{value}</h2>
        {loading && <div>Loading....</div>}
        {error && <div>Error: {error.message}</div>}
        {data && data.length > 0 && (
          <div>
            <h2>Username: {data[0].username}</h2>
          </div>
        )}
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

定制鉤子的好處

可重複使用性：

主要好處之一是可重複使用性。您可以在多個元件中使用相同的自訂鉤子，減少程式碼重複。

關注點分離：

自訂掛鉤可協助您將邏輯與 UI 分開。您的元件專注於渲染，而自訂掛鉤處理邏輯。

清潔劑組件：

透過將複雜的邏輯轉移到自訂掛鉤，您的元件變得更簡單、更容易理解。

自訂 Hook 的最佳實踐

命名約定：

自訂掛鉤應以「use」一詞開頭，以遵循 React 命名約定。這也有助於快速識別程式碼中的鉤子。

範例：useFetch、useForm、useAuth。

處理依賴關係：

在自訂鉤子中使用 useEffect 等鉤子時，請確保正確處理依賴關係，以避免錯誤或不必要的重新渲染。

避免不必要的重新渲染：

透過記憶值或使用 useCallback 和 useMemo 等鉤子來優化您的自訂鉤子，以避免重新運行昂貴的計算或重新獲取資料。

結論

我們探索了自訂鉤子的概念及其在簡化和增強 React 應用程式開發中的作用。透過建立自訂掛鉤，您可以封裝和重複使用有狀態邏輯，這有助於保持組件的清潔和可維護性。

查看 GitHub 上的專案：我的 GitHub 儲存庫

以上是理解並創建 React 中的自訂 Hook的詳細內容。更多資訊請關注PHP中文網其他相關文章！