応答のライフサイクル

リアクションライフサイクルチャート

応答ライフサイクル(LifeCycle)は

リアクションのライフサイクルとは、構成部品の作成、更新、および除去プロセスです.

手順1-作成(マウント)

作成フェーズは、コンストラクション関数によって構成部品が初期化され、レンダリングされた後に最初にDOMで描画されるフェーズです.
作成手順の流れを整理します.

要素の基底状態は、構造関数によって初期化される.

getDerivedStateFromProps(propsとして受信した状態を入れたい場合に使用)

を実行します.

の初期化が完了すると、render()メソッドが実行されます.

は、実際にはDOMに要素をマウントする.

のインストールが完了すると、コンポーネントDidMountメソッドが実行されます.(axios、fetch、DOMのプロパティを読み取り、または直接変更して、構成部品から必要なデータを要求します)
概要:コンストラクション関数->getDerivedStateFromProps->プレゼンテーション->コンポーネントDidMountの順に

を実行

// getDerivedStateFromProps
static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.color !== prevState.color) {
      return { color: nextProps.color };
    }
    return null;
  }

->getDerivedStateFromPropsがオブジェクトを返すと、そのオブジェクトの内容は構成部品の状態に設定されます.nullを返すと何も起こりません.

ステップ2-変更(Update)

構成部品に渡されるpropsまたはstateが変化すると、変更されます.変化が発生すると、反応器は素子を再描画します.
変更段階の流れを整理する.
propsが更新されるか、setState()でステータスが更新されます.
1. getDerivedStateFromProps
2.shouldComponentUpdate(仮想DOMで構成部品を描画するかどうかを決定する方法)
3.既存の構成部品()を再レンダリングします.
4.getSnapshotBeforUpdate(コンポーネントDidUpdate関数から取得し、変更前に返された状態を使用して特定の値を返すことができます)
3.DOMの変更部分を更新します.
4.コンポーネントDidUpdate()メソッドを実行します.
要旨:新しいPropsまたはStateの変更->getDeriveStateFromProps->プレゼンテーション->getSnapshotBeforUpdate->ComponetDidUpdate順に実行

// shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState) {
    // 숫자의 마지막 자리가 4면 리렌더링하지 않습니다
    return nextState.number % 10 !== 4;
  }

->最適化時に使用されるメソッド、応答は変更を仮想DOMに集約しますが、実際のDOMでは変更のみが変更され、shouldComponentUpdateでは仮想DOMの新しいレンダリングを回避できます.

手順3-削除(Unmounting)

DOMに表示されている構成部品を削除すると、削除ステップは、構成部品が消える前にcomponentWillUnmount()を実行します.(DOMに直接登録されているイベントを削除し、settimeoutを使用している場合はcleartimeoutを使用できます.)

サマリ

反応素子には、生成→更新→削除のライフサイクルがあります.作成フェーズでは、コンストラクション関数がstateを初期化し、レンダリング方法を実行して要素をDOMにマウントします.インストールが完了すると、ComponentDidMountというライフサイクルメソッドが実行されます.更新フェーズでは、propsが再転送されるか、ステータス更新時に、再レンダリングが行われると同時にDOMで変化した部分が更新される.更新が完了すると、コンポーネントDidUpdateライフサイクルメソッドが実行されます.最後に、削除ステップでDOMに表示される構成部品がアンインストールされると、コンポーネントDidMount()で作成した操作などをクリーンアップするためのコンポーネントWillUnmontライフサイクルメソッドが、アンインストール前に実行されます.

reference

https://react.vlpt.us/basic/25-lifecycle.html