2022年5月9日りあクト！第7章 Reactをめぐるフロントエンドの歴史（p.99~)

Component-Based(コンポーネントベース)、Just The UI(UIにしか関知しない)

ReactにはRuby on RailsのようなMVCという概念はなく、model, controllerはアプリケーションを構築するのに必要ないと考えているのではないかと書籍では語られています。

コンポーネントを適切に分ける観点ではmodelは邪魔だとも考えられます。純粋にUIから切り分けされるべきであり、データ抽象化の単位やそれを扱う手続きに左右されるべきではないからです。

カプセル化されたコンポーネントをベースとしてそれに必要なデータが宣言的に取得されるようにしておけば、modelというデータ抽象化が必要かどうかは問題ではありません。

modelという縛りがないReactではAtomic Designのように純粋なUIデザイン手法に則ってコンポーネントを分割することが可能です。

Reactは自身を A JavaScript library for building user interfaces(UIを構築するためのJavaScriptライブラリ) と名乗っています。

実際にReact単体でアプリケーション開発はできません。

ワンストップにしない理由は変化の早い世界において技術の進歩の妨げになると考えているからです。

あえてフルスタックのフレームワークにしない事で、後に出てくる秀逸なライブラリ(Reduxなど)を柔軟に取り入れられるようにしています。

MVVMはアーキテクチャパターンの一つで、Model／View／ViewModelの3つでアプリケーションを構築するものです。モデル(M)とビュー(V)間のやり取りをビューモデル(VM)を介して行います。

仮想DOMとは、メモリに展開されたイミュータブルな要素ツリーのことです。
(イミュータブルは不変であるという性質を指します)
変更前の仮想DOMと変更後の仮想DOMをチェックして差分のあった部分をリアルDOMに反映させる仕組みです。

処理が走っても結果の DOM に差分がなければ余分な再レンダリングは発生せず、DOMの更新もピンポイントで最小限に抑えられます。

従来のDOM操作では、情報に変化が生じた場合にDOMを全て再構築し、それを元に再描画を行って画面を変化させるため表示が遅くなってしまいます。

Reactの仮想DOMの利点はDOMの更新を効率良く行うことでユーザー体験を良くすることができる点です。

孫コンポーネントにPropsを渡すときに、親・子コンポーネントを経由させなくてはならない状態を指します。

グローバルステートを定義する事で、孫コンポーネントに直接Propsを渡せるようにする事で、バケツリレーになることを防ぎます。