Reactを独学で学ぶ上で、いちばん最初に公式ドキュメントの理解から着手しようと思ったのでアウトプットも兼ねて内容をまとめました。
ここではReact公式ドキュメントの「レンダー」をまとめました。
こんな人向け
- Reactを触ったことがない人
- Reactに興味があり、学ぼうとしている
- Reactの概念・仕組みを知りたい
筆者の状態
- html, css, javaScriptはある程度知っている
- Reactは初心者
レンダーとコミット
コンポーネントは、画面上に表示される前にReactによってレンダーされる必要があります。
コンポーネントが料理人として厨房に立ち、食材を調理して美味しい料理を作っている様子をイメージしてみてください。このシナリオにおいて React はウェイターです。お客様の注文を伝えて、できた料理をお客様に渡します。この UI の「注文」と「提供」のプロセスは、次の 3 つのステップからなります：
- レンダーのトリガ（お客様の注文を厨房に伝える）
- コンポーネントのレンダー（厨房で注文の品を料理する）
- DOM へのコミット（テーブルに注文の品を提供する）
1.レンダーのトリガ
コンポーネントがレンダーされるのは以下の2つです。
- コンポーネントの初回レンダー
- コンポーネント（またはその親）のstateの更新
フレームワークやサンドボックスでは省略されていることが多いですが、通常は createRoot を呼び出し、作成されたルートの render メソッドを、コンポーネントに対して呼び出します。
2.コンポーネントのレンダー
「レンダー」とは、Reactがコンポーネントを呼び出すことです。
- 初回レンダー時、Reactはルート(root)コンポーネントを呼び出します。
- 次回以降のレンダーでは、stateの更新によってレンダーがトリガされた関数コンポーネントを、Reactが呼び出します。
Gallery.tsx
export default function Gallery() {
return (
<section>
<h1>Inspiring Sculptures</h1>
<Image />
<Image />
<Image />
</section>
);
}
function Image() {
return (
<img
src="https://i.imgur.com/ZF6s192.jpg"
alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"
/>
);
}
React は Gallery() を呼び出した後、Image() を何度も呼び出します。
- 初回レンダー時には、Reactは <section>, <h1>, および3つの<img>タグのDOMノードを作成します
- 再レンダー時には、Reactは前回のレンダーからどの部分が変わったのか、あるいは変わらなかったのかを計算します。次のステップであるコミットフェーズまでこの情報は使われません。
3.ReactがDOMへの変更をコミットする
-
初回レンダー時には、Reactは
appendChild()DOM APIを使用して、作成したすべてのDOMノードを画面に表示します。 - 再レンダー時には、Reactは最新のレンダー出力に合わせてDOMを変更するため、必要な最小限の操作（レンダー中に計算されたもの！）を適用します。
Reactはレンダー間で違いがあった場合のみDOMノードを更新します。
最後に
レンダーが完了し、ReactがDOMを更新した後、ブラウザは画面を再描画します。これは「ブラウザレンダリング」と呼ばれます。
ライセンス
本記事は、Reactの公式ドキュメント（React 公式サイトへのリンク）を参考に、Creative Commons Attribution 4.0 International License (CC BY 4.0) の下で公開されている情報に基づいて作成されています。