仮想DOM とは？

実DOMの操作は描画の再計算を伴うのでコストが高い。仮想DOMはただのJavaScriptオブジェクトなので高速に比較できる。「どこが変わったか」を軽いオブジェクト同士で見つけてから、必要な部分だけ実DOMを触る。

実はそうでもない。シンプルな変更なら直接DOM操作のほうが速いこともある。仮想DOMの真の価値は速度よりも「宣言的にUIを書ける」という開発体験の良さ。Svelteのように仮想DOMを使わないフレームワークも高速に動いている。

Reactのコンポーネントがre-renderされると新しい仮想DOMが生成され、前回のものと差分比較される。差分があった箇所だけ実DOMが更新される。だからre-render自体は軽い処理で、実DOMの変更を最小限に抑えてくれる。

一長一短だよ。仮想DOMは「ランタイムで差分計算」するから柔軟性が高く、複雑なUIの動的更新に強い。Svelteは「ビルド時にコンパイル」して直接DOM操作コードを生成するから、ランタイムのオーバーヘッドがゼロに近い。小〜中規模ならSvelteの方がバンドルサイズが小さく高速、大規模でエコシステムが重要ならReactの方が選択肢が豊富だね。

そうだよ。React 16で導入されたFiberアーキテクチャは仮想DOMの差分計算を「中断可能」にしたんだ。従来は差分計算が始まると完了するまでメインスレッドをブロックしていたけど、Fiberは作業を細分化してフレーム間の隙間で少しずつ処理できる。これによりユーザー入力への応答性が大幅に改善された。React 18のConcurrent Featuresもこの仕組みの上に成り立っているんだよ。