Works by

Ren's blog

@rennnosuke_rk 技術ブログです

【React】ReactとVirtual DOM

React

f:id:rennnosukesann:20180515230713p:plain:w300

ReactはFacebook社が開発するWebUIに特化したJavascriptのライブラリです。WebアプリケーションのアーキテクチャMVCで構成した場合、ReactがサポートするのはViewの部分になります。Reactを用いることで効率的にUIコンポーネントを描画したり、UIコンポーネントを管理する負担を軽減することができます。

Virtual DOM

Reactでは、Virtual DOMと呼ばれる仕組みよって効率的なUIコンポーネントの描画を行います。通常、JavaScriptではDOMによってHTML要素にアクセスし、変更を加えます。

f:id:rennnosukesann:20180516002415p:plain:w300

DOMが操作されると、ブラウザ上でレンダリング(の一部の処理)が実行されます。
ブラウザのレンダリングは以下のフローで行われるのですが、DOM操作によって「Layout」と「Paint」工程の処理が走ります。

f:id:rennnosukesann:20180516002458p:plain:w300

DOM操作を行うたびに処理が走るので、頻繁にDOM操作が実行されるとブラウザの描画パフォーマンスは悪くなってしまいます。

そこでVirtual DOMを利用します。Virtual DOMは実際のDOMとは別物であるものの、同じ構造を持ったオブジェクトです。ReactによるDOM操作が発生すると、DOMの代わりにVirtual DOMが操作されます。

f:id:rennnosukesann:20180516003214p:plain

その後、操作されたVirtual DOMの変更差分を算出して、変更部分に対応する実際のDOMを変化させます。*1これにより、DOM操作回数を通常よりも抑えることができ、上記レンダリング処理を何度も走らせない仕組みになっています。


ちなみに、Virtual DOM自体はReact固有の技術ではなく、Viewレンダリングを最適化する目的で他のライブラリ等でも実装されているみたいです。

github.com

参考

reactjs.org

Document Object Model - Wikipedia

www.shoeisha.co.jp

*1:どのタイミングでVirtual DOMの差分をDOMに反映させるかについてはまだ未調査です...