Upgrade to Pro — share decks privately, control downloads, hide ads and more …

仮想DOMで探る、Reactがヒットした 理由 / Virtual Dom React Hit

konosumi
December 08, 2018
2.8k

仮想DOMで探る、Reactがヒットした 理由 / Virtual Dom React Hit

konosumi

December 08, 2018
Tweet

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. DOMのイメージ(樹形図な構造体)






    ブラウザは、
    Javascriptから
    DOMを操作する
    APIを
    提供している。

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide