React のカスタムフック: コンポーネント間でロジックを再利用する-jsチュートリアル-php.cn

Custom Hooks in React: Reusing Logic Across Components

React のカスタムフック

カスタムフック は、React アプリケーション内の複数のコンポーネント間でステートフルロジックを再利用できるようにする JavaScript 関数です。カスタムフックは、コンポーネント間で共有できるロジックをカプセル化し、コンポーネントをクリーンに保ち、コードの再利用性を促進するための強力なツールです。

カスタムフックには、React の規則に従って use という接頭辞が付けられ、その中で他のフック (useState、useEffect、useContext など) を使用できます。

カスタムフックを使用する理由

カスタムフックにはいくつかの利点があります:

コードの再利用性: コンポーネントから再利用可能なロジックを抽出できます。複数のコンポーネント間で共有する必要があるロジックがある場合は、それをカスタムフックに抽出できます。
懸念事項の分離: カスタムフックを使用して複雑なロジックをコンポーネントから移動することで、コンポーネントが UI のレンダリングにより集中できるようになり、可読性と保守性が向上します。
抽象化: 複雑なロジックを抽象化する方法を提供し、コンポーネントをよりクリーンで理解しやすくします。

カスタムフックを作成する方法

カスタムフックを作成するには、次の手順に従います:

関数を作成します: 関数には、再利用するロジックが含まれている必要があります。
組み込みフックを使用する: 関数内で、useState、useEffect、またはその他のフックなどの他の React フックを使用して、状態や副作用を管理できます。
戻り値: コンポーネントで使用されるカスタムフックから必要な状態、関数、または値を返します。

カスタムフックの基本的な例

マウスの位置を管理するカスタムフックの簡単な例を次に示します。

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

ログイン後にコピー

説明:

カスタムフック useMousePosition は、画面上のマウスの位置を追跡します。
useState を使用してマウス座標 (x および y) の状態を管理します。
useEffect を使用して、mousemove イベントのイベントリスナーを追加し、コンポーネントがアンマウントされるかエフェクトが再実行されるときにイベントリスナーをクリーンアップします。
フックはマウスの位置 (x と y) を返します。この位置は、useMousePosition をインポートして呼び出すコンポーネントで使用できます。

コンポーネントでのカスタムフックの使用

これで、任意のコンポーネントでこのカスタムフックを使用して、マウスの位置にアクセスできるようになります。

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

ログイン後にコピー

説明:

MouseTracker コンポーネントは、useMousePosition カスタムフックを使用してマウスの位置にアクセスします。
マウスを移動するたびに位置が更新され、コンポーネントが再レンダリングされて新しい座標が表示されます。

高度な例: フォーム処理用のカスタムフック

フォーム処理など、より複雑なロジック用のカスタムフックを作成できます。

import React from 'react';
import useMousePosition from './useMousePosition';

const MouseTracker = () => {
  const position = useMousePosition();  // Using the custom hook

  return (
    <div>
      <h2>Mouse Position:</h2>
      <p>X: {position.x}, Y: {position.y}</p>
    </div>
  );
};

export default MouseTracker;

ログイン後にコピー

説明:

useFormInput フックは初期値を受け取り、入力値と handleChange 関数を返します。
フックは、フォーム入力状態を管理するために任意のフォームコンポーネントで使用できます。

コンポーネントでのフォームフックの使用

これで、フォームコンポーネントで useFormInput を使用できるようになります。

import { useState } from 'react';

// Custom Hook to handle form input
const useFormInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
};

export default useFormInput;

ログイン後にコピー

説明:

useFormInput フックは、名前と電子メールの両方の入力の状態と変更イベントを処理するために使用されます。
handleSubmit 関数は、フォームが送信されたときにフォームの値をログに記録します。

カスタムフックのルール

カスタムフックは React フックと同じルールに従います:

最上位レベルでのみフックを呼び出します: 条件付きまたはループ内でフックを呼び出しないでください。
React 関数からのみフックを呼び出します: カスタムフックは、React 関数コンポーネントまたは他のカスタムフックからのみ呼び出すことができます。
use で始まる: カスタムフックは、通常の JavaScript 関数と区別するために、 use プレフィックスで始まる必要があります。

副作用のためのカスタムフックの使用

カスタムフックを使用して、データのフェッチなどの副作用を処理することもできます。

import React from 'react';
import useFormInput from './useFormInput';

const MyForm = () => {
  const nameInput = useFormInput('');
  const emailInput = useFormInput('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Name:', nameInput.value);
    console.log('Email:', emailInput.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input type="text" {...nameInput} />
      </div>
      <div>
        <label>Email:</label>
        <input type="email" {...emailInput} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

ログイン後にコピー

説明:

useFetchData は、API からデータをフェッチするカスタムフックです。
データ、isLoading、およびエラー状態を管理します。
フックは、API からデータをフェッチする必要があるコンポーネントで再利用できます。

コンポーネントでのデータ取得フックの使用

コンポーネントで useFetchData フックを使用する方法は次のとおりです:

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

ログイン後にコピー