Hooks時代のReactライフサイクル完全理解への道

はじめに これはクラスコンポーネントのライフサイクルを理解した上で、それに対応するように関数コンポーネントのライフサイクルを理解しようという試みです。 厳密にはReactのライフサイクルはクラスコンポーネントと関数コンポーネントそれぞれで違う概念を持っているようで、それぞれのライフサイクルに紐付けて考えるという行為自体がナンセンスな可能性がありますが、理解の手助けになれば幸いです。 そのため、なるべくわかりやすくするために、厳密でない言い方をすることがあります。ご了承ください。 もし明らかにまずい言い回し、もしくは間違って認識しているものがある場合はコメントにて教えていただけると嬉しいです。 モチベーション 僕はReactの経験がクラスコンポーネントはちょっとだけ書いたことがあるくらいで、ほぼ関数コンポーネント×hooksから入ったようなもなのでいまいちライフサイクルが理解できていない。

[roshi]

記事と合わせてReact日本語サイトメンテナーの方のコメントが参考になった。

[hajimepg]

“constructorはマウント時にしか呼ばれないが、initializeは更新時にも呼ばれる ”

[yasu-log]

レンダリングと描画の違いについて、コメント欄で説明されています。Reactのレンダリングと描画を混在して認識している人が多いので、参考になるでしょう。

[maecchi]

Hooksの良い復習になりそうです。

[tofu-kun]

コメント欄もあわせて読みたい

[nao-bt]

自分の理解度を確かめられるいい記事でした。ありがとうございました。

[mayumayu_nimolove]

vueだとこの辺のところ理解しやすいけどreactは理解しにくい。vueならdataで済む状態管理もuseStateとか言うとっつきにくい方法だったり。でもnext使いたいから使わざるを得ない

[kvx]

はい