React.js + Flux入門 #scripty02

React.js + Flux 入門

リッチラボ株式会社穴井宏幸 @pirosikick

2014/12/18(Mon) SCRIPTY#2

©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止

穴井宏幸リッチラボ株式会社エンジニア

@pirosikick(ぴろしきっく)


• 普段はスマフォのリッチ広告を作ったりしています。

JavaScript 好きです

よろしくお願い致します


• Facebook製の

• UI構築のためのライブラリ


http://facebook.github.io/react/


• JUST THE UI

• VIRTUAL DOM

• DATA FLOW

JUST THE UI


• View専門のライブラリ

•ルーティングやAPIリクエストなど、

• SPAを作るのに必須な機能は、

•含まれていない


Hello! World


Hello! World

!?!?


JSX

• JSX →（コンパイル）→ JavaScript

• JSの中でタグを書く

• コンパイル方法

1. JSXTransformer.js

2. react-tools


JSXTransformer.js


react-tools

# react-toolsをインストール $ npm i -g react-tools !

# jsx/にあるJSXを # コンパイルしてjs/に出力 $ jsx jsx/ js/


• Browserify → reactify

• webpack → jsx-loader

Virtual DOM

Virtual DOM ⇓

仮想DOM


なぜ仮想DOMという概念が俺達の魂を震えさせるのか http://qiita.com/mizchi/items/4d25bc26def1719d52e6

http://qiita.com/mizchi/items/4d25bc26def1719d52e6


• 仮想のツリーを持つ

•そこで差分を計算して、

•本物のDOMに反映する

•高速、処理がシンプルに


Model

View

DOM

初期データ追加削除変更

初期レンダー追加削除変更

従来


View

Model

DOM

初期データ追加削除変更

初期レンダー追加削除変更

それぞれ処理が必要

従来


Store

View

DOM

最新の状態を参照

Virtual DOM

変更を通知

レンダー

古新差分

差分を反映

←比較→

VDOM


Store

View

DOM

Virtual DOM

変更を通知

レンダー

古新差分

差分を反映

←比較→シンプル！！！！

VDOM



Store

View

DOM


Virtual DOM

変更を通知

レンダー

古新差分

差分を反映

←比較→

DOM操作は賢くやってくれる

VDOM

DATA FLOW


親

子


親

子


親

子

属性経由でデータを渡す


• this.props

•親→子の一方通行

•理解しやすい

その他よく使う機能


propsのValidation


propsのValidation


propsのValidation


this.state


this.state

stateが更新されると再レンダーされる


イベント


イベント

• Eventはラップされてる

• ブラウザ差異は気にしなくてよい

• stopPropergation, preventDefaultも実行可能


ライフサイクルメソッド

http://facebook.github.io/react/docs/component-specs.html

http://facebook.github.io/react/docs/component-specs.html


Mount

イベントのadd, removeによく使われる


shouldComponentUpdate

再レンダーのタイミングを制御できる



Flux

• Facebookが提唱しているアーキテクチャ

• 特定のフレームワークの名前ではない

• 「MVC」と同じレイヤーの話

• View, Store, Dispatcher

• ViewはReact.js


https://github.com/facebook/flux

https://github.com/facebook/flux


Dispatcher

Views

Store Callback()

Action Creater()

Web API

dispatch()

ActionChange Event

User Interaction


Dispatcher

Views

Store

①クリックとか

Callback()

Action Creater()

Web API

dispatch()

ActionChange Event

User Interaction


Dispatcher

Views

Store

②ActionCreater 実行

Callback()

Action Creater()

Web API

dispatch()

ActionChange Event

User Interaction


Dispatcher

Views

Store Callback()

Action Creater()

Web API

dispatch()

Action

③Actionを発行

Change Event

User Interaction


Dispatcher

Views

Store Callback()

④Storeの Callbackを実行

Action Creater()

Web API

dispatch()

ActionChange Event

User Interaction


Dispatcher

Views

Store Callback()

Action Creater()

Web API

dispatch()

ActionChange Event

⑤内部の状態を変更

User Interaction


Dispatcher

Views

Store Callback()

Action Creater()

Web API

dispatch()

Action⑥変更を通知Change Event

User Interaction


Dispatcher

Views

Store Callback()

Action Creater()

Web API

dispatch()

Action

⑦View更新

User Interaction

Change Event


Dispatcher

Views

Store Callback()

Action Creater()

Web API

dispatch()

ActionChange Event

User Interaction

データの流れが一方通行


例）Todoリスト


<Application /><TodoItem/><TodoItem/><TodoItem/><TodoItem/>


フレームワーク

• 今回は「Fluxxor」を使う

• http://fluxxor.com/

• シンプルで小さいので理解しやすい

http://fluxxor.com/


Dispatcher作成


Action Creatorたち

dispatcher.dispatch() を実行


TodoStore作成


TodoStore作成


TodoStore作成


<Application />


<Application />


<Application />


<Application />

まとめ

シンプルでよい


Don't React http://staltz.com/dont-react/

http://staltz.com/dont-react/


他の仮想DOM系も追っていきたい

• https://github.com/Matt-Esch/virtual-dom

• https://github.com/segmentio/deku

https://github.com/Matt-Esch/virtual-dom

https://github.com/segmentio/deku

Thank you:)

@pirosikick(ぴろしきっく)

Technology

React.js + Flux入門 #scripty02