キーワード、関数など

コンポーネントのライフサイクルメソッド

「componentDidMount」「componentWillUnmount」はコンポーネントのライフサイクルメソッドです。

componentDidMount

読み込み時にアクションを呼び出す

react-reduxでページ読み込み時、actionを呼び出す方法 | Gaku'sMemo
http://goo.gl/lVwP0V

ちょっとわかり始めた時に、かなりいい例示コードな気がするんだけどどうかな

Reduxで定期的なアクションを実行する簡単なサンプルを作ってみた | WebDesign Dackel
http://goo.gl/UFJOR7

componentWillUnmount

マウントの後のアクション呼び出し

require.ensure

jsファイルを後から読み込
webpackによる分割をするための記述で、ひきすうで分割後のファイル名を指定できるのか、
なるほど、分割されたjsファイルをちゃんと命名してあげる

webpackのrequire.ensureでDynamic Loadingをして大規模アプリケーションを作る - Qiita
http://goo.gl/Mbwxpi

createSelector

便利らしい。

Reduxのreselectとは - Qiita
http://goo.gl/RM31To

connect

connect,mapStateToProps, mapDispatchToPropsあたりの位置付けがよくわからない

公式にもある、mapStateToPropsの内部で処理をするのは、
State is read-only(状態の更新はアクションからだけ？)
に反していないのかどうなのか。

subscribe, propTypes

この辺に書いてあることもちょこちょこよくわからない。

なるほど。

むしろややこしいのがReact-Reduxを使ったReactとReduxの連携の方だと思います。特にconnectメソッドの部分で、自分も最初何のことやらと戸惑いました。実際に動きを確認しながら実装してみることで、それなりに理解できるようになるかと思います。

課題や不明点

コンテナのファイルにいれるか、コンポーネントのファイルに分けるか

ここの例だと、コンポーネント部分の処理はそこまで複雑ではないけど、コンテナにjsxを書いている。

ミドルウェアを活用するべき？reduxの弱点への対策？？

Reduxのmiddlewareを積極的に使っていく - Qiita
http://goo.gl/Ufvk2k

Actionを投げる部分ってのはだいたい何かのイベントハンドラだったりしますが、そういう場所に通信やインタラクションの処理をダラダラと書きたくない。
本稿ではそれらの面倒な部分を責務が分離されたメンテナンスのしやすいコードになるようにmiddlewareを活用する例をいくつか紹介します。

2つのmiddlewareを通じてどうやって肥大化、複雑化する非同期処理、副作用コードと戦っていくかを示しました。middlewareはStoreに直接アクセスできることから、やろうと思えば何でもできちゃうところが強力でもあり、混乱のもとにもなりえます。幸いなことにmiddlewareを細かく分割しても applyMiddleware で簡単に結合できますし、困ることはありません。またmiddlewareにすると他のプロジェクトでも同じパターンが使えることが多いです。

React.createClass

リスト表示＋ページングを実装しながらReact.jsを理解してみる - Qiita
http://goo.gl/XdhqND

reactで、jsxを分割する時に使った。
reactのコンポーネントの一種でトップレベルAPIに含まれる基本的な概念っぽい。

Top-Level API | React
https://goo.gl/RfLAc4

React.jsのComponentについて - Qiita
http://goo.gl/Sh3u96

つまりElementではないので、使うときにはReact.createElement(Component, {name: 'xxx'})のようにReact Elementにしてあげる必要があります。ちなみにReact.createFactory(Component)とやることも出来ます。
ただJSXを使っている場合は、これまでと同じようにReact.createClassの戻り値をのように直接渡しても大丈夫です。

JSXではエレメントと相違なく違和感なくよびだせるけど、スクリプトの時にはエレメントに渡す。。っぽい。

Reactのコンポーネント

JSXでコンポーネントを呼び出したりするけど、見た目は一緒に見えてもその実体？は、
createElementで作ったエレメントだったり、createClassで作ったカスタムコンポーネントだったりする。。？？

React.jsのComponentについて - Qiita
http://goo.gl/Sh3u96

Top-Level API | React
https://goo.gl/RfLAc4

React 0.13 日本語リファレンス | js STUDIO
http://goo.gl/OIUbeS

React 入門 #2 - Component
http://goo.gl/AoT2JA

