React フックについてまだ学習していない React 開発者の方は、今がその瞬間です。 この投稿では、useEffect React Hook について詳しく説明します。 スイスアーミーナイフに相当するフックです。 これにより、コンポーネントのマウント時にデータを取得する方法、状態やプロパティが変更されたときにコードを実行する方法、タイマーや間隔を設定する方法など、さまざまな問題が解決されます。
useEffect は、JSX (あらゆる種類の副作用) を返さない React コンポーネントで「実行」したいほとんどすべてのことに使用されます。 コンポーネントごとに複数の useEffect を持つこともできます。
この力にはすべて代償が伴います。その仕組みを理解していないと、困惑するかもしれません。 この投稿では、概念モデルを理解してそれを独自のコードに適用できるように、さまざまな例を見ていきます。
反応フック – 何を解決しようとしているのでしょうか?
フックは React バージョン 16.8 で初めて導入され、現在多くの React プロジェクトで利用されています。 フックは、コンポーネント間のコードの繰り返しの問題を克服します。 これらはクラスを使用せずに書かれています。 これは、React がクラスを放棄することを意味するものではありません。 フックは単なる代替メソッドです。
React を使用すると、ステートフル ロジックを備えた高度なコンポーネントを迅速に作成できます。 このクラスは React ライフサイクル メソッドに依存しているため、これらのコンポーネントを分離するのは困難です。 ここで React Hook が登場します。
これにより、コンポーネントをより小さな機能に分割できます。 ライフサイクル メソッドに基づいてコードをより小さな部分に分割する代わりに、機能に応じてコードをより小さな単位に整理および分離できるようになりました。
useEffectフックとは何ですか?
フックは、ES6 クラスを作成せずに状態やその他の反応機能にアクセスできるようにする関数です。 反応フック API には useEffect と呼ばれるフックがあります。 React ライフサイクルに精通している場合、useEffect フックは コンポーネントDidMount, コンポーネントDidUpdate, コンポーネントはアンマウントします ライフサイクルメソッドを組み合わせたもの。
React Hooks のドキュメントによると、React Hooks は、ES6 クラス コンポーネントのライフサイクル メソッドに関するいくつかの問題を解決するために作成されました。
構文
最初の引数はコールバック関数で、デフォルトでは各レンダリング後に実行されます。 XNUMX 番目のパラメーターは、ターゲットの状態が変化した場合にのみコールバックするようにフックに指示するオプションの dependency 配列です。
フックは、各依存関係の歴史的状態と現在の状態を比較します。 XNUMX つの値が一致しない場合、フックは最初のパラメータで指定されたコールバックを呼び出します。 依存関係配列は通常のコールバック動作を変更し、フックがコンポーネント スコープ内の他のすべてのコンポーネントを無視することを保証します。
基本的な使い方
メッセージを保存するために、上記のコード サンプルでは React useState を使用しています。 その後、メッセージ状態変数を取得して画面に出力します。 ただし、今度は、Effect を使用して、コンポーネントがマウントされた XNUMX 秒後にメッセージを変更したいと考えています。
React フレームワークから useEffect をインポートした後、useState 行の後ろにエフェクトを挿入しました。 useEffect の最初のパラメータは関数です。 この関数ハンドラーが実行されると、指定された副作用がすべて処理されます。 この関数は、React コンポーネントのライフサイクル イベントのいずれかが発生したときに呼び出されるコールバック関数です。
いつ使うの?
useEffect フックはさまざまな状況で役立つ場合があります。 最も重要なものは次のとおりです。
- 指定された引数に応じてデータをフェッチしたい場合は、クライアント側からこのパラメータを変更できます。 これは、パラメータが新しいデータで更新された後に呼び出されます。
- API エンドポイントからデータを取得し、クライアント側で表示したい場合。 コンポーネントがレンダリングされると、useEffect フックに指定された関数またはハンドラーが実行され、コンポーネントの状態のデータが取得されます。 これらのステータスは、ユーザー インターフェイス コンポーネントで使用されます。
- コンポーネントが外部からのデータに依存しており、データが確実に到着することができない場合は、Effect を使用する必要があります (サーバーがそこにある可能性があります)。 問題をスローして他のコンポーネントが表示されなくなるのではなく、useEffect フックにコンポーネントを配置します。
ユースケース
最初の実行後にコンポーネントが再レンダリングされる場合、コンポーネントは実行されません。
コンポーネントがレンダリングまたは再レンダリングされるときは、必ず実行する必要があります。
デフォルトでは、プログラムは XNUMX 回だけ実行されます。 その後、プロパティの値が変更された場合は、次を実行します。
非同期アクティビティの場合は、常に useEffect を使用します。
useEffect コード ブロックは、他の開発者にとって非同期ジョブの明らかなマーカーです。 useEffect を使用せずに非同期コードを作成することもできますが、これは「React メソッド」ではないため、複雑さが増し、間違いのリスクも高まります。
UI を停止する可能性がある非同期コードを記述する代わりに useEffect を使用することは、React コミュニティではよく知られたテクニックであり、特に React チームが副作用を実行するために構築した方法です。
これを利用するもう XNUMX つの利点は、開発者がコードをレビューするだけで、「制御フローの外で」実行されるコードを即座に検出できることです。これは最初のレンダリング サイクル後にのみ重要になります。 さらに、ブロックは、再利用可能でさらにセマンティックなカスタム フックへの抽出に適しています。
例
useEffect コードを使用して、XNUMX 秒ごとに数値を増加させます。
まとめ
私の考えでは、useEffect フックの基礎となる設計原則とベスト プラクティスを理解することは、次のレベルの React 開発者になりたい場合に学ぶべき重要なスキルです。
要約すると、useEffect フックは、命令的で潜在的に効果のある完全なロジックを含む関数を受け取ります。 XNUMX 番目のパラメーターである依存配列を使用して、実行に影響を与えることができます。 それに対処する一方で、return 関数を使用したクリーニング コードを記述する必要もあります。
記事が役に立ったかどうかコメントでお知らせください。
コメントを残す