Reactのレンダリングについて学ぶ

こんにちは、技術部のYです。

今回はReactのレンダリングについて、簡単な流れをご紹介します。
一般的なレンダリングと言うとDOMへの変更（画面描写）が思い浮かびますが、Reactでは違う処理を指している、という内容になります。

Reactの公式では、レンダリングは以下の処理が含まれていると説明されています。

1. Triggering a render （トリガーのキャッチ）
2. Rendering the component （コンポーネントのレンダリング）
3. Committing to the DOM （DOMへコミット）

順を追って解説していきます。

1. Triggering a render（トリガーのキャッチ）

まずはレンダリングのトリガーを検知するところから始まります。トリガーは以下の2つに分類されます。トリガー検知後、次のステップへ進みます。
・初回レンダー時
・stateが変更された時

2. Rendering the component（コンポーネントのレンダリング）

レンダリングとあるので、ここでDOMへの反映が行われると思いがちですが、そうではないようです。

After you trigger a render, React calls your components to figure out what to display on screen. “Rendering” is React calling your components.

React公式ドキュメントからは、レンダリングとは、コンポーネントを呼び出し、修正前後の差分を検知することと解釈できます。

初回レンダリングでルートコンポーネントを呼び出し、その後のレンダリングではトリガーした関数コンポーネントを呼び出します。
コンポーネントを呼び出した後は仮想DOMが構築されます。変更前後の仮想DOMを比較し、次のステップでリアルDOMへコミットされる仕組みです。

3. Committing to the DOM （DOMへコミット）

コンポーネントをレンダリング（呼び出し＆比較）した後、DOMへ変更が反映されますが、ここで重要なポイントがあります。

React only changes the DOM nodes if there’s a difference between renders.

反映はレンダリング間に違いがある場合のみ実施されるという点です。
Reactのレンダリングとは仮想DOM同士の差分比較であり、必ずしもリアルDOMが変更される（画面描写される）というわけではありません。

以上がReactで起こっているレンダリングの流れになります。Reactでは修正前後の差分比較と画面描写が区別されていおり、差分比較をレンダリングと呼んでいることがわかりました。

参考：公式ドキュメント https://react.dev/learn/render-and-commit