【Reactが動く仕組み】シリーズ
Reactでコードを書いて、アプリは作れる。
でも、「どうやって動いているのか？」と聞かれると、言葉にできない…。
一歩踏み出して、「裏側の仕組みを理解して説明できる」を目指したシリーズです。
全７弾で以下の内容を記載予定です。
１．Node.js（実行環境）
２．ビルド（構築の流れ）
３．Babel / polyfill（変換）
４．DOM / 仮想DOM（仕組み）
５．レンダリング（動き）
６．再レンダリング（なぜ起きる？）
７．最適化（どう見極める？）
今回はその第5弾として、「レンダリング」について整理していきます。
はじめに
第4弾では、DOMと仮想DOMについて整理しました。
👉 Reactは仮想DOMを使って、DOM操作を効率化している
という話でした。
ではここで、Reactを書いていると必ず出てくるこの現象
「stateを変えると画面が更新される」
これ、よく使っているけど…
👉 実際には裏で何が起きているのでしょうか？
この記事でわかること
- レンダリングとは何か
- state変更で何が起きているのか
- Reactが画面を更新する流れ
思ってたイメージ（ちょっと違う）
まず、最初のイメージ
stateが変わる
↓
画面が書き換わる
👉 間違いではないですが、かなり省略された理解でした。
実際に起きていること
実際は、
stateが変わる
↓
コンポーネントが再実行される
↓
仮想DOMが再生成される
↓
差分を比較
↓
必要な部分だけDOM更新
「stateが変わると再レンダリングが起きる」という正体はこれです
レンダリングとは何か
レンダリングとは一言でいうと、
👉 UIを生成する処理のこと
ここで重要なのが
「画面に描画すること」だけではない
Reactにおけるレンダリングは
👉 コンポーネントから仮想DOMを生成する処理を指す
stateが変わると何が起きるのか
例：
const [count, setCount] = useState(0);
return <h1>{count}</h1>;
ボタンで setCount(1) を呼ぶと
① stateが更新される
count = 1になる
② コンポーネント関数が再実行される
App() がもう一度呼ばれる
ここが重要☆
👉 Reactは「関数をもう一回実行」している
👉 その結果として、新しいUIが作られる
③ 新しい仮想DOMが作られる
<h1>1</h1>
④ 前回との差分を比較
0 → 1 に変わった
⑤ 必要な部分だけ更新
テキストだけ書き換え
なぜこの仕組みが良いのか
もしReactがなかった場合
👉 自分でやる必要がある
どこが変わったか判断
↓
DOM操作を書く
Reactでは
👉 「状態だけ」自分で変える。
👉 あとは、第4弾で見た「差分管理」を、自動でやってくれる。
誤解しやすい（誤解してた）ポイント
❌ stateが変わると即DOM更新される
正しくは
state変更 → 再レンダリング → 差分更新
まとめ
- レンダリングとは、UIを生成する処理
- Reactでは、コンポーネント関数が再実行されることを指す
- stateが変わると、仮想DOMが再生成される
- 差分比較によって、必要な部分だけDOMが更新される
👉 Reactは「状態の変化」をもとにUIを再構築している
第6弾に向けて
ここまでで、レンダリングの流れは見えてきました。
では次に気になるのが
👉 「なぜ再レンダリングが起きるのか？」
次回は「再レンダリング」をテーマに、
無駄な再描画やその仕組みについて整理していきます。