React の use() フック: 適用方法とその理由

この新しいフックは、多くの定型コードを簡素化するのに役立ちます。

開発する React アプリは外部 API からデータを取得することが多く、React チームはこのニーズに確実に応えるように努めています。 の使用（）フックにより、データフェッチのプロセスが簡素化されます。

このフックを使用すると、Promise を定義し、アプリケーションの状態を更新するために必要な定型コードの量が減ります。 React についてすべて学ぶ使用（）フックとそれを React プロジェクトで使用する方法について説明します。

たとえば、次のコンポーネントについて考えてみましょう。

React がこのコンポーネントをレンダリングすると、fetch() を使用して API を消費します。 次に、リクエストが成功した場合はデータをコンポーネントの状態に保存するか、isErrorそうでない場合は変数を true に設定します。

状態に応じて、API からのデータまたはエラー メッセージが表示されます。 API リクエストが保留中である間は、ページに「読み込み中...」というテキストが表示されます。

上記のコンポーネントは定型コードが多く含まれているため、少し面倒です。 この問題を解決するには、使用（）コードをフックしてリファクタリングします。

use() フックを使用すると、上記のコンポーネントをわずか 2 行のコードに減らすことができます。 ただし、その前に、このフックはかなり新しいため、React の実験版でのみ使用できることに注意してください。 したがって、そのバージョンを使用していることを確認してください。

これで、フックを使用する準備が整いました。まず、フックを交換します。使用状態そしてuseEffectだけでインポートします使用:

内部データコンポーネントの場合、保持するのはフェッチ リクエストだけです。 ただし、フェッチリクエストを内部にラップする必要があります使用（）針; JSON データまたはエラーのいずれかを返します。 次に、応答を変数に設定します。データ:

それだけです！ ご覧のとおり、上記のコードでは、コンポーネントがわずか 2 行のコードに減ります。 これは、このようなシナリオで use() フックがいかに役立つかを示しています。

の重要な部分使用（）フックはロード状態とエラー状態を処理します。 これは親コンポーネント内で実行できます。データ。

読み込み機能を実装するには、データコンポーネント付きサスペンス 。 このコンポーネントは、読み込み状態にあるときはいつでもレンダリングされるフォールバック prop を受け取ります。

の使用（） Data コンポーネントのフックにより、このサスペンスのロードがトリガーされます。 約束はまだ解決されていませんが、アプリコンポーネントはフォールバック状態をレンダリングします。 そして、データコンポーネントは応答データを受信すると、読み込み状態の代わりにコンテンツをレンダリングします。

エラーをキャッチする場合、エラー境界を使用するには、エラー境界がどのように機能するかを知る必要があります。 通常、サスペンスを扱うときに使用します。

エラー境界の例は次のコードにあります。

このエラー境界の例には、エラー状態とエラーの内容を追跡する状態オブジェクトがあります。 次に、そのエラーから派生状態を取得します。 の与える（）関数は、エラーが発生した場合にフォールバック要素を表示します。 それ以外の場合は、内部にあるものはすべてレンダリングされます。<エラー境界 />。

上記のコンポーネントは、Suspense とほぼ同じように機能します。 したがって、App コンポーネントでは、すべてを内部にラップできます。エラー境界次のようなコンポーネント:

ネストされたコードのいずれかがエラーをスローした場合、エラー境界は次の方法でエラーをキャッチします。getDerivedStateFromError()状態を更新すると、フォールバック テキスト「おっと! エラーがあります。」が表示されます。

したがって、 use() フックは定型コードの量を減らし、ロードとエラー状態を容易にするのに役立ちます。 ただし、 use() フックには別の非常に便利な使い方もあります。

を送信していると仮定しましょうshouldFetchの小道具としてのブール値データコンポーネントがあり、次の場合にのみフェッチ リクエストを実行したい場合shouldFetch/strong>