透過自訂 Hooks 在 React 中重複使用邏輯：實用指南-js教程-PHP中文網

透過自訂 Hooks 在 React 中重複使用邏輯：實用指南

WBOY

發布： 2024-08-16 18:42:03

原創

782 人瀏覽過

Reusing Logic in React with Custom Hooks: a Practical guide

自訂鉤子是React 中的一項強大功能，與React 內建鉤子不同，它用於更具體的目的，並且它是透過將常見功能封裝到獨立函數中來完成的。自訂鉤子促進可重複使用性，改進元件組織並整體增強程式碼可維護性。

在本指南中，我們將深入探討使用自訂鉤子的目的，以了解建立自訂鉤子的基礎知識以及如何使用其他元件。然後我們將透過建立 fetch API 自訂掛鉤來說明一個現實世界的範例。

了解基礎知識

通常開發人員會害怕自訂掛鉤這個術語，所以讓我們揭開它的神秘面紗。

自訂鉤子只是一個以 use 前綴開頭的函數（這對於自訂鉤子的工作至關重要）。
此函數由利用 React 內建鉤子的可重複使用邏輯組成。如果您在多個元件中具有相同的邏輯，通常您會考慮使用自訂掛鉤，因此透過利用自訂掛鉤您可以解決多個問題，例如增強程式碼組織和可維護性。

建立一個簡單的自訂鉤子

下面的範例是一個簡單的計數器自訂掛鉤，它使用 useState 掛鉤管理計數狀態，並使用僅設定計數狀態的增量或減量函數分別更新計數。

import { useState } from 'react'

const useCount = () => {
  const [count, setCount] = useState(0)

  const increment = () => setCount(prev => prev + 1)
  const decrement = () => setCount(prev => prev - 1)

  return { count, increment, decrement }
}

export default useCount;

登入後複製

恭喜您剛剛建立了自己的自訂掛鉤，這非常簡單。接下來將深入探討如何使用這個鉤子

在元件中使用自訂鉤子

在另一個元件中使用自訂鉤子只需破壞其他元件內自訂鉤子的回傳值即可完成

import useCount from 'customHooks'

const Page = () => {
  const {count, increment, decrement} = useCount()

  return(
    <div>{ count }</div>
    <button onClick={increment}> + </button>
    <button onClick={decrement}> - </button>
  )
}

export default Page

登入後複製

使用自訂鉤子的真實範例

最重複的邏輯之一是取得 API，電子商務網站將取得用於身分驗證、支付流程、顯示所有產品、評論、評論等的資料。

您可以想像整個應用程式中重複取得邏輯的數量，可以使用自訂掛鉤來簡化。

本節將建立一個自訂抓取鉤子。

我們將使用 useState 和 useEffect 內建 React hooks
我們將有一個資料狀態，一個掛起狀態（如果我們想在獲取資料時顯示旋轉器）和一個錯誤狀態（如果獲取失敗）。

下面的程式碼是不言自明的。在 useEffect 內部，我們定義了一個非同步的 fetchData 函數，它將處理取得邏輯。在 useEffect 下面，自訂鉤子將傳回下列值，這些值可用於所有其他元件資料、待處理、錯誤。

請注意，我們正在將 url 值傳遞給 useFetch 自訂鉤子參數，這意味著資料可以傳遞給自訂鉤子

import {useState, useEffect} from 'react'

const useFetch = (url: string) => {
  const [data, setData] = useState<any>([])
  const [pending, setPending] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      setPending(true)

      await fetch(url)
        .then(result => {
          if (!result.ok) throw new Error('something went wrong!')
          return result.json()
        })
        .then(result => {
          setData(result)
          setPending(false)
        })
        .catch(error => setError(error))
    }

   fetchData()
  }, [url])

  return { data, pending, error }

}

export default useFetch

登入後複製

透過在頁面元件中使用 useFetch 鉤子，我們現在可以在出現錯誤時向客戶端顯示訊息，在取得資料時顯示旋轉器，最後向客戶端顯示資料。

該元件可以在所有應用程式中重複使用，從而減少重複程式碼的數量。

import useFetch from './hooks/useFetch'
import Spinner from "./icons/Spinner"

const Page = () => {
  const {data, pending, error} = useFetch('https://jsonplaceholder.typicode.com/posts')

  if(error) <div>Cloud not fetch data from the server</div>

  return(
    {pending ? 
     ( <Spinner />)
     :
     (
      data.map((item) => (
        <div>
          <h3>{item.title}</h3>  
          <p>{item.body}</div>
        </div>
       )
      )
    )}
  )
}

export default Page;

登入後複製