Vue.jsエンジニアのReact入門 - ライフサイクル

Vue.js エンジニアの React 入門。
React の実装方法を Vue.js と対比しながら理解を深めていくシリーズ。

これまでに、以下の内容についてまとめてきたので、参考にどうぞ。

今回は、「ライフサイクル」である。

コンポーネントそれぞれのライフサイクルを理解し、いつ任意の処理を実施すべきか、実装箇所を判断する必要がある。React には、関数コンポーネントとクラスコンポーネントがあり、クラスコンポーネントにのみライフサイクルメソッドが存在する。関数コンポーネントには、ライフサイクルメソッドが存在しないが、フック(hook) を利用することで同様のライフサイクルを実現することができる。

Vue.js

Vue.jsの公式ドキュメントのライフサイクルダイアグラム

メソッド名	説明
beforeCreate	インスタンスの生成前に実行される
created	インスタンスの生成後に実行される
beforeMount	生成されたインスタンスが、DOMにマウントされる前に実行される
mounted	生成されたインスタンスが、DOMにマウントされた後に実行される
beforeUpdate	データが更新されて、再レンダリングされる前に実行される
updated	データが更新されて、再レンダリングされた後に実行される
beforeDestroy	インスタンスが削除される前に実行される
destroyed	インスタンスが削除された後に実行される
errorCaptured	子コンポーネントでエラーが発生した場合に実行される

React

今回は、クラスコンポーネントで使用することができる、React のライフサイクルメソッドを確認する。

Reactの公式ドキュメントのライフサイクルダイアグラム

このダイアグラムを Vue.js のダイアグラムと同じような形に変更してみた。

f:id:serip39:20200716185326p:plain

メソッド名	説明
constructor()	コンポーネントがDOMにマウントされる前に実行される引数：props
render()	DOMにマウントすべきコンポーネントを生成する
componentDidMount()	コンポーネントがDOMにマウントされた後に実行される
componentDidUpdate()	コンポーネントが再レンダリングされた後に実行される引数：prevProps, prevState, snapshot
componentWillUnmount()	コンポーネントが削除される前に実行される
componentDidCatch()	子コンポーネントでエラーが発生した場合に実行される引数：error, info

メソッド名は異なるものの、Vue.js と大体同じライフサイクルがあることがわかる。公式には、「一般的でないライフサイクル」も表示されており、公式ドキュメントでも記載があるように、基本的にはフックを利用することで代替することができる。

その他、Vue.js にはないメソッドは以下が挙げられる。

メソッド名	説明
shouldComponentUpdate()	新しい props または state が受け取られると、レンダリングされる前に実行される。これはパフォーマンスの最適化にのみ有効。バグを引き起こす可能性があるので使用には注意が必要。引数：nextProps, nextState
getSnapshotBeforeUpdate()	全ての要素がDOMにレンダリングされた直後に実行される。この返り値は、componentDidUpdate() のパラメータとして渡される。引数：prevProps, prevState