Reactコンポーネントのライフサイクル：知っておくべきこと[2022]

公開: 2021-01-06

Reactでは、アプリケーションはコンポーネントと呼ばれる可能な限り最小の部分に分割されます。 コンポーネントは、プレゼンテーションまたはコンテナにすることができます。

プレゼンテーションコンポーネントについて話すとき、それらにはロジックがありません。 それらはコンポーネント内に埋め込まれています。 UIしかありません。

コンテナコンポーネントは、プレゼンテーションコンポーネントを使用し、コンポーネントにビジネスロジックを備えたコンポーネントです。 このようなコンポーネントは、多くの場合、担当する可能性のある多くのユースケースの1つを実現するために、ローカル状態オブジェクトを保持する必要があります。 これらのコンポーネントは、プレゼンテーションコンポーネントを子コンポーネントとして使用し、さまざまな小道具を使用してデータを渡します。

Reactを使用すると、クラスコンポーネントまたは機能コンポーネントのいずれかを使用できます。 反応エコシステムで使用される一般的なパターンは、プレゼンテーションコンポーネントが機能タイプのコンポーネントであり、コンテナコンポーネントがクラスタイプであるというものです。

反応ライフサイクルは、コンポーネントが通過する正確なプロセスと、反応コンポーネントのライフサイクルの背後にある理由を示しています。

目次

機能コンポーネント

これらは状態がなく、小道具を使った操作のみが行われます。

すべてのコンポーネントライフサイクルメソッドまたはsetStateは、そのようなコンポーネント内で使用またはアクセスすることはできません。

チェックアウト： Reactプロジェクトのアイデア

クラスコンポーネント

これらのコンポーネントはローカル状態を持つことができ、ライフサイクルメソッドとsetStateにアクセスできます。

reactの典型的なクラスコンポーネントは次のようになります：-

コンポーネントのライフサイクルには、次の3つのフェーズがあります。

  1. 取り付け
  2. 更新
  3. アンマウント

取り付け

コンポーネントが作成されてDOM（Document Object Model）に挿入される場合、使用されるメソッドは次のとおりです。

● constructor（）

● staticgetDerivedStateFromProps（）

● render（）

● componentDidMount（）

更新

コンポーネントに提供された小道具または状態が変更された場合、コンポーネントの再レンダリングは更新フェーズとも呼ばれます。 このフェーズでは、以下に呼び出されるライフサイクルメソッドを示します。

●staticgetDerivedStateFromProps（）

●shouldComponentUpdate（）

●render（）

●getSnapshotBeforeUpdate（）

●componentDidUpdate（）

読む： Vue vs React：VueとReactの違い

アンマウント

このメソッドは、コンポーネントのアンマウント中に呼び出されます。-

●コンポーネントwillUnmount（）

これは、ドキュメントオブジェクトモデルが破棄される前に呼び出される最後の関数です。 これは、componentWillMount中に構築された要素のクリーンアップとして機能します。

コンポーネントでのエラー処理の目的で、予約されているメソッドはいくつかあります。-

●staticgetDerivedStateFromError（）

●componentDidCatch（）

一般的に使用されるライフサイクルメソッドの詳細を説明します：-

●コンストラクター（小道具）

このライフサイクル方式は、コンポーネントの取り付け段階で使用されます。 ここでローカル状態オブジェクトを宣言することができます。 super（props）は、他のステートメントの前にコンストラクター内で呼び出されます。 そうしないと、this.propsへのアクセス中にエラーが発生します。

ローカル状態オブジェクトを宣言したり、イベントハンドラーをインスタンスにバインドしたりすることを目的としない場合は、コンポーネントのライフサイクルメソッドを作成する必要はありません。

コンストラクター（）の呼び出し状態は、前のサイクルが終了する前に再レンダリングをトリガーするため、お勧めできません。

Constructor（）は、状態を直接割り当てることができる唯一の場所です。 それ以外の場合、状態を変更したり、状態を割り当てる必要がある場合は、 this.setSateを使用する必要があります。

● render（）

このメソッドコンポーネント内には、JSX部分が記述されています。 JSXはHTMLに似ていますが、javascriptの拡張構文です。 JSXを使用している場合、renderメソッド内でJavascript式を使用することもできます。

親コンポーネントのrender（）メソッドには、子コンポーネントが含まれている場合があります。 すべて、反応成分のベースである構成パターンに従います。

親のrenderメソッドが呼び出されると、子コンポーネントに対してもレンダリングが開始され、子レンダリング全体が完了した後にのみ親レンダリングが完了します。

