hooksの登場により、classコンポーネントにしかなかった機能が使えるようになり、あらゆる場面で関数コンポーネントを使えるようになりました。
とはいえ、いきなりclassコンポーネントに関する事項を飛ばしてhooksの内容を学習するのはお勧めできません。classコンポーネントの学習から始め、classコンポーネントにおけるライフサイクルメソッドなどの概念を理解してからのほうがhooksの学習に入った際にスムーズに理解できると思います。1
そこで、ここではclassコンポーネントのライフサイクルメソッドについてまとめます。
（尚、ここではshouldComponentUpdateなどの使用されるケースが稀なものは除いています。）
ライフサイクルについて
コンポーネントには、画面上に表示され、再レンダリング（更新）を何度か経て、やがて表示されなくなるまでの流れがあります。この一連の流れがライフサイクルと呼ばれるもので、この流れは3つの期間に大別できます。
マウント時（Mounting）
コンポーネントが画面上に表示されるまでの期間にあたります。この期間では、constructor、render、componentDidMountの主に3つが呼ばれます。
constructor
最初に呼ばれます。後述のrenderメソッドと同様、画面にコンポーネントが表示される前に呼び出されます。stateの初期化などはここで行います。ただし、ここでsetStateメソッドを呼び出してはいけません。尚、データの読み込みもここで行うことは可能ですが、後述のcomponentDidMountで行うことが推奨されています。
render
renderメソッドは、唯一定義が必須となっています。このメソッドが呼ばれると、JSXの内容がDOMに追加され、コンポーネントが画面に表示されます。これが初回のレンダリングになります。
componentDidMount
初回レンダリング後に1度限りで呼ばれます。データの読み込みなどはこちらで行います。
更新時（Updating）
stateが更新されたり、親から新たなpropsを受け取ったりした場合に、この期間で再レンダリングされ、更新されます。以下のrender→componentDidUpdateというこの期間の流れは、コンポーネントが表示されなくなるまでの間、更新が必要になる度に繰り返されます。
render
マウント時に呼ばれたrenderメソッドですが、ここで再び呼ばれ、再レンダリングが行われます。
componentDidUpdate
コンポーネントがアンマウントされる（コンポーネントがDOMから削除され、画面に表示されなくなる）までの間、コンポーネントの再レンダリングが起こった（renderメソッドが呼ばれた）度に呼ばれます。
マウント解除時（Unmounting）
他のコンポーネントを表示するなどの理由により現在のコンポーネントが表示されなくなる（マウントが解除される）ことになったときがこの期間です。
componentWillUnmount
マウント解除時に1度限りで呼ばれます。ここでネットワークリクエストのキャンセルなどを行います。
その他のメソッド
以上の他にも、shouldComponentUpdate、getDerivedStateFromProps、getSnapshotBeforeUpdateといったものがあります。
しかし、これらは滅多に使われないものなので、初めは以上の5つのメソッドを理解できていれば良いと思います。
-
この理由の1つに、hooksのuseEffectがあります。useEffectは、classコンポーネントのライフサイクルメソッドに相当する機能であり、ライフサイクルメソッドを理解していればuseEffectも理解しやすいです。私はReactを学習するのにUdemyの講座「 Modern React with Redux [2020 Update] 」（ https://www.udemy.com/course/react-redux/ ）を利用しました。この講座でも、先述の理由から、classコンポーネントの解説がhooksの解説に先行しています。正しい順序で効率的にReactを学習するのにお勧めです。 ↩