カスタムフックを使用した React でのロジックの再利用: 実践ガイド-jsチュートリアル-php.cn

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

WBOY

リリース： 2024-08-16 18:42:03

オリジナル

677 人が閲覧しました

Reusing Logic in React with Custom Hooks: a Practical guide

カスタムフックは、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;

ログイン後にコピー