renderメソッドは必須のメソッドです。 これがないと、コンポーネントのビュー部分を書き込むことができる唯一の場所であるため、コンポーネントを作成できません。

レンダリングメソッドは純粋です。 これは、内部の状態を変更できないことを意味します。

更新フェーズのコンポーネントの場合、特定のコンポーネントの再レンダリングが発生するかどうかは、 shouldComponentUpdate（）ライフサイクルメソッドの戻りの種類または使用法によって異なります。

このメソッド内でAPI呼び出しを行ったり、ブラウザーを操作したりすることはお勧めできません。エラーが発生します。

● componentDidMount（）

このメソッドは、コンポーネントがマウントされた直後に呼び出されます。 これで、DOMをさらに操作できるようになりました。 このメソッド内でsetStateを呼び出すことができます。

また、ブラウザまたはAPI呼び出しとの対話はここから行うことができます。

このメソッドは、作成時に1回だけ呼び出されます。 メソッドはそれ以上の再レンダリング部分では実行されず、メソッド内のロジックも実行されません。

● componentDidUpdate（）

これはcomponentDidMountと同じです。; コンポーネントの再レンダリングが発生したときにのみ呼び出されるという唯一の違いがあるエラーが発生する可能性があります。 このメソッドは、最初のレンダリングでは呼び出されません。

setStateと副作用は、このメソッド内で実行できます。 ただし、setStateは条件でラップする必要があります。 そうしないと、レンダリングが無限ループに陥り、レンダリングが終了しない可能性があります。

また、shouldComponentUpdate（）がfalseを返した場合、componentDidUpdateは呼び出されません。

● componentWillUnmount（）

このメソッドは、コンポーネントのアンマウントフェーズが進行しているときに呼び出されます。

メソッド内では、理想的には、イベントハンドラーの削除とメモリのクリーンアップを実行できます。

setState（）関数は、コンポーネントの再レンダリングを引き起こすため、この内部で呼び出さないでください。

● shouldComponentUpdate（）

反応アプリケーションを開発している間、コンポーネントの不必要な再レンダリングを避けなければならない場合がよくあります。 このクラス内コンポーネントを実現するには、上記の方法があります。 このメソッドがfalseを返す場合、コンポーネントとその子コンポーネントの再レンダリングは行われません。

以前の小道具をチェックして、提供された新しい小道具と比較して、変更がないことを確認してからfalseを返すことができます。

この中でsetState（）メソッドを呼び出すことはお勧めできません。再度、再レンダリングが発生します。

また、このメソッド内で副作用を実行しないでください。

この方法に代わる別の方法もあります。 クラスを拡張しながらReact.pureComponentsを使用できます。 これは、shouldComponentUpdate（）よりもはるかに安定していて信頼性があります。

最後になりましたが、エラーをキャッチするために存在する反応コンポーネントのエラー境界タイプが存在します。

コンポーネントをエラー境界コンポーネントで単純にラップする必要があります。

この特別なコンポーネントの内部では、2つのライフサイクルメソッドが使用されます。-

  1. static getDerivedStateFromError（）
  2. componentDidCatch（）

子孫コンポーネントがエラーをスローした場合、両方が呼び出されます。

最初のものはレンダリングフェーズ中に呼び出されるため、その内部での副作用は許可されません。 2つ目はコミットフェーズ中に呼び出されるため、その内部で副作用が発生する可能性があります。

また読む：インドのReactJS開発者給与

世界のトップ大学からオンラインでソフトウェアエンジニアリングコースを学びましょう。 エグゼクティブPGプログラム、高度な証明書プログラム、または修士プログラムを取得して、キャリアを早急に進めましょう。

結論

反応コンポーネントのライフサイクルはコードを複雑にしますが、メソッドを介して行われる体系的な実行と操作は、開発者の観点からは非常に魅力的です。 Reactライフサイクルでは、コンポーネントを再構築または操作できます。

反応、フルスタック開発について詳しく知りたい場合は、upGrad＆IIIT-Bのフルスタックソフトウェア開発のエグゼクティブPGプログラムをチェックしてください。これは、働く専門家向けに設計されており、500時間以上の厳格なトレーニング、9以上のプロジェクトを提供します。 、および割り当て、IIIT-B卒業生のステータス、実践的な実践的なキャップストーンプロジェクト、およびトップ企業との雇用支援。

未来のキャリアに備える

フルスタック開発のエグゼクティブPGプログラムに今すぐ申し込む