仮想DOM とは？

開発者が「今の状態ならこのUI」と書くと、レンダラーが実DOMへの反映を担当できるからだよ。たとえば見出しAと文章Bを表す木と、文章だけCに変えた木を比較して、必要なDOM操作を計算するんだ。

必ずではないよ。UIの表現を作る処理と比較にもコストがある。DOMへの不要な変更を減らすことと、処理全体が速いことは別なんだ。遅さが気になるときは、実際の画面でどの計算や描画に時間がかかっているかを調べるよ。

Reactのレンダリングは、コンポーネントを呼んで表示内容を計算する段階だよ。その後のコミットで、必要な変更をDOMへ反映する。結果が前回と同じならDOMを変えないこともある。再レンダリング自体が常に軽いとは限らないんだ。

両方を組み合わせる実装もあるよ。Vueはテンプレートをコンパイルし、静的な部分の再利用や変更箇所の情報で仮想DOMの比較を減らしている。方式の名前だけで速度や適したアプリの規模を決めることはできないね。

UIを計算する作業を途中で止めたり、後で再開したりできる仕組みだよ。React 18の説明では、対応する機能を使う部分でこの動作が有効になり、DOMへの反映は計算が整ってから行う。仮想DOMを使うだけで、すべての処理が中断可能になるわけではないんだ。