reactに関するcrist18のブックマーク (3)

  • React.jsのVirtualDOMについて - Qiita

    今回はReact.jsのVirtualDOMの実装での工夫について書きたいと思います。 Version control for the DOM React.jsのVirtualDOMの実態はJavaScriptのオブジェクトであり、rerenderする際に前後の状態を比較して最小限の変更だけを実際のDOMに反映させる仕組みになっています。 つまり、バージョン管理されていてdiffだけをpatchとして実際のDOMに適用する感じですね。 Level by level 単純にVirtualDOMのtreeを比較すると計算量が多くなってしまうので、React.jsでは計算量を減らすための工夫がされています。 その1つがVirtualDOM treeの同階層同士でしか比較しないということです。WebアプリケーションのDOM構造で異なる階層に要素が移動するケースは珍しいという理由でこのようになってい

    React.jsのVirtualDOMについて - Qiita
  • リアルな DOM はなぜ遅いのか - steps to phantasien

    これは VirtualDOM Advent Calendar 2014 に勝手に参加する記事です。 あたたかい春の昼下がりのこと、あるブラウザベンダの社内を不穏な噂が駆け巡った。 「React.js なるライブラリ、どうも仮想 DOM というやつのせいで速いらしいぞ」 もうリアルな DOM はお役御免、ブラウザも商売上がったりか・・・。雇用に不安を覚える人(私)がいる一方、 そのアイデアをとりこんでブラウザの DOM を速く出来ないかと考える人たちもいた。 仮想 DOM はなぜ速いのか。誰かのつてを辿って React.js チームにおいでいただき、速さの秘密をテックトークしてもらう。 イミュータブルなデータ構造による単純化、非同期適用による処理のバッチ化、差分アルゴリズムによる副作用の最小化… いくつかのアイデアはブラウザからはどうにもならないが、たとえば非同期化なんかは形は違えどブラウザ

  • 2018年は、reduxとeslintとflowとwebpackを捨ててみようと思う - Qiita

    2017年版と2018年版でwebアプリケーション作成時のreactの(マイ)ベストプラクティクスを以下のリポジトリに、まとめてみたので記事にしてみました。 react-best-practices https://github.com/wheatandcat/react-best-practices/tree/master ちなみにタイトルは、その過程で2018年版に削除したpackageです(理由は後述) github サンプルコードの内容は、ログイン/ログアウト + fetchした内容を画面に表示するだけです (ただのサンプルなので、実装はハリボテです) 2017年版 https://github.com/wheatandcat/react-best-practices/tree/master/2017years 2018年版 https://github.com/wheatandc

    2018年は、reduxとeslintとflowとwebpackを捨ててみようと思う - Qiita
  • 1