はじめに

• JavaScript 界隈って動きが早くってどんどん新しいものが出現します。この記事で紹介するのは、JavaScript で見た目の部分を作る JavaScript の UI ライブラリ「React」を紹介します。上澄みだけをざっくり説明させてもらいます。
• 有名どこだと、React、Angular、Vue などがあります。私は Angular2 の経験が少しだけあるのですが、React については初心者です。これから独習で React を習得する予定です。

React とは

• 公式サイト：https://reactjs.org/

A JavaScript library for building user interfaces

React を簡単に説明すると

• UI を作るための JavaScript ライブラリ
• Facebook がつくってる
• API もそんなに多くない
• ページ状態を保持
• コンポーネットっていうのがある
• 仮想 DOM と呼ばれる DOM の設計図がある
• 仮想 DOM（DOM の設計図）から本物の DOM を作る

コンポーネット

• 見た目と機能をひとまとまりにしたものをコンポーネントと呼びます。
• Web の UI はコンポーネントのツリー構造と捉えることが可能です。コンポーネントには親子関係があります。その大元は Web ページ全体

仮想 DOM

• React はゼロから DOM を毎回作り直すのではありません。画面を更新する際、React は新旧の設計図を見比べて差分を計算し、パッチ的に DOM 操作を適用します。

まずブラウザのレンダリングの仕組み（ブラウザへ描画するまでの処理）

• レイアウト（Layout）、ペイント（Paint）はブラウザにとって負荷の高い処理らしいです。

仮想 DOM

• DOM(Document Object Model)の略
• 仮想 DOM(Virtual DOM)は、ブラウザが保持している DOM とは別で React 内で仮想の DOM を管理しているのです。

React 内で変更

• React では 本物の DOM と対構造となってる仮想 DOM を定義してます。

• 本物 DOM と切り離されているので、なにかアクションあるとまず仮想 DOM をにいろいろ変更を加えます。

差分抽出

• 仮想 DOM を変更したときの差分を抽出する

再描画

• 差分抽出

• 私にはスキルがないため、したことありまえんが、DOM 操作のパフォーマンスチューニングは人の手によって行っていたが、骨が折れる作業です。しかし、React を使うことにより、 DOM 操作をチューニングがとても簡単になります。場合によっては、React を使ってても親子関係を見直したりある程度チューニングをする必要があります。ですが一からやるより、かなり楽になります。