React Life Cycle

React Life Cycle

React Componentは、親コンポーネントから受け取ったpropsを入力とし、Reactを構成する最小単位Elementを出力とする関数です.
Reactを使用すると、ユーザーは画面に各コンポーネント単位でUIを表示し、他のUIに置き換え、現在表示されているUIを画面から削除できます.したがって、各コンポーネントにはライフサイクル(Life Cycle)があり、作成->更新->削除フェーズの順に実行されます.

マウント(作成)

新しいコンポーネントはいつ作成されますか?
コンポーネント関数を実行し、成果物の要素を仮想DOMに挿入し、実際のDOMを更新するプロセス.

import React, { Component } from 'react';

class Login extends Component{

}

constructor

最初は、コンポーネントがマウントされる前に実行されます.

this.state宣言/初期化状態値

各種イベント処理Binding

class Login extends Component{
	
    constructor(props){
    	super(props);
        
        this.state = {
        	isLogin = true,
            userInfo = null
        };
        this.handleBtnClick = this.handleBtnClick.bind(this);
    }
}

コンストラクション関数を定義する際に注意すべき点は、次のとおりです.
1.コンストラクション関数を使用する目的がない場合は、コードを記述する必要はありません.
2.コンストラクション関数を使用する場合は、super(props)を呼び出す必要があります.propsを定義します.エラーが発生する可能性があります.
3.コンストラクション関数の内部でsetStateなどの更新を実行しないでください.必要に応じてstateで定義できます.マウント前に更新するのは望ましくありません.
すなわち、マウント前にコンストラクション関数は、予め決定された状態を決定しなければならない.そうしないと、マウント後にsetStateを介して行わなければならない.

render

render()は、最終的にコンポーネントで動作する成果物を返す方法です.したがって、コンポーネントであれば、それが必要です.

ReactElement:通常JSXで記述されています.

render(){
	return (
    	<div>
        	<header className="title">
            	Hanjun Blog
            </header>
        </div>
    );
}

->成果物の要素が仮想DOMにマウントされ、実際のDOMに更新されます.

Fragments:<>構文など.

render() {
  const targetLists = lists.map((el, index) => {
    return (
      <button key={index} type="button">
        {el}
      </button>
    );
  });

	return (
		<>
			{targetLists}
		</>
	);
}

Boolean or Null:戻り構文にBoolean値またはNull値が含まれている場合は、何も表示されません.

render () {
  return (
  	{isRight && <Logout />}
  );
}

String or Number:return構文String値またはNumber値の場合、DOM上のテキストノードとしてレンダリング

レンダリングの注意

render()メソッドは純粋なメソッドでなければなりません(入力が同じ出力でなければならないことを示します)

render()メソッドではsetStateは使用できません.無限ループに陥る.setStateが実行されると更新されて再表示され、setStateが再実行されて再表示されます...

componentDidMount

componentDidMount()は、構成部品の成果物がDOMにロードされた後に実行される方法である.

DOMノードはチェックと初期化が必要です.
-ex)インストール後、モードやツールチップなどの寸法や位置を確認する必要がある場合

外部データのロードまたはネットワーク要求の送信が必要な場合

すぐにComponentDidMountでsetStateを実行すると、レンダリングが完了し、再更新されて再びレンダリングされます.ただし、この場合、ユーザは2回実行するレンダリングプロセスを見ることができません.これは、画面がブラウザにリフレッシュされる前に実行されるためです.
ただし、このような2回のレンダリング処理では、パフォーマンスに問題が発生する可能性があるため、注意が必要です.必要でない場合は、最初に実行されたコンストラクション関数(constructor)で設定します.

更新

ステータスまたはアイテムが変化すると、コンポーネントが更新され、再表示されます.
入力によって出力が異なります.また、親コンポーネントが更新されると、子コンポーネントも再マウントされます.
componentが更新されると、メソッドは次の順序で実行されます.

New Props/setState()

render()

componentDidUpdate()

New Propss

親コンポーネントから更新されたpropsを受信する場合があります.更新propsを受信したコンポーネントが再レンダリングされ、更新サイクルが実行されます.

setState

コンポーネントはsetState()APIを共通に提供します.この方法では、現在のステータスを変更できます.setState()apiを使用すると、stateは更新サイクルを行います.

componentDidUpdate

componentDidUpdateは、更新完了とレンダリング完了後に実行する方法です.
初回マウント時には動作しません.componentDidUpdateは3つの因子を受け入れる.componentDidUpdate(prevProps, prevState, snapshot)

prevProps:更新前にpropをパラメータとして受け入れることができます.これは、以前のpropsと変更したかどうかを判断し、他のアクションを設定するのに役立ちます.

componentDidUpdate(preveProps){
	if(this.props.Id !== prevProps.Id){
    	fetchData(this.props.Id);
    }
}

prevState:更新前にステータス情報をパラメータとして受信できます.

componentDidUpdate(preveProps, prevState){
	if(this.state.Id !== prevState.Id){
    	fetchData(this.props.Id);
    }
}

snapshot:getSnapshotBeforeUpdate()メソッドを実装すると、3番目のパラメータを使用してsnapshotを受信できます.

ComponentDidUpdateを使用する場合はsetStateに注意してください.条件文などで制御しないと無限ループに陥るからです.
setState > componentDidupdate > SetState ...

Unmount(削除)

対応するコンポーネントがDOMから削除されたときに実行されるlifeCycle.

componentWillUnmount

最終的にはクリアされる前に実行されます.コンポーネント内のネットワークリクエスト、タイマイベントなどの持続的なイベントを無効にします.
たとえばsetIntervalメソッドが実行され、オフにしないとグローバルにタイマに戻ります.したがって、クリアされる前に、これらを解除しなければならない.