WEB+DB PRESS Vol.106の「仮想DOM革命」という記事を読んでの感想やらなんやら
これまでほぼAngularしか触ってなかったんですが(jQueryとかモダンでない旧世代以前のあれやこれやは除く)、そろそろReact触ることになりそうなので勉強しようとしていたら、WEB+DB PRESS Vol.106に「仮想DOM革命」という記事が載っていたので、早速買って読みました。
web+db pressの仮想DOM記事読んでる。まだreactコンポーネントのprops/stateの説明の所まで読んだだけだけど、reactの概念や指針がスッと入ってきてとてもよい。むしろこの辺りの情報頭に入れずによくもまぁおっかなびっくりreactを触ってたもんだ俺。
— りんご🍏はたらいている (@mstssk) 2018年8月25日
以下、著者の意図とは違うだろうけど、自分的に良かった点について。
Reactのよくわからんかった部分がわかった
Reactはほとんど触ったことがなくて、去年のDroidKaigiのサイトがReactベースのGatsbyだったので、少々触ったくらいでした。
仮想DOMがどうやって何を実現してくれるのか、ReactにおいてProps/Stateの立ち位置・使い方は何なのかがわかったのが、この記事を読んでの俺的な一番の収穫でした。
Angularと比較してどう違うのかがわかった(気になった)
(Angularについてはv2の頃に調べた話が元なので今は違うかも)
Reactでは仮想DOMによって差分のみをDOMに適用する一方、Angularでは変更を検知したプロパティを使用しているテンプレート中の該当部のDOM操作を行います。
つまり、コンポーネントが複雑になってもDOMに適用するのはあくまでその差分だけなReactに対して、テンプレートに記述したロジックをDOMにそのまま反映していくAngularの違いがあります。 特にAngularではAOTコンパイルでテンプレートをTypeScriptのコードにすることもあり、テンプレート書くときもJavaScriptとしてのパフォーマンスを考慮しながら書いたりする必要があると思ってます。
Angularの方はコンポーネントがCSSのカプセル化を最初からやっているとかプロパティの双方向バインディングがあるとかいう違いもありますが、フロントエンドのフレームワークで一番パフォーマンスに影響が出るDOM操作周りの振る舞いの違いは重要です。