React でのカスタムフックの理解と作成

目次

1. 前提条件
2. インストール
3. はじめに
4. カスタムフックとは何ですか?
5. カスタムフックはいつ作成する必要がありますか?
6. 例: カスタムフックの作成
   • ステップ 1: 再利用可能なロジックを特定する
   • ステップ 2: ロジックをカスタムフックに抽出する
   • ステップ 3: カスタムフックを使用する
7. カスタムフックの利点
8. カスタムフックのベストプラクティス
9. 結論

前提条件:

以下の必要な背景知識があることを確認してください:

React の基礎知識
Node.js と npm

インストール:

Vite を使用して新しい React プロジェクトを開始するには、次の手順に従います。

私。ターミナルを開き、次のコマンドを実行して新しいプロジェクトを作成します:

   npm create vite@latest my-react-app --template react

ii.プロジェクト ディレクトリに移動します:

     cd my-react-app

iii.依存関係のインストール: プロジェクトに必要なパッケージをインストールします:

   npm install

iv.開発サーバーを起動します: 開発サーバーを実行します:

    npm run dev

これで React アプリが実行され、ブラウザの http://localhost:5173 で表示できるようになります。

導入：

React フックとは何ですか?:

React フックは、機能コンポーネントで状態やその他の React 機能を使用できるようにする特別な関数です。 useState や useEffect などのフックは、状態と副作用を管理するために不可欠です。

カスタムフックとは何ですか?:

カスタム フックは、複数のコンポーネント間でロジックを再利用する方法として説明できます。コードを繰り返す代わりに、コードをカスタム フックにカプセル化すると、コンポーネントがクリーンになり、コードが管理しやすくなります。 React フックと同様に、カスタム フックを使用する場合は、必ずコンポーネント名を必ず使用してください (use の後にコンポーネントに付けたい名前を続けます。例: useFetchData)。useFetchData は、API からデータをフェッチし、それを API に返すカスタム フックにすることができます。成分。

フックを理解していますか?

フックについて:
useState、useEffect、useContext などのフックを使用すると、クラスを作成せずに状態やその他の React 機能を使用できます。これらは、モジュール式の方法でコンポーネント ロジックを処理できるようにするビルディング ブロックです。

カスタムフックはいつ作成する必要がありますか?

カスタム フックを使用すると、さまざまなコンポーネント間でステートフル ロジックを再利用できます。簡単な例は、インクリメント、デクリメント、およびリセット機能を持つカウンター コンポーネントです。複数のコンポーネントで同じロジックが必要な場合は、ロジックをカスタム フックに移動できます。もう 1 つの一般的に使用される例は、API からデータをフェッチするコンポーネントです。複数のコンポーネントで同じロジックが必要な場合は、そのロジックをカスタム フックに移動できます。

カスタムフックの作成例

例: app.jsx の React フック(useState).を使用して単純なカウンター アプリを作成してみましょう

ステップ 1 再利用可能なロジックを特定する

import React, { useState } from "react";

import "./App.css";

function App() {
  // usestate hooks
  const [counterstate, setCounterstate] = useState(0);

  // function for increment,decrement and reset
  const increment = () => {
    setCounterstate((prev) => prev + 1);
  };
  const decrement = () => {
    setCounterstate((prev) => prev - 1);
  };
  const reset = () => {
    setCounterstate(0);
  };
  return (
    <div className="container">
      <div>
        <h1>Counter App </h1>
        <h2>{counterstate}</h2>
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

上記のコードでは、再利用可能なロジックには、カウンターステート、初期状態(o)、インクリメント、デクリメント、およびリセット関数が含まれています。インクリメントは初期状態に 1 を追加し、デクリメントは初期状態から 1 を減算します。一方、リセットは最初の初期状態にリセットします。

ステップ 2 ロジックをカスタムフックに抽出する

src フォルダー内に Hooks という名前のフォルダーを作成し、次に示すようにカスタム フック用の useCouter.jsx というファイルを作成します。

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev + 1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

  return { value, increment, decrement, reset };
};

export default useCounter;

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

それでは、App.jsx でカスタム フックを使用してみましょう。

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";

function App() {

  const { value, increment, decrement, reset } = useCounter(0);
    return (
    <div className="container">
      <div>
        <h1>Counter App </h1>
        <h2>{value}</h2>
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

例2。

すべての API 呼び出し用のカスタム フック useFetch を作成しましょう。

import React, { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, error, loading };
};

export default useFetch;

使用法

App.jsx では、以下に示すように、このカスタム フックを使用して JSON プレースホルダーからユーザー名を取得できます。

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";
import useFetch from "./Hooks/useFetch";

function App() {
  const { value, increment, decrement, reset } = useCounter(0);
  const { data, error, loading } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  return (
    <div className="container">
      <div>
        <h1>Counter Appp </h1>
        <h2>{value}</h2>
        {loading && <div>Loading....</div>}
        {error && <div>Error: {error.message}</div>}
        {data && data.length > 0 && (
          <div>
            <h2>Username: {data[0].username}</h2>
          </div>
        )}
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

カスタムフックの利点

再利用性:

主な利点の 1 つは再利用可能です。複数のコンポーネントで同じカスタム フックを使用できるため、コードの重複を減らすことができます。

懸念事項の分離:

カスタム フックは、ロジックを UI から分離するのに役立ちます。コンポーネントはレンダリングに重点を置き、カスタム フックはロジックを処理します。

クリーナーコンポーネント:

複雑なロジックをカスタム フックに移動することで、コンポーネントがよりシンプルになり、理解しやすくなります。

カスタムフックのベストプラクティス

命名規則:

カスタム フックは、React の命名規則に従って「use」という単語で始める必要があります。これは、コード内のフックを素早く特定するのにも役立ちます。

例: useFetch、useForm、useAuth。

依存関係の処理:

カスタム フック内で useEffect などのフックを使用する場合は、バグや不要な再レンダリングを避けるために、依存関係を正しく処理するようにしてください。

不必要な再レンダリングを避ける:

値をメモ化するか、useCallback や useMemo などのフックを使用してカスタム フックを最適化し、高コストの計算の再実行やデータの再フェッチを回避します。

結論

カスタム フックの概念と、React アプリケーション開発の簡素化と強化におけるその役割について検討してきました。カスタム フックを作成すると、ステートフル ロジックをカプセル化して再利用できるため、コンポーネントをクリーンで保守しやすく保つことができます。

GitHub でプロジェクトをチェックしてください: My GitHub リポジトリ

以上がReact でのカスタムフックの理解と作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。