TIL-ライフサイクルメソッド

2530 ワード

テキストリンク

コンポーネントはいつレンダリングされますか?

道具変換時

状態遷移時

親構成部品の再レンダリング時

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

render(){...}

要素の外観を定義することは、ライフサイクルメソッドで唯一必要なメソッド

である.

this.道具とこれアクセス可能state、反応元素

を返す

プレゼンテーションプログラムでsetStateを使用することもブラウザDOMにアクセスすることもできません.
stateを変更する場合は、ComponentDidMountで処理する必要があります.

constructor(props){...}

ジェネレータメソッドを使用して初めて構成部品を作成したときに実行します.初期状態.

getDerivedStateFromProps(nextProps, prevState){...}

反応v 16.3以降、新しく作成されたライフサイクルメソッドは、受信した値をpropsとします.
同期に使用します.構成部品のインストールと更新時に呼び出されます.

componentDidMount(){...}

構成部品の最初のレンダリングが完了したら実行します.JavaScriptライブラリ、呼び出しフレームワーク内の関数、登録イベント、タイムアウトの設定、Intervalの設定、ネットワークリクエストなどの非同期タスクを処理できます.

shouldComponentUpdate(nextProps,nextState){...}

propsまたはstateを変更したときに再レンダリングを開始する方法を決定します.

はtrueまたはfalseを返さなければなりません.

デフォルトでは、

がこのメソッドを作成していない場合、trueは無条件に返されます.falseを返すと、更新プロセスが停止します.

この方法では、現在のpropsおよびstateはthisである.道具とこれnextPropsとnextStateで新しいpropsまたはstateにアクセスできます.

プロジェクトのパフォーマンスを最適化すると、再レンダリング時に偽の値が返されないように、状況に合ったアルゴリズムを作成できます.

反応v 16.3以降に作成する方法.ブラウザがrender生成の結果を実際に反映する前に呼び出す.3番目のパラメータsnapshot値は、ComponentDidupdateから受信できます.
主に更新前に参照値を使用します.

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

レンダリングが完了したら実行します.更新が完了した初日なのでDOM処理は不要です.

PreviewPropsまたはPreStateを使用して、コンポーネントが以前に所有していたデータにアクセスします.

DOMから

素子を削除するときに

を実行する.

に登録されているイベント、タイマー、および直接作成されたDOMを削除します.

応答v 16から導入され、要素レンダリング中にエラーが発生した場合、アプリケーションはエラーUIを表示することができ、割り込みを生じない.

素子自体で発生したエラーはキャプチャできません.props.childerに渡された構成部品で発生したエラーのみをキャプチャできます.

この問題について(TIL-ライフサイクルメソッド), 我々は、より多くの情報をここで見つけました https://velog.io/@choel0304/TIL-라이프사이클-메서드

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol