「React」の仮想DOM(Virtual DOM/VDOM)として、「仮想DOMとは」「手動DOM更新の抽象化」「差分レンダリング」「高速レンダリング」について紹介します。

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

「React」の仮想DOM(Virtual DOM/VDOM)として、「仮想DOMとは」「手動DOM更新の抽象化」「差分レンダリング」「高速レンダリング」について紹介します。

■関連する比較ページ

「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化して適用することも可能です。

React最新TOPICS

【OSS】UI構築用JavaScriptライブラリ「React 16.0」リリース---コアアーキテクチャ「Fiber」、「MIT License」で公開する初のメジャーリリース(2017年10月04日 11:03)

FacebookのReact開発チームは、9月26日、 UI構築用JavaScriptライブラリ「React 16.0」を公開した。 【Reactとは】 https://www.ossnews.jp/oss_info/React 【ポイント】 ・新しいコアアーキテクチャ「Fiber」 ・多数の機能強化 ・エラー処理改善 ・高速化 ・議論になっていたライセンスの変更も実施(...

React最新CLOSEUPコラム

イベント情報

セミナー講演資料

無料資料プレゼント

2021/03/04 セキュリティDAYS Keyspider資料

講演資料を見るには、 プライバシーポリシーに同意して、送付先メールアドレスをご入力しご請求ください。

またご入力いただきました情報は、当該資料の作成・提供企業とも共有させていただき、当社及び各社のサービス、製品、セミナー、イベントなどのご案内に使用させていただきます。

本資料を見るには次の画面でアンケートに回答していただく必要があります。



セミナー講演資料公開中

SIer企業の「リスキリング」実現ロードマップを解説 〜開発現場で必要なスキルを実践しながら学べる学習プラットフォーム〜

エンジニアにとって「情報発信」は重要なのか? ~テックピット DEVELOPERS RESKILLING CONFERENCE クロージングセッション~

CI/CDが開発ガバナンスの弱体化を招く?回避する方法とは ~複数ツールの組み合わせで生じる問題を、統合プラットフォーム「GitLab」で解決~

  • オープソース書籍(サイド)
  • OSSNEWSに広告を掲載しませんか?

facebook

twitter