ReactJSのコンポーネントライフサイクルメソッドとは??

私たち全員と同じように、Reactコンポーネントも誕生し、成長し、そして死にます!

(Habilelabs)(2020年12月7日)

By Payal Mittal

reactjsのコンポーネントライフサイクルメソッド
React.jsのコンポーネントライフサイクルメソッド

すべてのReactクラスコンポーネントは、一連の「ライフサイクルメソッド」。基本的に、Reactのすべては、コンポーネントまたはコンポーネントの一部で構成されています。

これらのコンポーネントは、地球上の他の生き物とほぼ同じように、特定のライフサイクルに従います。彼らは生まれ、成長し、そしてついに死にます。それらが生まれる段階はマウントと呼ばれ、成長する段階は更新と呼ばれ、死の最後のフェーズはアンマウントと呼ばれます。

このプロセス全体は「コンポーネントライフサイクル」と呼ばれます。これらのフェーズごとに、React.jsは、アプリケーション内のコンポーネントの動作を制御するライフサイクルメソッドと呼ばれる特定の組み込みメソッドをレンダリングします。

このブログでは、このライフサイクルを確認して、これらのライフサイクルメソッドについて知るには-

コンポーネントライフサイクルメソッドとは何ですか?

コンポーネントのライフサイクルメソッドは、次の3つのフェーズに分けられます-

  • マウント
  • 更新
  • アンマウント

コンポーネントのライフサイクル全体は、この単純な視覚的な図で理解できます-

コンポーネントのライフサイクル図

ここで、各フェーズとその方法について詳しく説明します。次に進みましょう-

✔ライフサイクルメソッドのマウント

コンポーネントの完了後初期化、コンポーネントのマウントが開始され、コンポーネントが作成されてDOMに挿入されます。

ここでは、最も一般的に使用されるライフサイクルメソッドについて説明します-

1。コンストラクター()

constructor()は、マウントが開始される前に最初に呼び出され、基本的にこれら2つを提供するために使用されます目的-

  • コンポーネントのローカル状態を初期化する
  • バインドする

    インスタンスへのイベント処理

    メソッド

setState()constructorメソッドで

に初期状態を直接割り当てることができます。状態を定義する方法は次のとおりです-

constructor(props) {
super(props);this.state = { count: 0 };
this.handleClick = this.handleClick.bind(this);
console.log("Constructor!");
}

2。 render()

次は

メソッドです。コンポーネントをDOMにマウントし、UIにレンダリングします。このメソッドは、コンポーネントのstate this.stateおよび

属性を調べるために呼び出されます。 div>または

renderは、Reactで最も一般的に使用されている方法です。 DOMで要素をレンダリングする場合は、ここに要素を記述できるため、render() が楽しみのメソッドです。

呼び出されるたびに、多くのタイプ、つまり文字列、数値、配列、フラグメント、ブール値、またはnull 値、ポータル、またはReact要素。ここにいくつかの例を示します-

class MyComponent extends React.Component {
render() {//return string
return "Hello!!"//return null value in case you don"t want to render anything
return null//return fragments
return
Hello

Friends

//return arrays
return [
Hello
,
World

]; }
}

componentShouldMount メソッドがブール値の

を返す場合、renderメソッドは呼び出されません。

3。 componentDidMount()

このメソッドは、コンポーネントがrender メソッドを介してDOMに挿入された直後に呼び出されます。 。ライフサイクルで1回だけ呼び出されます。

  • サブスクリプションの設定を検討している場合は、これが最適な場所です。ただし、componetWillUnmount()で登録を解除する必要があります。
  • また、リモートからデータを読み込む必要がある場合は、ネットワークリクエストをインスタンス化するのに適した場所です。エンドポイント。
  • ここから

    に電話することもできます。さらにレンダリングが再度トリガーされますが、少なくとも中間状態は表示されません。ただし、パフォーマンスの問題が発生するため、これを使用するときは注意が必要です。実際、必要に応じて、constructor()メソッドで初期状態を割り当てる必要があります。ただし、このアプローチは、サイズに依存するものをレンダリングする前にDOMノードを測​​定する必要がある場合に役立ちます。

