Reactでカスタムフックを作成する方法を教えます

1. カスタムフックとは何か

ロジックの再利用

簡単に言えば、カスタムフックを使用すると、特定のコンポーネントロジックを再利用可能な関数に抽出できます。カスタムフックは、 useから始まる他のフックを呼び出す JavaScript 関数です。

2. カスタムフックを使用しない場合

例1:ページ全体でユーザーのマウス移動の座標を取得する必要がある場合、フックコードを使用せずに次のように記述できます。

  const [位置、setPosition] = useState({
    x: 0,
    年: 0
  })
  使用効果(() => {
    定数移動 = (e) => {
      setPosition({ x: ex, y: ey })
    }
    document.addEventListener('mousemove', 移動)
    戻り値 () => {
      document.removeEventListener('mousemove', 移動)
    }
  }, [])
  戻る （
    <div>
      x:{位置.x}
      y:{位置.y}
    </div>
  ）

例 2: ページにマウスを追従する画像がある場合、フックコードを使用せずに次のように記述することもできます。

const [位置、setPosition] = useState({
    x: 0,
    年: 0
  })
  使用効果(() => {
    定数移動 = (e) => {
      setPosition({ x: ex, y: ey })
    }
    document.addEventListener('mousemove', 移動)
    戻り値 () => {
      document.removeEventListener('mousemove', 移動)
    }
  }, [])
  戻る （
    <div>
      <画像
        画像
        スタイル={{
          位置: '絶対'、
          上: position.y,
          左: position.x、
        }}
        代替案=""
      />
    </div>
  ）

明らかに、上記の 2 つの例ではプレゼンテーション効果が異なりますが、使用されるロジックコードはほぼ同じです。フックを使用してロジックコードを再利用できます。

3. カスタムフックを使用する

上記の2つの例から再利用可能なロジックコードを抽出し、useMousePositionという新しいファイルを作成します。

'react' から { useState, useEffect } をインポートします。
デフォルト関数 useMousePosition() をエクスポートします。
  const [位置、setPosition] = useState({
    x: 0,
    年: 0
  })
  使用効果(() => {
    定数移動 = (e) => {
      setPosition({ x: ex, y: ey })
    }
    document.addEventListener('mousemove', 移動)
    戻り値 () => {
      document.removeEventListener('mousemove', 移動)
    }
  }, [])
  戻る位置
}

この機能は useMousePosition 関数で抽出しました。これで、使いたい場所にインポートできるようになりました。

最後に、通常の関数のように使用します

  定数位置 = useMousePosition()
  戻る （
    <div>
      x:{位置.x}
      y:{位置.y}
    </div>
  ）

明らかにコード量は減っている

これで、React でカスタムフックを作成する方法に関するこの記事は終了です。React カスタムフックに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: