「React Journey」から学ぶ React のレンダリングの仕組み

はじめに 「React Journey」 と呼ばれる React においてコンポーネントがブラウザに表示されるまでどのようなプロセスを踏むのか？を示した図 が非常にわかりやすかったので、説明を加えながらみなさんに紹介したいと思います。 レンダリングの流れについて理解が曖昧な人は、ぜひ最後までご覧ください。 対象読者 ある程度 React を触っているが、もっとレンダリングについて理解したい人 公式ドキュメントの「レンダーとコミット」や「state はスナップショットである」などを読んだことがない人 React における「レンダリング」について 本題に入る前に、React を学習していると混乱しやすい「レンダリング」と呼ばれる概念をまず整理しておきましょう。 以下の記事にも書いてありますが、「レンダリング」という言葉はしばしば次の２種類の意味で使用されます。 ブラウザへ画面を表示させること