「React」の仮想DOM(Virtual DOM/VDOM)

「React」の仮想DOM(Virtual DOM/VDOM)

■仮想DOMとは

Reactでは、コンポーネント(エレメント)などの仮想DOMを通してUIを構築します。

「仮想DOM(Virtual Document Object Model)」とは、JavaScriptオブジェクトとしてDOMツリーのようなものを保持しておき、データに変更が発生した場合に、関連するオブジェクトのみの差分を計算し、実際のDOMへの再レンダリングを最小限にする仕組みです。

■手動DOM更新の抽象化

仮想DOMにより、アプリケーションを構築するために使用しなければならない「手動によるDOM更新(属性操作/イベント処理など)」を抽象化できます。

Reactにおける開発では、「ある状態を反映するために各種DOMをどのように変更すべきか？」という考え方から、「ある状態に対応するために仮想DOM構成はどうあるべきか？」という定義に集中できます。

適切な仮想DOM構成を構築することで、既存のVMCアーキテクチャでは大量に存在していた状態遷移用コードがほぼ一掃され、自動的にページ全体の一貫性が保たれるようになります。

また、ページ全体の情報を1箇所に集められるため、「ブラウザリロードによる状態復元」「ユーザー操作の取り消し」などの実装も比較的容易に行えます。

■差分レンダリング

Reactはメモリ内に「仮想DOMツリー(データ構造キャッシュ)」を作成し、各コンポーネントの状態を管理します。

表示を変更する必要が発生した場合、Reactライブラリは結果の差異を計算することで、ブラウザに表示されていて「実際に表示変更が必要となるコンポーネントのみ」を効率的にレンダリングします。

この仕組みにより、開発者は、各変更時にページ全体がレンダリングされるかのようにコードを作成できます。

■高速レンダリング

差分レンダリングにおいて、仮想DOMの比較はJavaScript内のみで完結する軽い演算処理であるため、本物のDOM操作と比較すると圧倒的に高速に処理されます。

そのため、Webページ全体をReact化して適用することも可能です。