6/10 代表勉強通信～Reactのお勉強①

こんばんは。代表の草場です。

Reactの勉強をしています。公式のチュートリアルをやっていましたが、いまいちわからず、浮気しました。
「Learning React: A Hands-On Guide to Building Web Applications Using React and Redux, Second edition」を読み始めました。オライリー本を漁っていたらたまたま出てきて良さそうなので、選びました。

イントロで、「最近のアプリはシングルページアプリ（SPA）モデルとして知られているものに従う傾向がある」とあります。このモデルでは、異なるページに移動したり、ページをリロードしたりすることがありません。アプリのさまざまなビューは、同じページ自体に読み込まれ、アンロードされます。特徴は３つ上げられています。
１．シングルページのアプリケーションでは、データをUIと同期させておくことに時間の大部分を費やすことになりる。
２．DOM の操作は本当に遅い。手動で要素を照会したり、子要素を追加したり、サブツリーを削除したり、その他の DOM操作を行うのは、ブラウザでできることの中で最も遅いものの 1 つ。
３．HTMLテンプレートを扱うのは面倒。シングル ページアプリのナビゲーションは、表示したいものを表現するために HTML の断片を扱うだけ。これらのHTMLの断片はしばしば”テンプレート”として知られており、JavaScript を使用してテンプレートを操作したり、データで埋めたりすると、複雑になってしまう。

「シングルページのアプリでは、UI を追跡して状態を維持するのは大変。React を使えば、心配する必要があるのは UIの最終的な状態だけ。UI がどのような状態で始まったかは関係ない。ユーザーがUIを変更するためにどのような一連のステップを踏んだかも問題ではない。重要なのは、UI が最終的にどこで終わったか。」

すごそうですね。

「DOMの修正は本当に遅いので、React を使って直接DOM を修正することはない。その代わりに、インメモリの仮想DOMを修正する。」

「Reactは、アプリ内のすべてのものがどのように振る舞うべきかについての意見を持つ本格的なフレームワークではない。その代わりに、Reactは主にViewレイヤーで動作、つまり、MVC (Model-View-Controller) アーキテクチャの M と C の部分には、好きなものを自由に使うことができる。この柔軟性により、使い慣れたテクノロジーを選択して使用することができ、React は新しいウェブアプリを作成するときだけでなく、大量のコードを削除したりリファクタリングしたりせずに強化したい既存のアプリにも役立つ。」

おお、Djangoの時に勉強していたMVC（DjangoではMTV）が出ました。

この後、2章、３章まで手を動かしてやりましたが、明日また報告します。