コンポーネントのライフサイクル

朝活 日報 りあクト

コンポーネントのライフサイクル

初期化され、マウントされ、レンダリングされ、再レンダリングされ、アンマウントされ…というサイクルのなかで、

それぞれのフェーズに介入して処理を差し込むメソッドが用意されている。

Mounting フェーズ

  • constructor [void]
  • static getDerivedStateFromProps(props, state) [State | null]
  • render() [React.ReactNode]
  • componentDidMount() [void]

Updating フェーズ

  • static getDerivedStateFromProps(props, state) [State | null]
  • shouldComponentUpdate(nextProps, nextState) [boolean]
  • render() [React.ReactNode]
  • getSnapshotBeforeUpdate(prevProps, prevState) [Snapshot | null]
  • componentDidUpdate(provProps, prevState, snapshot?) [void]

Upmounting フェーズ

  • componentWillUnmount() [void]

Error Handling フェーズ

  • componentDidCatch(error, info) [void]
  • static getDerivedStateFromError(error) [State]

こうして見てみるとだいたい「メソッド名で何ができそうか」見当がつきますねぇ。 こういうのがあるよ、というのはまず覚えておく。

本文中に、ライフサイクルのなかで各フェーズとそれぞれのメソッドがどういう順番に呼ばれるかが表現された図があって、わかりやすかったです。

React コンポーネントのライフサイク ルって、バージョン 16.3 から 17 にかけて大きな変更が予定されててね

おっと。インターネットの便利情報では16系のメソッドが使われている可能性があるので、注意しましょう。