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

17e5519c8ad1504243c5f46430893232?s=47 konosumi
December 08, 2018
1.7k

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

17e5519c8ad1504243c5f46430893232?s=128

konosumi

December 08, 2018
Tweet

Transcript

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

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

    • フロントエンドJSは、昨年末から触り始めました  => 主にReact.jsとReact Native • あと、趣味でブログを書いたり、同人活動をしています
  3. 宣伝: 技術同人サークル このすみ堂@BOOTH • BOOTHにて電子書籍を3冊頒布してます:https://konosumi.booth.pm/ • Firebase x React.jsの本は、無料で公開しています。

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

    https://www.konosumi.net/entry/2018/08/25/020111
  5. DOMとは何か? • DOM = Document Object Model • ざっくり言えば、DOMとは「ドキュメントを操作するためのインターフェース(=API)」のこ とです

     => Webの場合、HTMLがドキュメントの位置付けです
  6. DOMのイメージ(樹形図な構造体) <BODY> <DIV> <UL> <P> <P> <LI> <LI> ブラウザは、 Javascriptから

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

    変更すると、単にメモリ空間上にあるデータが書き換わる  => 書き換えコスト(負荷)の低い操作
  8. jQueryとReact.jsの違い • jQueryは、実際にブラウザに表示されているHTML(=実DOM)を操作 • Reactは、先に仮想DOMを作る  =>仮想DOMと実DOMの差分を計算し、最小コストでHTMLを変更  =>最小限のコストでHTMLを書き換え、圧倒的なパフォーマンス!

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

    React Native(モバイルアプリ)、React VR(VR空間)...etc
  10. Reactのパフォーマンスを上げるには? • Reactは状態変化が起きると仮想DOMを再構成し、実DOMと差分計算する  => つまり、仮想DOMを再構成を抑えると、パフォーマンスは上がる • 再構成を否定する: shouldComponentUpdateで、仮想DOMに変更があるかを事前 判断 •

    参考記事 ReactでshouldComponentUpdateを使ったチューニング https://qiita.com/wordijp/items/cfda7bbad195eec22cc3
  11. Fluxによる状態の集約 • HTMLが書き換わる流れ: 現在の状態(state)が変わる => 再レンダリング(仮想DOM の再構成) => 実DOMとの差分を計算 =>

    実際にHTML(=実DOM)を書き換える  => React.js は、現在の状態を個々のReactコンポーネントが持っている  => 管理が辛い  => 状態を一元管理するために生まれたのがFlux •Fluxは単方向のデータフローです(注:仮想DOMや実DOMの状態に依存しない)
  12. まとめ • jQueryは実DOM、React.jsは仮想DOMを操作 • ざっくり言うと、React = 差分検知の仕組み(アルゴリズム)です • 差分検知はReact NativeやReact

    VRの世界でも活躍 • 仮想DOMの再構成を減らすと、Reactのパフォーマンスは上がります •Fluxは、単方向の特性を活かしてます