トピック: React Hook とカスタム React Hook

私が React を学んでいたとき、いくつかの部分が難しいように思えました。今日、私は反応フックとカスタム反応フックに関する私の学習とアイデアのいくつかを書くことにしました。

- そもそもフックとは？

実生活では、フックは何かを保持する一種のリングを意味します. React では、基本的にこの次の概念に基づいてフックが機能します.たとえば、React フックを使用すると、同じ状態を使用するコンポーネントまたは複数のコンポーネントで状態を設定するときに、任意のコンポーネントにデータを格納してデータを提供する状態が存在します.多くのコンポーネントで同じステートを使用できるため、リングのようにデータを保持し、どのコンポーネントでもリンクできると考えられます.ただし、反応フックを使用するためのルールとガイドラインがいくつかあります.

フックは、戻り関数の先頭と React 関数内で宣言する必要があります.

ループ、条件、およびネストされた関数でフックを宣言しないでください.

フックは機能コンポーネントでのみ記述できます.

例:

// imported hooks to use from react
import React, { useEffect, useState } from "react";

//react function
const MyOrder = () => {

// setting react hook
const [order, setMyOrder] = useState(‘’ ”) / useState(null);

    retrun(
       // code contents in JSX format.
    );
}
export default MyOrder;

上記の例から、これは React 機能コンポーネントであると言えます.では、説明をしていきます.

まず、注文関連のタスクを処理するコンポーネントとして「MyOrder.js」ファイルを作成します.コンポーネント名は大文字で始める必要があります.

次に、作成したコンポーネントをエクスポートして、他のコンポーネントでさらに使用できるようにします.エクスポートされていない場合、別のコンポーネントにインポートすることはできません.

3 番目に、フックを定義する必要があります.フックは常に「use」キーワードを開始します.上記の例では、useState フックが使用されています.さて、状態を設定する方法とデータを状態に保存する方法の要点に来ますか?状態では、データは配列形式で格納されます.したがって、最初は配列 [order, setOrder] 内の 2 つの要素を取得します.ここで、setOrder はデータを order 要素に設定します. setOrder 要素が最初に呼び出されると、React コンポーネントをレンダリングし、データを order 要素のメモリ セルに格納します.再度レンダリングされると、データを格納するために別のメモリ呼び出しが作成されます.ただし、何度もレンダリングすると、新しいセルを作成する以外は、以前に保存されたデータがシリアルに返されます.したがって、バグの作成を減らすために、フックを連続して設定する必要があります.

- 基本的に useEffect フックとは何ですか?

useEffect もフックであり、関数の一種です.コールバック機能です.コンポーネントをレンダリングした後、毎回コールバック関数を渡すためです.コールバック関数で配列を渡すことができます.このコールバック関数は、コンポーネントの最初のレンダリングで呼び出され、その後、配列の変更で呼び出されます.ただし、配列要素がない場合は、コンポーネントの最初のレンダリング時に 1 回呼び出されます. 1 つ注意しなければならないのは、配列要素は useEffect の依存関係と呼ばれることです.
例:

useEffect(() => {
    fetch(`http://localhost:8000/premium-autos/select-now/${id}`)
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        setOrder(data);
      });
  }, [id]);

ここでは、コンポーネントのレンダリング後に useEffect フックが呼び出され、URL を取得して応答を送信します.基本的に、このフックは API からデータをフェッチするために使用されます.データが特定の ID または電子メールでフェッチされるという依存関係を設定する必要がある場合は、配列に依存関係を設定できます.ここで、[id] は依存関係です.

- フックの利点

フックに多くの関数を記述し、他のコンポーネントで簡単に使用できます.

これにより、コンポーネントの再利用性、可読性、およびテストが容易になります.

――カスタムフックとは？

カスタムフックは単なる関数です.任意のプロジェクトに特定のロジックを記述する必要があり、他のコンポーネントで同じロジックを使用する必要がある場合、カスタム フックが重要な役割を果たします.例として「useAuth.js」という名前の JS ファイルを作成する必要があるだけです.ここでは任意の名前を記述できますが、最初は「use」と記述しても問題ありません.これは、カスタム フックの命名規則にすぎません.カスタムフックには必要な関数が書かれています.ここでは、「useAuth.js」の例を示しました.これは、すべてのコンポーネントで認証が必要になるためです.
例:

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

//react function and it will be our custom hook
const useAuth = ( ) => {

// setting react hook
const [userName, setUserName] = useState(‘’ ”) / useState(null);

const handleInputField = ( ) => {
    // code contents
}

const handleForm = ( ) => {
    // code contents
}

// returning function so that these function can be accessed in other components when custom hook will be called
    retrun(
          handleInputField,
          handleForm
    );
}
export default useAuth;