レスポンス入力方式-構成部品のライフサイクル

すべての反応器にはライフサイクルが存在する.
ライフサイクルはクラス構成部品にのみ適用されます.

ライフサイクルメソッド

9種類のライフサイクルメソッドがあります.
*接頭辞メソッド

Will接頭辞付き方法:任意の操作の前に実行される方法

Did接頭辞を有する方法:ある操作の後に実行される方法

.
ライフサイクルは、次の3つに分類されます.

をマウント

更新

アンインストール

これからはカテゴリを1つずつ調べていきましょう

マウント

DOMを作成し、Webブラウザにマウントと表示します.
インストールを呼び出す方法は次のとおりです.
1.構成部品の作成
2.constructor:構成部品の作成時に呼び出されるクラスジェネレータメソッド
3.getDervedStateProps:propsの値をstateに入れるときに使う方法
4.レンダリング:UIのレンダリング方法
5.コンポーネントDidMount:コンポーネントをWebブラウザに表示して呼び出す方法

更新

次の4つの場合にのみ、構成部品を更新します.
1.アイテム変更時
2.状態変化時
3.親構成部品を再レンダリングする場合
4. this.forceUpdateを使用して強制レンダリングをトリガーする場合
更新時に呼び出す方法は次のとおりです.
1.更新の原因:props変更、ステータス変更、親構成部品ツリーレンダリング
2. getDerivedStateFromProps
3. shouldComponentUpdate
4. render
5. getSnapshotBeforeUpdate
6. componentDidUpdate

インストールされていません

取り付けとは反対の構成部品をDOMから削除します.
アンインストール時に呼び出す方法は次のとおりです.
1.アンインストール
2. componentWillUnmount

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

ライフサイクルの方法を見てみましょう.

1.render()メソッド

これは素子の中で最も重要な方法である.
*render関数の特性

メソッドでthis.props, this.アクセスstate

反応元素

を返す.
*render関数の注意事項

イベントが設定されていない場所でsetState

を無効にする

ブラウザにアクセスできないDOM

2.コンストラクション関数メソッド

初期状態を構成部品の作成者メソッドに設定できます.

constructor(props){
	...
}

3.getDerivedStateFromPropsメソッド

反応v 16.3以降に作成される新しいメソッド.
propsから受信した値をステータスに同期するために使用します.更新用にマウントされます.

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

4.コンポーネントDidMountメソッド

構成部品を作成し、最初のレンダリングが完了したら実行します.
settimeOutやsetIntervalなどの非同期タスク/ライブラリまたはフレームワーク関数を呼び出すために使用します.

componentDidMount() { ... }

5.shouldComponentUpdateメソッド

propsは、stateを変更したときに再レンダリングを開始するかどうかを指定します.
*shouldComponentUpdate機能
1.true、false値を返す必要があります
2.構成部品を作成するとき、他の設定がない場合はtrueを返します.
3.props、stateはthisです.props, this.ステータス別アクセス
4.nextProps、nextStateを使用して新しいprops、stateにアクセス

shouldComponentUpdate(nextProps, nestState) { ... }

6.getSnapshotBeforeUpdateメソッド

反応v 16.3以降に作成する方法.
ブラウザがrender生成の成果物を実際に反映する前に呼び出す.主に更新前に参照値を使用します.

getSnapshotBeforeUpdate(prevProps, prevState){
	if(prevState.array !== this.state.array){
    	const { scrollTop, scrollHeight } = this.list
        return { scrollTop, scrollHeight };
    }
}

7.コンポーネントDidUpdateメソッド

レンダリングが完了したら実行します.prevProps、prevStateを使用して、構成部品が以前に所有していたデータにアクセスできます.

componentDidUpdate(prevPrps, prevState, snapshot) { ... }

8.コンポーネントWillUnmountメソッド

DOMから構成部品を削除するときに実行します.
イベント、タイマー、または直接作成したDOMをComponentDidMountに登録している場合は、ここで削除操作を行う必要があります.

9.コンポーネントDidCatch方法

構成部品のレンダリング中にエラーが発生した場合にUIを表示する方法.

componentDidCatch(error, info){
	this.setState({
    	error: true
    });
    console.log({error, info});
}

ここでerrorはどのエラーを表示し、infoはコード内のエラーを表示します.
But,この方法では素子自体で発生したエラーをキャプチャすることはできないが,これは自身のthisである.props.サブアセンブリに渡されたエラーのみをキャプチャできます.
参考資料
はんのうぎじゅつ