[レスポンス]ライフサイクル

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

ライフサイクルとは?

コンポーネントを処理するライフサイクル、すなわちライフサイクルは、プログラマによってコンポーネントの一連の発生、変化、および消失を制御するプロセスを指す.

ライフサイクル

構成部品のマウントの開始

-構築クラス作成者

クラス構成部品の作成であるため、まずコンストラクション関数を呼び出します.

constructor(props){ 	
 super(props);
 this.state={};
}

ジェネレータでsuper(props)を使用する理由

-実際にロードされたrender

ジェネレータを呼び出した後にrenderメソッドを呼び出します.renderメソッドの呼び出しに伴い、JSXはHTMLに変換され、私たちが見ているWebブラウザに表示されます.renderメソッドはstate,propsの更新時にも機能する.したがって、renderメソッドではsetStateまたはpropsのメソッドを変更することは避けなければならない.

-最初のロードが完了した後に実行されるコンポーネントDidMount

この方法は、インストールの最後の部分として、レンダリング方法のすべての部分がブラウザに表示されている場合にのみ実行されます.このメソッドは、構成部品のデータが更新されても再実行されません.したがって、DOMはComponentDidMountメソッドで直接操作できます.(ただし、反応器はDOMを直接操作することは少ない.)

構成部品の更新

-state,propsの変更

リアクターは、現在の素子にstateまたはpropsの変更があるかどうかを判断します.

-データが変更されたため、変更が表示されます。

反応器は変化を検出し、変化した部分を再現します.

-変更完了後に実行されるコンポーネントDidUpdate

構成部品の変更が完了したときに実行する方法.この方法は、renderメソッドを実行した後、更新されたstate、props、および更新前のstate、propsを使用して比較できる、やや複雑なタスクを実行するために最適化された方法です.

構成部品の削除

-構成部品を削除するときに実行される構成部品WillUnmount

構成部品が消失したときに実行する方法.素子に割り当てられた様々な変数を解放できます.

クラスライフサイクルの例

import React from "react";

class LifecycleEx extends React.Component {
  // 가장 먼저 실행되는 생성자
  constructor(props) {
    super(props);
    this.state = {
      cat_name: '나비',
    };
    console.log('in constructor!');
  }
  
  // state 업데이트
  // componentDidUpdate()를 보기 위해 사용, 
  changeCatName = () => {
    this.setState({cat_name: '바둑이'});
    console.log('고양이 이름을 바꾼다!');
  }
  
  // 처음 로딩이 끝난 뒤 수행
  componentDidMount() {
    console.log('in componentDidMount!');
  }

  // 컴포넌트의 변경 완료 뒤 수행
  componentDidUpdate(prevProps, prevState) {
    console.log(prevProps, prevState);
    console.log('in componentDidUpdate!');
  }

  // 컴포넌트 삭제 시 수행
  componentWillUnmount() {
    console.log('in componentWillUnmount!');
  }

  // 실제 로딩이 이루어지는 부분
  render() {
    console.log('in render!');
    return (
      <div>
        <h1>제 고양이 이름은 {this.state.cat_name}입니다.</h1>
        <button onClick={this.changeCatName}>고양이 이름 바꾸기</button>
      </div>
    );
  }
}

export default LifecycleEx;