カスタムフックを使用した React でのロジックの再利用: 実践ガイド

カスタム フックは、React の組み込みフックとは異なり、より特定の目的に使用される React の強力な機能であり、一般的な機能を独立した関数にカプセル化することで実現されます。カスタム フックは再利用性を促進し、コンポーネントの構成を改善し、コードの保守性を全体的に強化します。

このガイドでは、カスタム フックの使用目的について詳しく説明し、カスタム フックの作成の基本と、それを他のコンポーネントで使用する方法を理解します。次に、フェッチ 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

カスタムフックを使用する実際の例

最も反復的なロジックの 1 つは、電子商取引サイトが認証、支払いプロセス、すべての製品、コメント、レビューの表示などのためにデータを取得する API の取得です。

アプリケーション全体で繰り返されるフェッチ ロジックの量は想像できますが、カスタム フックを使用して簡素化できます。

このセクションでは、カスタムのフェッチフックを作成します。

useState および useEffect ビルトイン React フックを使用します
データの状態、データのフェッチ中にスピナーを表示したい場合の保留状態、フェッチが失敗した場合のエラー状態を用意します。

以下のコードは一目瞭然です。 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;

結論

カスタム フックは、React コンポーネント内でロジックをカプセル化して再利用するための強力なメカニズムを提供します。共通の機能を専用の関数に抽出することで、コードの編成を強化し、保守性を向上させ、コードの再利用性を促進できます。

カスタム フックの作成の基礎を検討し、React コンポーネント内でカスタム フックを使用する方法を理解し、カスタム フックを使用する実際の例を示しました。

以上がカスタムフックを使用した React でのロジックの再利用: 実践ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。