DOM
T.B.D
Virtual DOM
T.B.D
Shadow DOM
Shadow DOMは別にReact特有の技術ではない。
Web Componentsという技術の一部としてネイティブなAPIとして提供されている。
カスタム要素の重要な側面の一つがカプセル化です。なぜなら、カスタム要素は定義上、再利用可能な機能の一部であり、任意のウェブページにドロップして動作させることが期待されるからです。そのため、ページで実行されるコードが、内部実装を変更することでカスタム要素を誤って壊すことがないようにすることが重要です。シャドウ DOM を使用すると、DOM ツリーを要素に割り当て、ページで実行される JavaScript や CSS からこのツリーの内部を隠すことができます。
すごい簡単にいうと、Shadow DOMはDOMの中に作成されるカプセル化されたDOMのこと。
<video />
要素なんかにもShadow DOMが使われているらしい。
ReactとShadow DOMの関係について
結論から。ReactはShadow DOMに依存していない。
ReactはVirtual DOMによってパフォーマンスを最適化している。
勿論ReactとShadow DOMを組み合わせて使うことも可能。
参考リンク
We'll dive into the concept of a virtual DOM in the React as well as explore its purpose.
In web development, understanding the inner workings of the Document Object Model (DOM) is crucial. Two concepts that often come up in discussions about DOM are Virtual DOM and Shadow DOM. While they sound similar, they serve different purposes and h...
フロントエンドエンジニアや、主流のフロンエンドフレームワークの React と Vue.js を触った経験がある方なら、仮想 DOM という言葉を聞いたことがあると思います。仮想 DOM はフロンエンド開発において、パフォーマンスを向上させるスタンダードになるほど、普及してきました。しかし、その一方で仮想 DOM を使わないトレンドも最近流行っています。この記事では、仮想 DOM について、また