Virtual DOM とは何で、React はなぜそれを使うのですか？

Question

Accepted Answer

**Virtual DOM (VDOM)** は、UI がどう見えるべきかを*記述する*軽量な JavaScript オブジェクトツリーです。これはメモリ上のプレーンな表現であり、実際のブラウザ DOM ではありません。React がこれを使うのは、**実 DOM を直接操作するのは遅く**、状態が変わるたびに手作業で更新するとミスが起きやすいからです。 ## 仕組み state が変わると、React はすぐにページを触るわけではありません。代わりに次の処理を行います。 1. コンポーネントから**新しい** virtual tree を構築する。 2. それを以前の virtual tree と **diff** し、最小限の変更セットを計算する（reconciliation）。 3. その変更だけを、まとめた更新として実 DOM に適用する。 ```jsx function Counter() { const [n, setN] = useState(0); // クリックのたびにを表す新しい virtual tree が作られる。 // React は古い tree と新しい tree を比較し、変更された text node だけを更新する。 // button 全体やページ全体を更新するわけではない。 return ; } ``` つまり、あなたは **declarative** にコードを書き（「この state では UI は*こう*見える」）、React が命令的な DOM 操作を代わりに導き出します。 ## なぜ重要なのか / trade-off - **DOM 書き込みを減らし、batch 化できる** → 高コストな reflow/repaint を減らせる。 - **Declarative code** は、手作業の `document.querySelector` と mutate より理解しやすい。 - VDOM は魔法のように「DOM より速い」わけではありません。diff 自体にも CPU コストがあります。利点は、React が不要な実 DOM 作業を避け、更新を手作業で最適化しなくて済む点です。list では安定した **key** を使うと diff が効率的になります。