仮想DOMで探る、Reactがヒットした理由 / Virtual Dom React Hit

仮想DOMで探る、Reactがヒットした理由【第5回】JSフレームワーク(またはライブラリ)× ビアバッシュ初心者勉強会 in西新宿 @konosumi / このすみ

自己紹介：このすみ / @konosumi • 中小企業でプレイングマネージャーです • 技術スタック：サーバーサイド + モバイルアプリの開発
• フロントエンドJSは、昨年末から触り始めました　=> 主にReact.jsとReact Native • あと、趣味でブログを書いたり、同人活動をしています

宣伝：技術同人サークルこのすみ堂@BOOTH • BOOTHにて電子書籍を3冊頒布してます：https://konosumi.booth.pm/ • Firebase x React.jsの本は、無料で公開しています。

目的：Reactがヒットした理由を、DOMから探る • 参考文献 WEB+DB PRESS Vol. 106 仮想DOM革命 @mizchiさん感想：仮想DOMのメリットと、リアルDOMとの違い
https://www.konosumi.net/entry/2018/08/25/020111

DOMとは何か？ • DOM = Document Object Model • ざっくり言えば、DOMとは「ドキュメントを操作するためのインターフェース(=API)」のことです
　=> Webの場合、HTMLがドキュメントの位置付けです

DOMのイメージ(樹形図な構造体) <BODY> <DIV> <UL> <P> <P> <LI> <LI> ブラウザは、 Javascriptから
DOMを操作する APIを提供している。

実DOM(リアルDOM)と仮想DOMの違い • 実DOM(=リアルDOM)：実際にブラウザに描画されている　=> 変更すると、実際にブラウザに表示されているHTMLも書き換わる　=> 書き換えコスト(負荷)の高い操作 • 仮想DOM：メモリ空間などで、擬似的にDOMを再現した単なる構造体　=>
変更すると、単にメモリ空間上にあるデータが書き換わる　=> 書き換えコスト(負荷)の低い操作

jQueryとReact.jsの違い • jQueryは、実際にブラウザに表示されているHTML(=実DOM)を操作 • Reactは、先に仮想DOMを作る　=>仮想DOMと実DOMの差分を計算し、最小コストでHTMLを変更　=>最小限のコストでHTMLを書き換え、圧倒的なパフォーマンス！

Reactは、差分検知のアルゴリズム • Reactは、仮想DOMと実DOMの差分を計算している => React = 差分検知アルゴリズムといっても過言ではない • React.jsは、ReactをWEBの世界に適用しただけなので、他に応用できる　=>
React Native(モバイルアプリ)、React VR(VR空間)...etc

Reactのパフォーマンスを上げるには？ • Reactは状態変化が起きると仮想DOMを再構成し、実DOMと差分計算する　=> つまり、仮想DOMを再構成を抑えると、パフォーマンスは上がる • 再構成を否定する： shouldComponentUpdateで、仮想DOMに変更があるかを事前判断 •
参考記事 ReactでshouldComponentUpdateを使ったチューニング https://qiita.com/wordijp/items/cfda7bbad195eec22cc3

Fluxによる状態の集約 • HTMLが書き換わる流れ：現在の状態(state)が変わる => 再レンダリング(仮想DOM の再構成) => 実DOMとの差分を計算 =>
実際にHTML(=実DOM)を書き換える　=> React.js は、現在の状態を個々のReactコンポーネントが持っている　=> 管理が辛い　=> 状態を一元管理するために生まれたのがFlux •Fluxは単方向のデータフローです(注：仮想DOMや実DOMの状態に依存しない)

まとめ • jQueryは実DOM、React.jsは仮想DOMを操作 • ざっくり言うと、React = 差分検知の仕組み(アルゴリズム)です • 差分検知はReact NativeやReact
VRの世界でも活躍 • 仮想DOMの再構成を減らすと、Reactのパフォーマンスは上がります •Fluxは、単方向の特性を活かしてます

仮想DOMで探る、Reactがヒットした理由 / Virtual Dom React Hit

仮想DOMで探る、Reactがヒットした理由 / Virtual Dom React Hit

konosumi

More Decks by konosumi

Featured

Transcript

仮想DOMで探る、Reactがヒットした理由【第5回】JSフレームワーク(またはライブラリ)× ビアバッシュ初心者勉強会 in西新宿 @konosumi / このすみ

自己紹介：このすみ / @konosumi • 中小企業でプレイングマネージャーです • 技術スタック：サーバーサイド + モバイルアプリの開発

宣伝：技術同人サークルこのすみ堂@BOOTH • BOOTHにて電子書籍を3冊頒布してます：https://konosumi.booth.pm/ • Firebase x React.jsの本は、無料で公開しています。

目的：Reactがヒットした理由を、DOMから探る • 参考文献 WEB+DB PRESS Vol. 106 仮想DOM革命 @mizchiさん感想：仮想DOMのメリットと、リアルDOMとの違い

DOMとは何か？ • DOM = Document Object Model • ざっくり言えば、DOMとは「ドキュメントを操作するためのインターフェース(=API)」のことです

DOMのイメージ(樹形図な構造体) <BODY> <DIV> <UL> <P> <P> <LI> <LI> ブラウザは、 Javascriptから

Reactは、差分検知のアルゴリズム • Reactは、仮想DOMと実DOMの差分を計算している => React = 差分検知アルゴリズムといっても過言ではない • React.jsは、ReactをWEBの世界に適用しただけなので、他に応用できる　=>

Fluxによる状態の集約 • HTMLが書き換わる流れ：現在の状態(state)が変わる => 再レンダリング(仮想DOM の再構成) => 実DOMとの差分を計算 =>

まとめ • jQueryは実DOM、React.jsは仮想DOMを操作 • ざっくり言うと、React = 差分検知の仕組み(アルゴリズム)です • 差分検知はReact NativeやReact

仮想DOMで探る、Reactがヒットした 理由 / Virtual Dom React Hit

仮想DOMで探る、Reactがヒットした 理由 / Virtual Dom React Hit

More Decks by konosumi

Featured

Transcript

仮想DOMで探る、Reactがヒットした理由 / Virtual Dom React Hit

仮想DOMで探る、Reactがヒットした理由 / Virtual Dom React Hit