投稿日:2023/06/13 最終更新日:2023/06/13
なぜReactは2回レンダリングするのか？
Reactは仮想DOM（Virtual DOM）という仕組みを使用して、効率的なUIのレンダリングを実現しています。
Reactがコンポーネントをレンダリングする際には、一見すると2回のレンダリングが行われるように見えることがあります。
この記事では、Reactの2回のレンダリングの仕組みとその目的について詳しく解説します。
初回のレンダリング
Reactのコンポーネントが初めてレンダリングされるとき、Reactは仮想DOMを使用してコンポーネントのUIを構築します。
この初回のレンダリングでは、コンポーネントのpropsやstateの値に基づいてUIを描画します。
2回目のレンダリング
2回目のレンダリングは、初回のレンダリング後に行われます。
Reactは初回のレンダリングで生成された仮想DOMと、現在の仮想DOMを比較します。
この比較により、コンポーネントの状態やプロパティの変更を検出し、実際のDOMに必要な変更のみを適用します。
レンダリングの仕組み
Reactの2回のレンダリングの仕組みは以下の手順で行われます。
- 初回のレンダリング時に、コンポーネントの仮想DOMが構築されます。
- 2回目のレンダリング時に、前回の仮想DOMと現在の仮想DOMを比較し、変更のある部分を特定します。
- 変更のある部分のみを実際のDOMに反映します。
これにより、余分なDOM操作を最小限に抑え、パフォーマンスを向上させます。
npm run devではstateの値をconsole.logで出力すると2回値が表示されることがあります。
これは上記の仕組みを使用しているものであり、オススメはしませんがStrict Modeを解除すると1回の表示のみにすることが可能です。
レンダリングの目的
Reactが2回のレンダリングを行う理由は、以下のような目的があります。
- レンダリングの効率化: 2回のレンダリングにより、必要なDOMの変更のみを行うことで、パフォーマンスを向上させます。
- 正確な変更検出: 2回目のレンダリングでの比較により、正確に変更が検出されます。これにより、不要な再レンダリングを回避し、UIの一貫性を確保します。
- 不正な変数の変更を検出: 破壊的メソッドを使用した場合は仮想DOMと実在DOMとの間に不一致が出ることがあります。その場合はReactの仮想DOMを用いたレンダリングが正しく動作しない場合があるためエラーを出力するようになっています。
まとめ
Reactの2回のレンダリングは、仮想DOMと変更の検出に基づいた効率的なUIの更新手法です。
初回のレンダリングではUIが構築され、2回目のレンダリングでは変更のある部分のみが更新されます。
この仕組みにより、Reactは高速なUIの描画と一貫性のある更新を実現しています。
