👏
Reactにおけるレンダリングとは
レンダリングとは
React におけるレンダリングとは、現在の Props と State を元に、React がコンポーネントに対して、それらがどのように見えるべきなのかを尋ねるプロセスです。
ブラウザのレンダリングとは異なるので、注意です。
React のレンダリングプロセス
次の 3 ステップで React は画面を描画します。
- レンダリングのトリガー
- コンポーネントのレンダリング
- DOM へのコミット
1. レンダリングのトリガー
コンポーネントがレンダリングする時は次の 2 つのパターンの時です。
- コンポーネントの初期レンダリング時
- コンポーネント（またはそのコンポーネントの祖先のコンポーネント）の状態が更新された時
- 初期レンダリング
アプリの起動時に最初のレンダリングをトリガーする必要があります。
アプリが完全に React で構築されている場合はアプリ全体に対して、単一のルートを作成します。
import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("root"));
root.render(<App />);
HTML で定義しているブラウザの DOM ノードを見つけて、そこに React を使って DOM を作成していきます。
- 状態が更新されたときに再レンダリングをします。
useState の set 関数で状態を更新することでさらにレンダリングをトリガーできます。
2. コンポーネントのレンダリング
レンダリングは React がコンポーネントを呼び出すことです。
- 最初のレンダリングでは、ルートコンポーネントを呼び出します。
- 後続のレンダリングではな、状態更新によるレンダリングをトリガーした関数コンポーネントを呼び出します。
コンポーネントがネストされている場合、親コンポーネントをレンダリングし、子コンポーネントを返す場合、次に子コンポーネントをレンダリングし、何を表示すべきなのか正確にわかるまでは再帰的にレンダリングが続きます。
3. DOM へのコミット
- 最初のレンダリングでは、 React は
appendChild()DOM API を使用して、作成したすべての DOM ノードを画面に配置します。 - 再レンダリングの場合、 React は必要最小限の操作 (レンダリング中に計算されます) を適用して、DOM を最新のレンダリング出力と一致させます。
React では、DOM ノードのみを変更します。
Discussion