✔ライフサイクルメソッドの更新

マウントとは異なりコンポーネントのマウント中に1回だけ発生するフェーズ、更新 フェーズは複数回発生する可能性があります。

更新が必要なコンポーネントのプロパティ/状態に変更があると、タイマーが呼び出します。 render および

が変更を確認、更新、およびレンダリングするために、更新フェーズが開始されます。

1。 static getDerivedStateFromProps()

これは、ライフサイクルの更新フェーズで呼び出される最初のメソッドです。 render メソッドが開始されるたびに呼び出されるため、複数回呼び出すことができます。したがって、マウント段階と更新段階の両方で呼び出されることは明らかです。

この方法はあまり一般的ではなく、特定の場合、たとえば、コンポーネントの状態が時間の経過に伴う小道具の変化によって変化する場合など、めったに使用されません。名前が示すように、小道具から状態を導き出します。

2。 shouldComponentUpdate()

このメソッドは、コンポーネントが再レンダリングされようとしているときに呼び出されます。 states / props の現在の変更がコンポーネントの出力に影響を与えているかどうかを判断します。これはパフォーマンス最適化の手段としてのみ使用され、ブール値true または

shouldComponentUpdate()

メソッドは呼び出されないことを意味します。

shouldComponentUpdateメソッドの動作

ただし、組み込みの

React.PureComponent これにより、新旧のstate / props を比較でき、必要な更新をスキップする可能性が低くなります。

3。 render()

次は

です。呼び出されるかどうかは、shouldComponentUpdateによって返される値によって異なります。 true が返された場合にのみトリガーされます。

4。 getSnapshotBeforeUpdate()

render が呼び出された後、

getSnapshotBeforeUpdate 次に来る。一般的には使用されませんが、DOM内の一部の情報にアクセスして、更新直後に変更する必要がある場合など、特定の場合に非常に便利です。

このメソッドを使用すると、コンポーネントで後で(更新後に)調整できるように、DOMからいくつかの情報(スクロールの高さ)をキャプチャします。ただし、ここでキャプチャされたスクロールの高さは、DOMに更新される前の高さを示していることを理解する必要があります。

引数として、ここに示すように-

getSnapshotBeforeUpdate(prevProps, prevState) {return null;}

5。 componentDidUpdate()

このメソッドは、コンポーネントが更新されて再レンダリングされた直後に呼び出されます。 prevState

をパラメーターとして受け取り、新しく変更された状態や小道具にアクセスすることもできます。

ただし、この関数内で状態を直接設定しないことを強くお勧めします。そうしないと、render

がさらにトリガーされます。

この方法により、更新後のscrollHeight の差を計算できます。

これは、1つのユースケースにすぎません。他にもいくつかあります-

👉サーバーからデータをフェッチするには

👉ReactコンポーネントのDOMノードにアクセスするには

その使用例の詳細を取得するには、公式ドキュメントを確認してください-

React.Component-React

このページには、Reactコンポーネントクラスの詳細なAPIリファレンスが含まれています定義。 「…

reactjs.org

✔アンマウントライフサイクルメソッドに精通していることを前提としています

これは、reactコンポーネントがDOMからマウント解除されて破棄される最後のフェーズです。このフェーズには、ライフサイクルメソッドが1つだけあります。

1. componentWillUnmount()

componentWillUnmountメソッドは、コンポーネントが破棄される直前のアンマウントフェーズで最初に呼び出されます。これは、基本的にネットワークリクエストのキャンセル、タイマーの無効化、またはcomponentDidMount メソッドで作成された不要なサブスクリプションのクリーンアップなどの任意のクリーニングメソッドを実行できる場所です。

概要:

エラーがスローされた場合に呼び出される他のメソッドがいくつかあります。 子孫コンポーネントであるこれらのメソッドは、エラー処理ライフサイクルメソッドと呼ばれます。 それらは

ここにあります。

それがすべてのコーダーでした!! このブログを通じて、Reactコンポーネントのライフサイクルメソッドをよりよく理解していただければ幸いです。別の洞察に満ちたブログですぐにご連絡ください。

まで それでは、お読みください!!🙃

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です