Reactとは

- UI開発用JavaScriptライブラリ

• not フレームワーク
• View用のコンポーネント

キーワード

• Flux

  • ページ下部に記述

• JUST THE UI

  • React.jsはComponentを作るためのライブラリ

• VIRTUAL DOM

  • バックエンドにあるDOM構造を抽象化したデータ構造
  • rerenderされるときに、その構造体の前後の状態を比較し、差分更新でDOMに反映
  • 必要最低限のDOMしか更新されないので高速に処理する

• DATA FLOW

  • ステートレスコンポーネント
    • Stateは親がもつ
    • 子にはPropsで渡す
    • Propsは不変で子はStateを持たない
  • コンポーネントのI/F: PropsとState

• State

• Props

• JSX

• Immutable.js

  • Immutableなデータ構造を提供するライブラリ

Flux

• アーキテクチャ
• observerパターン
• Reactとは疎結合
• データフローは常に一方向

• Action

  • トリガーされたイベントに応じてデータを構築し、Dispatherへ

• Dispatcher

  • Actionから命令とデータを受け取り、命令に沿って配送先へデータを配信する

• Store

  • データを命令に合わせて操作する
  • Storeは複数のViewへデータを配送することがある

• View

  • Storeが更新されるとデータがViewにくる
  • Reactはデータに従いDOMを差分更新する
  • Viewはイベントに応じてActionを発行できる