Reactを学ぶ前に歴史を知る
React は、どうして生まれたのか歴史について簡単に紹介します。(ちょっと調べただけ)
背景
最近、React を学び始めました。その過程で、どうして React って学ぶべきなのか、どういう特徴があるのか気になった次第です。
歴史
言語やフレームワーク問わず、何かしら学ぶ際には、学ぶ対象の歴史や背景を知ることは大切だと思います。
対象ソフトウェアの公式ドキュメントに、BackgroundやMotivation、History、Under the roof を読むと良いです。
しかし、React の公式ドキュメントは、そのような情報を発見できませんでした。
React の作成者 Jordan Walke のReact についての記事を発見したので、それを読みました。
ざっくり要約すると、
- Facebook の広告系のプロダクト(Ads)のコードベースが大きくなった
- コードベースツリー(DOM ツリー?CSSOM ツリー?)の下位の変更で、全体の再描画(カスケード更新)が必要になり、メンテナンスが大変になった
- Reactive 特性(状態変化に基づく自動更新) を活かした FaxJS (後の React)が誕生
カスケード更新
カスケードとは、カスケード（カスケーディング）とは - IT 用語辞典 e-Words より
カスケードとは、何段も連なった小さな滝のこと。転じて、同じものがいくつも数珠つなぎに連結された構造や、連鎖的あるいは段階的に物事が生じる様子を表す。
Web ページの見栄えを定義する CSS（Cascading Style Sheet）で、ある要素に適用されるスタイルを、大域的に定義されたものから局所的に定義されたものへと順番に引き継ぎながら適用していくことをカスケードあるいはカスケーディングという。
ブラウザにおける CSS や DOM の更新が、まさにカスケードです。
例えば、DOM の場合、親 Node から子 Node へ(API 等で取得した)データを伝搬します(prop)。
データ変更があった場合、親 Node から子 Node を順々に、再描画されます。(レンダリングエンジンの処理に従い)
CSS や DOM のツリーの縦横が大きくなるにつれて、カスケード更新が大変になるのは、想像しやすいと思います。
React の目的
React は、このコードベース規模が肥大化した際におけるカスケード更新を簡単にできることを目的としたフレームワークだと、私は思いました。
逆を言えば、
Not コードベース規模が肥大化 OR Not カスケード更新 ならば React は不要なのかなと思います。
仮想 DOM と差分検出処理(reconciliation)
DOM 自体のレンダリングは、ブラウザのレンダリングエンジンに依存します。
React は、DOM ではなく、仮想 DOM と呼ばれる概念を生み出しました。
仮想 DOM とは？
仮想 DOM (virtual DOM; VDOM) は、インメモリに保持された想像上のまたは「仮想の」UI 表現が、ReactDOM のようなライブラリによって「実際の」DOM と同期されるというプログラミング上の概念です。このプロセスは差分検出処理 (reconciliation)と呼ばれます。
このアプローチにより React の宣言型 API が可能になっています。あなたは UI をどのような状態にしたいのか React に伝え、React は必ず DOM をその状態と一致させます。これにより、React なしではアプリケーションを構築するために避けて通れない属性の操作やイベントハンドリング、および手動での DOM 更新が抽象化されます。
カスケード更新をブラウザに任せるというより、フレームワーク(React)で仮想 DOM を管理し、(全体の再描画する必要なく)必要箇所のみ DOM を更新(再描画)するのだと思います。
React とカスケード更新
React を学ぶ前には、このカスケード更新という単語を脳の片隅に置いておくのが、良いと思います。
例えば、React.memo という関数が存在します。
もしあるコンポーネントが同じ props を与えられたときに同じ結果をレンダーするなら、結果を記憶してパフォーマンスを向上させるためにそれを React.memo でラップすることができます。つまり、React はコンポーネントのレンダーをスキップし、最後のレンダー結果を再利用します。
この関数も、React の目的であるカスケード更新を改善するための関数だと、思います。
Discussion