React のカスタムフック: コンポーネント間でロジックを再利用する

React のカスタムフック

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

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

---

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

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

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

---

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

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

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

---

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

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

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 フックと同じルールに従います:

1. 最上位レベルでのみフックを呼び出します: 条件付きまたはループ内でフックを呼び出しないでください。
2. React 関数からのみフックを呼び出します: カスタム フックは、React 関数コンポーネントまたは他のカスタム フックからのみ呼び出すことができます。
3. 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;

説明:

• DataComponent は useFetchData カスタム フックを使用して API からデータをフェッチします。
• コンポーネントは、カスタム フックから返された状態に基づいて、フェッチされたデータのロード、エラー、表示を処理します。

---

カスタムフックの概要

• カスタム フック を使用すると、React アプリケーションでロジックをカプセル化して再利用できます。
• 複雑なロジックを抽象化することで、コンポーネントをクリーンな状態に保つのに役立ちます。
• カスタム フックでは、useState、useEffect などの組み込みフックを使用でき、React フックと同じルールに従います。
• カスタム フックの一般的な使用例には、フォーム入力の管理、データのフェッチ、副作用の処理などが含まれます。

---

以上がReact のカスタムフック: コンポーネント間でロジックを再利用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。