LifeCycle API

このapiは、コンポーネントがブラウザに表示、消失、更新されたときに呼び出されるapiです.とても重要なキャラクターです!

構成部品の初期作成

まず、コンポーネントがブラウザに表示される前に、いくつかのAPIが呼び出されます.

constructor

constructor(props) {
  super(props);
}

このセクションは、構成部品ジェネレータ関数です.新しい構成部品を作成するたびに関数が呼び出されます.
componentWillMout

componentWillMount() {

}

このapiは、私たちの画面にコンポーネントが表示される前に呼び出されたapiです.このapiをあまり気にする必要はありません.もともとは主に非ブラウザ環境で呼び出す(サーバ側)ために使用されていたが、apiは不要であるためreactive v 16である.3では、このapiは廃棄され、以前にこのようなapiが使用されていた.やってみればわかる.v16.3以降はUNSAFE componentWillMount()を使用します.
以前このapiで行ったことは,上のコンストラクション関数と以下で議論するコンポーネントDidMountで完全に処理できる.

componentDidMount

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

このapiは、私たちのコンポーネントが画面に表示されたときに呼び出されます.ここで、axios、axios、fetch、axios、ajaxリクエスト、DOMプロパティの読み取り、または直接変更はfetchなどで行います.

構成部品の更新

素子の更新はPROPSの変化と状態の変化に依存する.更新する前に、どのapiが呼び出されるかを見てみましょう.

componentWillReceiveProps

componentWillReceiveProps(nextProps) {
  // this.props 는 아직 바뀌지 않은 상태
}

このapiは、コンポーネントが新しいpropsを受信したときに呼び出されます.このスキームでは,stateがpropsによって変化する論理を主に記述する.新しく受け取ったpropsはnextPropsでクエリーできます.この場合、this.Propsが更新前のapiであることを確認するには、「
このapiもv 16です.3から廃棄されます.v16.3から始まります.
UNSAFE componentWillReceiveProps().また、場合によっては、この機能は新しいAPI getDerivedStateFromPropsに置き換えられる可能性があります.

[NEW] static getDerivedStateFromProps()

この関数はV 16です.3以降に作成されるライフサイクルAPI.このAPIは、受信したprops値を状態同期する必要がある場合に使用される.

static getDerivedStateFromProps(nextProps, prevState) {
  // 여기서는 setState 를 하는 것이 아니라
  // 특정 props 가 바뀔 때 설정하고 설정하고 싶은 state 값을 리턴하는 형태로
  // 사용됩니다.
  /*
  if (nextProps.value !== prevState.value) {
    return { value: nextProps.value };
  }
  return null; // null 을 리턴하면 따로 업데이트 할 것은 없다라는 의미
  */
}

shouldComponentUpdate

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

このapiは素子の最適化に非常に有用である.前回、Reactionは変化した部分のみ更新していたので性能は非常に良かったのですが、変化した部分のみ検出するためにはVirtual DOMで一度描画する必要がありました.
つまり、現在の構成部品のステータスが更新されていなくても、親構成部品が再レンダリングされると、子構成部品がレンダリングされます.ここで、レンダー(Render)はrender()関数を呼び出すことを意味します.
変化がなければ当然DOM操作も行わない.Virutal DOMでレンダリングするだけです.これは大きな作業ではありませんが、レンダリングされたコンポーネントが多すぎると、物語が少し異なります.CPUリソースの使用は事実ですから.
これらの不要なCPU処理量を減らすために、shouldComponentUpdateを作成し、不要な場合に仮想DOMを再レンダリングしないようにします.
(続き)