最終更新:2024-04-17 (水) 17:21:07 (32d)  

React/コンポーネント/ライフサイクル
Top / React / コンポーネント / ライフサイクル

https://ja.reactjs.org/docs/react-component.html#the-component-lifecycle

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

タイミング

マウント

  • コンポーネントのインスタンスが作成されて DOM に挿入されるときに、これらのメソッドが次の順序で呼び出されます。

更新

  • 更新は props や state の変更によって発生する可能性があります。コンポーネントが再レンダーされるときに、これらのメソッドは次の順序で呼び出されます。

アンマウント

  • このメソッドは、コンポーネントが DOM から削除されるときに呼び出されます。
  • componentWillUnmount()

エラーハンドリング

  • static getDerivedStateFromError?()
  • componentDidCatch?()

React/クラスコンポーネント

  • render メソッドは更新が発生した際に毎回呼ばれますが、同一の DOM ノード内で <Clock /> をレンダーしている限り、Clock クラスのインスタンスは 1 つだけ使われます
  • このことにより、ローカル state やライフサイクルメソッドといった追加の機能が利用できるようになります。

React 17以降は非推奨

React 16.3で変更

  • React 17で削除
    タイミング移行先
    componentWillMount?コンポーネントがマウント(配置)される直前コンストラクタを使う
    componentWillReceiveProps?コンポーネントが受け取るpropsが変化した場合getSnapshotBeforeUpdate?
    componentWillUpdate?コンポーネントの再描画前に呼び出されるgetDerivedStateFromProps?

参考