Lifecycle

5997 ワード
React lifecycle テキストリンク
📌 これは反応式の文書と反応を処理する技術を参考にして書いた文章である.
ライフサイクルの方法は9種類あります.一つ一つ見てみましょう...!

マウント


マウント時に発生するライフサイクル.
  • constructor
  • getDerivedStateFromProps
  • render
  • componentDidMount

    • constructor

  • constructor  は、構成部品の作成方法です.
  • 構成部品を作成するときに最初に実行される方法.
    • constructor(props) {
    super(props);
    console.log("constructor");
}

    getDerivedStateFromProps

  • getDerivedStateFromProps  表示  props  受け取りました.  state  中に入れたい時に使います
  • 構成部品のインストールおよび更新時に呼び出されます.
    • static getDerivedStateFromProps(nextProps, prevState) {
    console.log("getDerivedStateFromProps");
    return null;
}

    render

  • 要素をレンダリングする方法.

    • componentDidMount

  • 要素の最初のレンダリング後に呼び出される方法を完了します.

    • 更新


    更新時に発生するライフサイクル.
  • getDerivedStateFromProps
  • shouldComponentUpdate
  • render
  • getSnapshotBeforeUpdate
  • componentDidUpdate

    • getDerivedStateFromProps


    同上

    shouldComponentUpdate

  • shouldComponentUpdate  方法は、構成部品を再レンダリングするかどうかを決定する方法です.
    • shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate");
    return true;
}

    render


    同上

    getSnapshotBeforeUpdate

  • getSnapshotBeforeUpdate  renderで作成された成果物がブラウザに実際に反映される前に呼び出されます.
    • このメソッドが返す値は
  • です.  componentDidUpdate  関数の3番目のパラメータsnapshot.
    • getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    return null;
}

    componentDidUpdate

  • componentDidUpdate  レンダリングが完了し、画面に希望するすべての変更を反映した後に呼び出す方法です.
    • componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate");
}

    インストールされていません


    アンインストールに関連するライフサイクルメソッドは、次のとおりです.  componentWillUnmount  一つだけ.

    componentWillUnmount

  • componentWillUnmount  コンポーネントが画面から消える前に呼び出されます.
    • componentWillUnmount() {
    console.log("componentWillUnmount");
}

    エラー


    componentDidCatch

  • 構成部品をレンダリング中にエラーが発生した場合、エラーUIが表示されます.
    • 要求の発行
    [2 Project]GREAM-パスとのクエリが変更されるたびに最上位へ移動