LifeCycle API

ライフサイクルAPIはライフサイクルです.
コンポーネントは、コンポーネントがブラウザに表示、更新、または消去されるときに、中間プロセスでアクションを実行する場合に使用されます.

Mounting

コンポーネントがブラウザに表示されると.
コンポーネントがブラウザに最初に表示されたときに最初に実行される関数.
constructor
構成要素が持つ状態の初期設定が、構成要素の作成中に事前に実行する必要がある操作がある場合は、コンストラクション関数によって処理されます.
getDerivedStateFromProps
propsで受信した値をステータスに同期する場合は、この値を使用します.
MountingもUpdateも使用しています.
render
どのようなDOMが作成され、内部のタグにどの値が渡されるかを定義します.
componentDidMount
実際にブラウザに表示された場合に呼び出されます.主に外部ライブラリ(グラフライブラリなど...)使用する場合は、特定のDOMでグラフを描くなどのコードを記述できます.
あるいは、コンポーネントDidMountは、ネットワーク要求、API、ajax要求が必要な場合にもこれらの要求を処理する.
コンポーネントが現れ、数秒後に何かをしようとするときに使用します.
つまり、作成したコンポーネントは、ブラウザが表示されたときに何をするかを示します.

Updating

素子のprops、stateが変化すると.
shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {}

次の受信するpropsと次の受信するstate値をパラメータとして受信します.
構成部品の更新のパフォーマンスを最適化します.
親構成部品が再レンダリングされると、子構成部品もすべて再レンダリングされます.(実際の画面では変更された部分のみが再レンダリングされますが、その前に仮想DOMではすべての部分が再レンダリングされます.仮想DOMと実際のDOMを比較することで、変更された部分のみが描画されます.)
しかし、この仕事は時として不便になることがある.なぜなら、数百個または数千個のコンポーネントがある場合、仮想DOMも再描画を減らしてパフォーマンスを最適化する必要があるからです.
したがって、shouldComponentUpdateはtrue値とfalse値を返すことができます.レンダリングはtrue値が返された場合にのみ続行し、false値が返された場合には停止します.
つまり、仮想DOMを再レンダリングするかどうかを決定します.shouldComponentUpdate関数が無効な場合、デフォルトではtrueが返されます.
getSnapShotBeforeUpdate
レンダリング後にレンダリングされる成果物は、ブラウザで呼び出された関数に反映されます.
レンダリング後の更新前のスクロール位置、対応するDOMのサイズなどの情報を事前に取得する必要がある場合に使用します.
componentDidUpdate
構成部品の更新時に呼び出される関数.
stateが変更されると、どのような仕事をするかを示すために使用されます.
例)
getSnapShotBeforeUpdateを使用して、更新前のスクロール位置とスクロールサイズを取得し、これらの値をコンポーネントDidUpdateの3番目のパラメータとして返し、これらの値に基づいて画面のスクロール位置を設定して、私たちが見ている位置を維持することができます.

Unmounting

コンポーネントがブラウザから消えたとき.
compoentWillUnmount
構成部品の消失中に呼び出された関数.componentDidMountで設定したリスナーを消去します.

コードを通じてライフサイクルAPIを理解しましょう

https://codesandbox.io/s/xl313zyrkwで実習します.
特定のDOMを使用する場合は、refを使用します.DOMにidを追加するのと同じです.DOMの参照は直接得ることができる.

<div  ref={(ref) => (this.myDiv = ref)}>
...
</div>

componentWillReceiveProps
v16.3から使用していません.
代わりにgetDerivedStateFromProps()です.
getDerivedStateFromProps( )
getDerivedStateFromPropsは静的値でなければなりません.nextPropsおよびprevStateはパラメータとして使用されるべきである.

nextProps:インポートするprops値.

prevState:現在の更新前の状態を取得します.

構成部品エラー

componentDidCatch
エラーが発生した構成部品の親構成部品で使用する必要があります.
私たちがうっかり捕まえられなかった間違いを捕まえるために使います.

componentDidCatch(error, info) {
  console.log(error);
  console.log(info);
}

error:エラーが発生したことを示します.

info:エラーが発生した場所を示します.

エラーが発生した場合は、ブラウザ画面にエラーのみが表示されます.このようにすると、ユーザーの立場から見るとエラーのみであり、エラー防止のためにstateにerrorの値を入力してください.

import React, { Component } from 'react';
import MyComponent from './MyComponent'; 
// MyComponent에서 에러가 발생한 상태.

class App extends Component {
  state = {
    counter: 1,
    error: false
  };

  componentDidCatch(error, info) {
    this.setState({
      error: true
    });
    //  API를 통해서 서버로 오류 내용 날리기 등의 기능을 작성할 수 있다.
  }

  constructor(props) {
    super(props);
    console.log('constructor');
  }
  componentDidMount() {
    console.log('componentDidMount');
    // console.log(this.myDiv.getBoundingClientRect()); // 특정 DOM의 크기를 볼 수 있다.
  }
  handleClick = () => {
    this.setState({
      counter: this.state.counter + 1
    });
  };
  render() {
    if (this.state.error) {
      return <div>에러가 났어요!</div>;
    }
    return (
      <div>
        {this.state.counter < 10 && <MyComponent value={this.state.counter} />}
        <button onClick={this.handleClick}>Click Me</button>
      </div>
    );
  }
}

export default App;

ライフサイクルAPIリファレンスドキュメント