LifeCycle API

Mounting

constructor

このAPIは、新しい構成部品を作成するたびに呼び出される構成関数です.

constructor(props) {
  super(props);
}

componentDidMount

このAPIは、構成部品が作成され、画面上で出力が完了した後に呼び出されます.

componentDidMount() {
  // 외부 라이브러리 연동: D3, masonry, etc
  // 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc
  // DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등
}

主に次の場合に使用されます.

DOMを使用して外部ライブラリをバインドする場合、

DOMのプロパティの読み取りまたは変更が必要な場合、

コンポーネントがaxios、fetch等の要求ajaxを通過するとき、

.

Updating

getDerivedStateFromProps

APIは、パラメータとしてnextProps(props로 받은 값)およびprevState(현재 state의 값)を受信し、propsが受信した値をstateに同期する必要がある場合に使用される.

static getDerivedStateFromProps(nextProps, prevState) {
  // 여기서는 setState 를 하는 것이 아니라
  // 특정 props 가 바뀔 때 설정하고 설정하고 싶은 state 값을 리턴하는 형태로
  // 사용됩니다.
}

shouldComponentUpdate

まず、親構成部品が再レンダリングされると、現在の構成部品の状態が変化しなくても、無条件に子構成部品がレンダリングされます.また、レンダーはrender関数を実行します.
このとき、APIは、true(default)がコンポーネントを呼び出すreder 함수を返し、falseがコンポーネントを呼び出さないようにすることによって、あるコンポーネントが再レンダリング時に生じる不要なレンダリングを制御することができ、パフォーマンスの浪費を低減することができる.すなわち、素子を最適化することができる.

shouldComponentUpdate(nextProps, nextState) {
  // return false 하면 업데이트를 안함
  // return this.props.checked !== nextProps.checked
  return true;
}

getSnapshotBeforeUpdate

APIは、render 함수を実行し、DOMが変化する前に呼び出される.これにより、DOMの変化前の状態を取得し、ここで返される値をコンポーネントDidUpdateの3番目のパラメータとすることができる.

getSnapshotBeforeUpdate(prevProps, prevState) {
    // DOM 업데이트가 일어나기 직전의 시점입니다.
    // 새 데이터가 상단에 추가되어도 스크롤바를 유지해보겠습니다.
    // scrollHeight 는 전 후를 비교해서 스크롤 위치를 설정하기 위함이고,
    // scrollTop 은, 이 기능이 크롬에 이미 구현이 되어있는데, 
    // 이미 구현이 되어있다면 처리하지 않도록 하기 위함입니다.
    if (prevState.array !== this.state.array) {
      const {
        scrollTop, scrollHeight
      } = this.list;
      // 여기서 반환 하는 값은 componentDidMount 에서 snapshot 값으로 받아올 수 있습니다.
      return {
        scrollTop, scrollHeight
      };
    }
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      const { scrollTop } = this.list;
      // 기능이 이미 구현되어있다면 처리하지 않습니다.
      if (scrollTop !== snapshot.scrollTop) return; 
      const diff = this.list.scrollHeight - snapshot.scrollHeight;
      this.list.scrollTop += diff;
    }
  }

componentDidUpdate

APIは、render 함수を実行し、DOMを変更した後に呼び出される.このとき、prevPropsおよびprevStateは変更されており、以前の値を使用するために、getSnapshotBeforeUpdateからsnapshotを使用して戻り値を取得することができる.

componentDidUpdate(prevProps, prevState, snapshot) {
  // DOM 변경 직후 실행할 내용
}

Unmounting

componentWillUnmount

このAPIは、コンポーネントが使用されなくなったときに呼び出されます.プライマリ・レジストリのアクティビティを削除するか、setTimeoutが保留されている場合は、clearTimeoutで削除します.また、外部ライブラリを使用しており、disposeの機能を持っている場合は、ここから呼び出すことができます.

componentWillUnmount() {
  // 이벤트, setTimeout, 외부 라이브러리 인스턴스 제거
}

Error

componentDidCatch

reactはrender 함수でエラーが発生した場合に動作しないため、APIはエラーを制御するために使用される.また、このAPIは、素子自体のrender 함수で発生したエラーを捕捉することができず、素子サブ素子内部のエラーを捕捉することができる.

リファレンス

https://velopert.com/reactjs-tutorials

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram