反応を処理するテクノロジー:ライフサイクルメソッド

ライフサイクルメソッド

すべての反応素子にライフサイクルが存在する。コンポーネントの寿命は、ページにログインする前の準備プロセスから始まり、ページから消えるまでです。

プロジェクトを行う場合は、構成部品を最初に登録したり、構成部品を更新したりするときに、いくつかのタスクを処理する必要がある場合があります.また、不要な更新を防止する必要がある場合もあります.
この場合、構成部品のライフサイクルメソッドを使用します.ライフサイクルメソッドは、クラス構成部品にのみ適用されます.Hooks機能を使用すると、関数型構成部品で同様のタスクを処理できます.

ライフサイクルメソッドの理解

ライフサイクルメソッドは9種類あります.Will接頭辞付きの方法は、ある操作の前に実行される方法であり、Did接頭辞付きの方法は、ある操作の後に実行される方法である.この方法は、構成部品クラスで宣言を上書きすることによって使用できます.
ライフサイクルは、マウント、更新、アンインストールのカテゴリに分けられます.何があるかを理解し、大きなトレンドを理解し、一つ一つよく観察します.

マウントマウント

DOMを生成してWebブラウザに表示することをマウントと呼びます.Mountで呼び出す方法は次のとおりです.
構成部品の作成
コンストラクション関数構成部品を新規作成するたびに呼び出されるクラスジェネレータメソッド
getDerivedStateFromPropspropsの値をstateに入れるときに使用する方法
レンダリング準備UIのレンダリング方法
コンポーネントDidMountコンポーネントがWebブラウザに表示された後に呼び出される方法

更新

更新は、次の4つのケースで行われます.

の親コンポーネントから渡された支柱が変化すると、構成部品がレンダリングされます.(Update)

素子自体の状態がsetStateにより更新場合は

である.

親構成部品が再レンダリングされた場合:親構成部品が再レンダリングされた場合、子構成部品も割り当てられたツールまたはそのステータスを変更することなく再レンダリングされます.

this.forceUpdateを使用してレンダリングを強制トリガする場合

更新時に発生した回数:props、ステータス変更、親構成部品ツリーの表示
getDerivedStateFromPropsgetDerivedStateFromPropsはインストール中にも呼び出され、更新開始前にも呼び出されます.propsの変化により、状態値を変更したい場合に使用します.
shouldComponentUpdate構成部品を再レンダリングする方法を決定します.boolean値を返す必要があります.trueの場合、実行を続行するとfalseは再レンダリングを停止します.特定の関数でthisの場合.forceUpdate()関数が呼び出されると、このプロシージャは省略され、render関数がすぐに呼び出されます.
trueまたはfalsetrueを返すとrenderが呼び出され、falseを返すとここで操作がキャンセルされます.
を使用してインポートしたストロークVSラム速度のデータ点を示します.
DOMにgetSnapshotBeforeUpdateコンポーネントの変化を反映する前に呼び出す方法
コンポーネントDidUpdateコンポーネントの更新後に呼び出す方法

Unload Unload Unload Unload Unload Unload Unload Unload Unload Unload

Mountの逆過程は、DOMから素子を除去することである.
componentWillUnmount:コンポーネントがWebブラウザから消える前に呼び出されるメソッド.

ライフサイクルメソッドの表示

前に説明したライフサイクルの方法を一つ一つ詳しく説明しましょう.

render()関数

render() { ... }
renderメソッドは、構成部品の外観を定義します.したがって、コンポーネントで最も重要な方法であり、ライフサイクルメソッドで唯一必要な方法でもあります.
renderメソッドでは道具とこれstateにアクセスして反応元素を返すことができます.要素はdivなどのhtmlタグであってもよいし、単独で分離して作成されたコンポーネントであってもよい.
なお、renderメソッドでは、setStateはイベント設定以外の場所では使用できず、ブラウザのDOMにもアクセスできません.DOM情報をインポートしたり、ステータスを変更したりする場合は、ComponentDidMountで処理する必要があります.

コンストラクタメソッド

constructor(props) { ... }
コンストラクション関数メソッドは、構成部品の作成時に初めて実行される構成部品の作成者メソッドです.初期状態値は、コンストラクション関数メソッドで決定できます.

getDerivedStateFromPropsメソッド

受信したprops値をstateに同期し、構成部品のマウントと更新時に呼び出すために使用します.

static getDerivedStateFromProps(nextProps, prevState){
  if(nextProps.value !== prevState.value){ // 조건에 따라 특정 값 동기화
    return { value: nextProps.value };
  }
  return null // state를 변경할 필요가 없다면 null return
}

ComponentDidMountメソッド