ライフサイクルのリカバリ

リファレンス

反応ライフサイクルとは?

反応器は素子ベースのビューを中心としたライブラリである.したがって、各構成部品には、1つのライフサイクル、すなわち構成部品のライフサイクルが存在する.コンポーネントの寿命は、通常、ページレンダリングの準備中に開始され、ページが消えたときに終了します.

ライフサイクル分類

ライフサイクルは上の図のように9つ存在します.
そして3つのタイプに分けることができます.

マウント(作成時)

更新(更新時)

アンインストール

(アンインストール時)

インストールは、DOMを作成してWebブラウザに表示することを意味し、逆も同様です.
更新セクションに注意してください.更新は次の4つの場合に発生します.

道具変換時

状態遷移時

親構成部品の再レンダリング時

this.forceUpdateを使用してレンダリングを強制トリガする場合

ライフサイクルメソッド

1. constructor

コンストラクション関数(コンストラクション関数)はjavaと同様に、構成部品の作成時に初めて実行されます.この方法では、初期状態を決定できます.

// class
class Example extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 };
}
//Hooks
const Example = () => {
  const [count, setCount] = useState(0);
}

2. shouldComponentUpdate

この方法はpropsまたはstateを変更するときに、再レンダリングするかどうかを決定する方法です.このメソッドはtrueまたはfalseを返さなければなりません.
この方法はパフォーマンスの最適化にのみ使用されます.レンダリングを防止するために使用すると、エラーが発生する可能性があります.

3.render

これは最も基礎的な方法であり、最も重要な方法でもある.これは、構成部品をレンダリングするために必要な唯一の必須方法です.関数型構成部品では、レンダーせずに構成部品をレンダーできます.

// Class
class Example extends React.Component {
  render() {
    return <div>컴포넌트</div>
  }
}

// Hooks
const example = () => {
  return <div>컴포넌트</div>
}

4.getSnapshotBeforeUpdate

このメソッドは、renderが生成した結果が実際にブラウザに反映される前に呼び出されます.

5.componentDidMount

この方法は、構成部品を作成し、最初のレンダリングが完了した後に実行されます.関数型Hooksでは、UseEffectを利用して次の機能を実現できます.

// Class
class Example extends React.Component {
    componentDidMount() {
        ...
    }
}

// Hooks
const Example = () => {
    useEffect(() => {
        ...
    }, []);
}

データのインポート、サブスクリプションの設定から、反応素子を手動で変更するDOMまで、これらはすべて副作用です.
Reactionのclassライフサイクルメソッドに精通している場合は、UserEffect HookをコンポーネントDidMountとコンポーネントDidUpdate、コンポーネントWillUnmountの組合せと見なすことができます.

6. componentDidUpdate

これはレンダリングが完了した後に実行されます.更新終了後ですので、DOMに関する処理を行ってみてはいかがでしょうか.

// Class
class Example extends React.Component {
    componentDidUpdate(prevProps, prevState) {
        ...
    }
}

// Hooks
const Example = () => {
    useEffect(() => {
        ...
    });
}

7. componentWillUnmount

この方法はDOMから構成部品を削除するときに実行されます.ComponentDidMountにイベントが登録されている場合は、ここで削除操作を行う必要があります.この方法は、関数型要素において、userEffect CleanUp関数によって実現することができる.

// Class
class Example extends React.Component {
    coomponentWillUnmount() {
        ...
    }
}

// Hooks
const Example = () => {
    useEffect(() => {
        return () => {
            ...
        }
    }, []);
}

8. componentDidCatch

最後に、一番上の写真では見えませんが、componentDidCatchという方法があります.この方法では、コンポーネントレンダリング中にエラーが発生した場合に、アプリケーションがエラーUIを表示し続けることができます.

// Class
class Example extends React.Component {
  componentDidCatch(error, info) {
    console.log('에러가 발생했습니다.')
  }
}

の最後の部分

これにより、反応器のすべてのライフサイクルが理解されます.最近使用されている関数型素子はクラス素子を用いるよりも多く,反応型素子を用いてライフサイクルを実現することが実務の核心となっている.しかし、まだ類素子で反応しているところもあるので、必ず知っておく必要があります.