Reactの概要

React.js

1. Just the UI
   • MVCのVにあたるUIのみを構築するためのもので、他にどういったライブラリと組み合わせるかは問わない
   • ボタンやテキストが多く、入力した値を即座に表示するような画面
2. Virtual DOM
   • 実際のDOMに対する操作を抽象化し、シンプルなコードでそれなりのパフォーマンスを提供する（仮想DOMが高速）
3. Data flow
   • 一方向のデータフローにより、従来の双方向データバインディングを実現するコードよりも簡素でわかりやすい
   • 規模が大きくなっても管理しやすい

Virtual DOM

• 実際のDOMと対となる構造体（＝仮想DOM）を用意し、その構造体に対して処理を行う
• その差分だけ実際のDOMに反映
• Virtual DOMの実装
  • 構造体と、差分適用のアルゴリズムを合わせたものを
  • この構造体は、ただのJavaScriptのオブジェクト
  • このオブジェクトだけを気にかければ良くなるため、設計コストが下がる

Flux

• データの流れを一方向にすること
• 各コンポーネントが表示すべきデータを個別に更新するのではなく、アプリケーションとして単一のデータフローを形成し、その流れに載せる
• 各コンポーネントの責務は受け取ったデータを表示するだけになる

JSX

HTMLのマークアップのような記述の部分がJSXと呼ばれるもので、Virtual DOMで扱うためのオブジェクトを簡潔に書けるようにした独自記法

// jsxを使わない場合
render: function() {
  return React.createElement('a', { href: 'https://facebook.github.io/react/' }, 'Hello!');
}

// jsxを使う場合
render: function() {
  return <a href="https://facebook.github.io/react/">Hello!</a>;
}

Build

npm install -g react-tools
jsx -x jsx --watch src/ dest/

Reactiveプログラミング

• 「反応する側」と「認識する側」を分けて考え、反応に対して自動的に対応するという考え方
• ある要素が変更されたら、一方向の流れで、関係する要素も変更される

関数型言語

• 関数型っぽく書くと、ほぼ純粋な関数（式）の集合体になるため、疎結合となり、ステート（状態）の管理が簡単
• サーバー側の処理の場合、並列処理（マルチスレッド）が書きやすくなるなどのメリット

コンポーネント指向

shouldComponentUpdate()
Immutable.js