TIL36.構成部品のライフサイクル

反応コンポーネントの作成(インストール)、修正(更新)、アンロード(アンロード)の手順について説明します.

ライフサイクルは

ライフサイクルとは、構成部品が作成および破棄されるまでの一連のプロセスです.ページをレンダリングする前に、準備プロセスから開始し、ページが消えたときに終了します.ライフサイクルは마운트, 업데이트, 언마운트のカテゴリに分けられます.

Mounting

DOMが生成され、Webブラウザに表示されます.

constructor(props)

コンポーネントを新規作成するたびに呼び出されるクラスジェネレータメソッド.

メソッドをバインドしたり、初期状態を決定したりすることができます.

this.stateを直接割り当てることができる唯一の場所なので、他の方法ではsetStateを使用する必要があります.これらのタスクがない場合は、コンポーネントのコンストラクション関数を実装する必要はありません.

render()

用意されたUIをレンダリングする方法.

は、クラス構成部品において使用されなければならない唯一の方法である.

メソッドでthis.道具とこれstateにアクセスし、反応要素(ラベルまたは他の要素)を返すことができます.

コンポーネントのステータスは変更されず、呼び出されるたびに同じ結果が返され、ブラウザのDOMと直接対話することはできません.

ブラウザと対話する必要がある場合は、コンポーネントDidMountで処理する必要があります.

componentDidMount()

この方法は、1回目のレンダリングが完了すると、ブラウザにコンポーネントが表示され、コンポーネントがマウントされた後に呼び出されます.

は、主にイベント登録、settimeout、setInterval、およびネットワーク要求などの他のJSライブラリ、フレームワーク関数を呼び出したり、非同期タスクを実行したりするために使用されます.

コンポーネントDidMountからデータをロードし、setStateを実行すると、renderが再び呼び出されます.

//componentDidMount 메서드를 이용하여 네트워크 데이터 요청하기
componentDidMount() {
    fetch("http://localhost:3000/data/data.json", {
      method: "GET",
    })
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          commentList: res.data,
          storyList: res.storyInfo,
        });
      });
  }

Updating

stateまたはpropsを変更したときに親コンポーネントを再レンダリングする場合、this.forceUpdateで強制的にレンダリングをトリガするとき.

shouldComponentUpdate(nextProps, nextState)

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

にメソッドが追加されていない場合、デフォルトではtrue値が返されます.条件に基づいてfalseを個別に記述して返すと、render関数は呼び出されず、更新プロセスは停止します.

のパフォーマンスを最適化するには、再レンダリングを防止するためにshouldComponentUpdateを使用します.

componentDidUpdate(prevProps, prevState, snapshot)

レンダリングが完了すると実行されます.簡単に言えば、昔の状態を知る方法です.

パラメータを使用して、以前の値preProps、preStateを問い合わせることができます.

getSnapshotBeforeUpdateで返されるスナップショット値は、3番目の値として返されます.

コンポーネントDidUpdateは、更新直後に呼び出され、最初のレンダリングでは呼び出されません.

コンポーネントを更新する場合、DOMを操作するために使用するか、以前と現在のpropsを比較してネットワーク要求を送信することが望ましい.setStateはすぐに呼び出すことができますが、条件文を指定しないと無限に繰り返される可能性があります.また、追加のレンダリングが発生し、構成部品のパフォーマンスに影響を与える可能性があります.

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

Unmounting

デバイスがブラウザから消えたときに、インストールの逆の手順です.

componentWillUnmount()

コンポーネントがブラウザから消える前に呼び出されるメソッド.

は、この方法内で、タイマのクリア、ネットワーク要求のキャンセル、イベントリスナーの削除などのクリーンアップ動作を実行することができる.

メソッドで終了した構成部品は再レンダリングされないため、コンポーネントWillUnmount内でsetStateを呼び出すべきではありません.