いまさら聞けないReact、Virtual DOM、JSX超入門 (1/3) - ＠IT
http://goo.gl/UFLFsL

ループのdomのためにユニークなキーを振るべし

配列に対してキーは事前に振っておかないとだめなのか、あとでループの時に簡単にインデックスと取れないのか。

下記でできた。コードのコメントをみると、

The provided mapFunction(child, key, index) will be called for each leaf child.

とあり、下記のようにしたらキーが振れた。
でも、indexを追加するとリストの値が入ってきたんだけどどういうことだろう。
オブジェクトの配列とかだったら要素のキーが入るということかな。

this.props.data.map(function (row, key)

Support map(), filter(), find() and forEach() on cursors · Issue #32 · dustingetz/react-cursor
https://goo.gl/XbbtLh

React.jsでPropやStateを使ってComponent間のやりとりをする - Qiita
http://goo.gl/EyFFCv

React.jsの地味だけど重要なkeyについて - Qiita
http://goo.gl/1wsyZH

ループで描画

基本はdomのパースとかはするなということかしら？？

React.jsのJSXで条件分岐・繰り返しを記述する - Qiita
http://goo.gl/tKv7TE

仮想ではないhtml domを出力

JSXを使わずにreact-jadeで仮想DOM出力 - Qiita
http://goo.gl/fqKX7o

Dangerously Set innerHTML | React
https://goo.gl/c8urRH

function createMarkup() { return {__html: 'First &middot; Second'}; };
<div dangerouslySetInnerHTML={createMarkup()} />

javascript - How to convert an HTML string to virtual DOM in React? - Stack Overflow
http://goo.gl/ONbgjc

あとから作ったdomをreactに取り込むことの苦労かな？
react-magic
DocParser

html-to-react
https://goo.gl/NeCi2J

関数を子コンポーネントから呼ぶ

トップレベルのreducterから渡されたpropsのなかの関数を、子のコンポーネントから呼び出したいのだが、、dataのように渡すのは気持ち悪い気がする。。

複数のコンポーネント | React
https://goo.gl/sHBpNc

React.js で親子関係にある component の更新順序 - scramble cadenza
http://goo.gl/tvezro

どうも、この例ではthis.incrementを渡しているみたい。

<Child increment={this.increment} />

ReactなComponent同士を連携させたい | moxt
https://goo.gl/CY2pMz

コンポーネント間の連携 | React 0.13 日本語リファレンス | js STUDIO
http://goo.gl/NIVC6s

この辺を見ると、propsでわたしたり、コールバックを渡すのはありっぽい。
さらに複雑な場合にはjQueryとかFluxをつかうとか書いてる。。

react-router v2.xとcontext | Solutionware開発ブログ
http://goo.gl/63iICd

contextを使用すると、データの流れが不明瞭になりますので、コードを理解するのが難しくなります。あなたのアプリでcontextを使うということは、グローバル変数としてstateを受け渡すのと同様のことなのです。

contextを使うと、バケツリレーをしなくていいらしいけど、推奨されないっぽい。

reduxの場合には、、dispatchが関係するとうまくいくかもしれない気がする。。

このへんのことは、reduxではなく、reactの原理としてpropsで伝播させることが影響しているのかな。
純粋なreduxだけだと、connect関数でpropsに紐付けるのではなくて、storeからディスパッチするっぽい？？

store.dispatch(actionCreators());

TestLab = ReactRedux.connect(select)(TestLab);

ここまで調べて、、下記の記事に似たようなことがより深められているなと思った。

ReducerはfluxのStoreから部分的にロジックを切り出したもので、ActionからどのようにStoreの値へ落としこむかのロジックだと思います（値を書き換えないという違いはありますが）。fluxだとこれを完全にStoreの内部でやっていて、AppDispatcher.registerのcallbackでswitch文まみれになっている箇所がそれです。このサンプルなんかはReducerですがswitch文になっていてStoreのあの箇所とよく似ています。

上記のエントリでは、Immutable.jsを利用して回避したそうです。こんな感じになります。

state.getなどメソッド経由でアクセスするのが面倒ですが、Reactコンポーネント等の読み取りで利用する場合はtoJS()でオブジェクト化してアクセスする事もできます。

Object.assignを使うほうが一般的かもしれません。

ここまででは幾つかの選択肢が挙げられているが、、どうするべきか、、。
少なくともバケツリレーを回避することは状態変更などを伴わない、
コードがあまり複雑化しないのなら（？）アリっぽい気がする。

下記のようにpropsごと子に渡してみたら実行できたがダメかしら。。

<LinkList parent={this.props}/>

この辺がどうも気持ち悪い。。JSXで指定するのではなく、もっと頭の部分で管理したいんだけど。。
もしくは、親コンポーネントから許可するみたいな形式。
もういっか、結構な時間をかけて調べたし。そのうちわかるかもしれないし。

子コンポーネントの制御

この制御を親に移譲するという考え方だと、プロパティを引き継ぐ時に考え方が比較的しっくりする。
また、プロパティを受け渡す時にもそのまま受け渡すのではなく、
初期値として受け渡して、内部のプロパティ管理と区別すると良い。

React.jsでES6の文法を使って defaultProps などを設定する - Qiita
http://goo.gl/7KdegI

React.jsのProp - Qiita
http://goo.gl/21KzFE

React FluxアプリをReact Redux(ES2015)で書き直した時のメモ | 69log
https://goo.gl/n1lEHU

React.jsでPropやStateを使ってComponent間のやりとりをする - Qiita
http://goo.gl/EyFFCv

継承を使えば、親コンポーネントのsuperで関数を実行できるのかな。
これは、、どうなんだろう。

React.createClass versus extends React.Component @toddmotto
https://goo.gl/PUybgw

子コンポーネントをどうやってつくるか

カスタムコンポーネント(createClass)
- さらにcreateElementする本当の意味でクラスが必要なら意味がありそう
- そのままJSXで使う this.propsを引き継ぎはJSX上で行うので面倒もあるかも
エレメント(createElement) JSXではあたいの引き渡しができないっぽいが、this.propsを引き継げる。基本はこれでいいんじゃね。。。

this.props.dispatchを使う

pushState in Redux Router - (rudolph-miller)
https://goo.gl/2BsAkC

dispatchをconnectするときに使う。

時期では配列に含めたり、bindActionCreatorsと階層を分けるようにしたりしているが、そのままassign()でもいけるのはいけるっぽい。

return bindActionCreators(Object.assign({}, {dispatch: dispatch}, {doubleAsync: doubleAsync}), dispatch)

ハンドラーを一括で記述するのは下記みたいに記述するっぽい。三点リーダーは配列の展開だっけ。

export default connect(mapStateToProps, (dispatch) => ({
    ...bindActionCreators({fetchUsers}, dispatch), dispatch
}))(Users);

まあ、使う必要はないのかも。

非同期のActionCreatorのreact-thunk

下記参考したいのだが、まだわかってない。

日本語ドキュメント

Top-Level API | React
https://goo.gl/z1xknR

.htmlを-JP.htmlにすると日本語なのか。。でもサイドバーはいつも英語のリンク？なんで？
存在しない場合もあるな。。

bindActionCreators

ある程度必要なチェックなどをしつつ、
dispatchを自動でしてくれるのが主な動きの関数という認識でいいのかな。
じゃあ、使ったほうがいいか。。

/node_modules/redux/lib/bindActionCreators.js

シンプルな構成にするのも大事なのかも。

まだ、発展途上なんだなあ。。っと思った。
現状でも便利ではあるけど依存度が強くなりすぎないように気をつけないといけないのかもしれない。

ひとまず参考

便利さを求めて

redux/Examples.md at master · reactjs/redux
https://goo.gl/Monlqw

redux/examples at master · reactjs/redux
https://goo.gl/JYRlFJ

xgrommx/awesome-redux: Awesome list of Redux examples and middlewares
https://goo.gl/7bymxh

redux/examples/tree-view at master · reactjs/redux
https://goo.gl/4Xqy5m

Redux ちょっとわかってきたこと - Sphereとともに
http://goo.gl/7Q35Vm

日本語ドキュメント的なもの

React Native Redux ドキュメント参考リンク集 - Qiita
http://goo.gl/tcN8iJ

チュートリアル | React
https://goo.gl/obkdbE

fb公式

勉強になりそうだけどまだ