仮想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のイメージ(樹形図な構造体)

実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は、単方向の特性を活かしてます