React のカスタムフック

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

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

---

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

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

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

---

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

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

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

---

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

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

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) の狀態(tài)を管理します。
• 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 関數(shù)を返します。
• フックは、フォーム入力狀態(tài)を管理するために任意のフォーム コンポーネントで使用できます。

---

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

これで、フォーム コンポーネントで 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 フックは、名前と電子メールの両方の入力の狀??態(tài)と変更イベントを処理するために使用されます。
• handleSubmit 関數(shù)は、フォームが送信されたときにフォームの値をログに記録します。

---

カスタムフックのルール

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

1. 最上位レベルでのみフックを呼び出します: 條件付きまたはループ內でフックを呼び出しないでください。
2. React 関數(shù)からのみフックを呼び出します: カスタム フックは、React 関數(shù)コンポーネントまたは他のカスタム フックからのみ呼び出すことができます。
3. use で始まる: カスタム フックは、通常の JavaScript 関數(shù)と區(qū)別するために、 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、およびエラー狀態(tài)を管理します。
• フックは、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 からデータをフェッチします。
• コンポーネントは、カスタム フックから返された狀態(tài)に基づいて、フェッチされたデータのロード、エラー、表示を処理します。

---

カスタムフックの概要

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

---

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