Reactのブラウザー内での動作

Reactのブラウザー内での動作を調べてみた。

JavaScriptの処理

通常のJavaScriptの動作は下記の通りで、時系列に処理が進み、レンダリング直前に
要素の変更を行って表示する。その為、ブラウザーが管理するDOMに変更が反映されずに、
表示されたDOMとブラウザー管理のDOMの二つのDOMが存在する事となる。
複数人での開発では、とても誤解を招く事となる。

Reactの処理

Reactは部分的な仮想DOMを作成し、仮想DOMの変更をブラウザー管理のDOMに反映させる
処理をJavaScriptのファイルとしてブラウザーに常駐させる。

初期の通信量が増えるが、DOMは一意に決まり、誤解が発生する事が減る。

まとめ

一人で簡単なJavaScriptのプログラムで対応できる仕様ならば、Reactをわざわざ学ぶ必要はない
ように思われます。但し、複数人で開発を進めるにあたり、
”ちゃんと決まり事を決めましょう！”
となった場合はReactを導入すると利便性が発揮される事となりそうです。
上記の例では、Ajaxを使ってますが、
SPAの定義がでは、
”URLを変えずに、部分的なページの変化を実現する”
なので、Ajaxが必須と言う訳でもないようです。