1.コンポーネントライフサイクルの概要
概要
ライフサイクルメソッドは、クラスベースのコンポーネントに存在するメソッドであり、特定の時点で呼び出されるメソッドである. ライフサイクルメソッドは、構成部品のインストール、更新、およびアンロードの時点によって区分され、8つのメソッドがあります. 要素を生成し、render()法によりReactElementを実際のDOMに戻し、マウントと呼ぶ. propsは、ステータスのデータ変更またはforceUpdate()メソッドを使用して変更コンポーネントを呼び出します.これは更新です.マウント
構成部品を作成してユーザーに表示するプロセス全体をインストールプロセスと呼びます.
上記の図に示すように、このインストール時に呼び出される方法は、次のとおりです.
コンストラクション関数>getDerivedStateFromProps>プレゼンテーション>コンポーネントDidMountが呼び出されます.合計4つのライフサイクルプロシージャが呼び出されます.
更新
マウントされた構成部品が再レンダリングが必要な場合に呼び出されるライフサイクルメソッド.
更新時に呼び出されるメソッドは、次のとおりです.
getDerivedStateFromProps>shouldComponentUpdate>プレゼンテーション>getSnapshotBeforeUpdate>コンポーネントDidUpdateは、5つのライフサイクルプロセスを呼び出します.
更新の特定の状況は次のとおりです.
New Props setState()変更強制更新(*)*非推奨->shouldComponentUpdateをスキップして行います.インストールされていません
コンポーネント表示後に消える前に呼び出す方法.
コンポーネントWillUnmountが呼び出されます.
2.主要コンポーネントのライフサイクル方法
マウント
マウントはreact素子が実際のDOMに挿入されることを意味する
Constructor
constructor(props){
super(props); // 필수코드
this.state = {
counter : 0
}
this.onButtonClick = this.onButtonClick.bind(this);
// 이벤트 메소드 바인딩
}
リファレンス
super()ジェネレータを呼び出す前に、このアイテムは割り当てられません. super()ジェネレータパラメータ、props伝達の目的はジェネレータ内部thisです.propsが近づくようにするためです.進捗タスク
stateを使用する場合、stateの初期化操作は通常ジェネレータによって行われる.(割り当て、初期化...) イベントメソッドがある場合、生成者がイベントメソッドをdissバインド処理して実行する方法があります.全部で4つの方法があります
1. this.onButtonClick = this.onButtonClick.bind(this);イベントメソッドにバインドする方法
<タグonClick={this.onButtonClick.bind(this)}/>通常、イベント発生時にバインディングを指定する方法<タグonClick={()=>{}矢印機能を使用して、バインドメソッドを別途呼び出す必要はありません. auton-bindライブラリを使用
componentDidMount
進捗タスク
データロード、サーバへデータを読み出す動作を行い、状態に入ったデータの動作を設定します. レンダリング方法、実際の実際のドームに呼び出し、マウント後すぐに呼び出します.データの貼り付け
更新
getDerivedStateFromProps
進捗タスク
propsから状態を同期したい場合に使用する方法です. は2つのパラメータ(nextProps,prestate)を受け入れる.
propsをstate値と比較し、新しいstate値を設定します.shouldComponentUpdate
進捗タスク
主に
のパフォーマンスを向上させるために使用されます.は、
trueまたはfalseを返します. trueまたはfalseを返す条件は、以前に所有していた構成部品が持つstate、propsおよびshouldComponentUpdateのパラメータnextPropsおよびpresStateが同じかどうかによって、trueまたはfalseを返します. Pureコンポーネントが再定義されているshouldComponentは、単純な比較です.getSnapshotBeforeUpdate
進捗タスク
ドームが変化する前に、前の状態をもたらすために使用されます. getSnapshotBeforeUpdateが返す値は、コンポーネントDidUpdateメソッドを呼び出すときに3番目のパラメータとして渡されます.ソース:
https://www.youtube.com/watch?v=n8PtYzWgvLE&list=PLOSNUO27qFbtYC5oRwJVsNavcPEI5uoiJ&index=16