これはなに
表題どおり。
なかなかReactばっかり触ってるわけにもいかないので、忘れた時のためにメモっておきます。
ついでにリファレンスをちゃんと理解するためにも英訳して載せておきます。
まだちゃんと理解できていない部分も多いのでツッコミ、マサカリ大歓迎です。
Tutorialに出てきた気になるメソッド一覧
React.createClass
リファレンス(React.createClass)
ざっくりなリファレンス訳
ReactComponentクラスはひとつの独立したchildComponentクラスをレンダリングする
renderメソッドを実装します。
childComponentは独自に構築された子Componentを持ちえます。
childComponentクラスがプロトタイプクラスと異なる点は、これらをnewで呼び出す必要がない点です。
これらはnewによってインスタンスを取得する必要がない便利なラッパーです。
Tutorialでもあらゆるところに登場したcreateClass。
ReactのComponentを作るための基本的なメソッドです。
感想としては、引数にオブジェクトを渡して、その中でComponentを色々操作するViewController的な役割をさせるのが良いかと思いました。
Viewの操作や状態の監視をComponentクラスの中で行い、その他の処理はは他にクラスを作って行うのがViewの操作とロジックを分離できて良さそうです。
render
リファレンス(React.render)
ざっくりなリファレンス訳
ReactElementを指定されたDOMのコンテナにレンダリングし、Componentの参照を返します。(this.refsのこと？)
もしReactElementが事前にコンテナにレンダリングされているときにrenderを呼び出せば、ReactElementをアップデートし、React.componetの最新の変更を反映したDOMを描画します。
こちらも基本。
jsxを使っている場合は、renderでjsxで書かれたReactComponentを返すように記述してあげればOKです。
getInitialState
リファレンス(getInitialState)
ざっくりなリファレンス訳
Componentがマウントされる直前に呼び出される。戻り値は
this.stateの初期値として使用される値。
ReactComponentクラスは同スコープ内で参照できるthis.stateという値を持っていて、その初期値を決めるメソッド。
マウントされた瞬間に呼び出されるので、例えばチェックボックスの最初の状態などを渡しておくなどお世話になる機会が多そうです。
getInitialState: function() {
return {data: [key:value]};
}
のようにリテラルで渡しておけばthis.state.keyのようにアクセスできます。
setState
リファレンス(setState)
ざっくりなリファレンス訳
setState(function|object nextState[, function callback])
nextStateを現在のstateにマージします。
イベントハンドラーやサーバーリクエストなどからUIアップデートを行うためのプライマリなメソッドです。
最初の引数は(0もしくはアップデートするキーを含む)オブジェクトかアップデートするキーを含むオブジェクトを返す(stateかpropの)functionです。
例がこちら↓
setState({mykey: 'my new value'});
setStateには名前付きの関数(function(state, props))を渡すこともできます。
これらは値をセットする前に、stateとpropsの値値を扱う更新をキューしたいときに役立ちます。
例えば、stateの値をインクリメントしたい場合は以下のようにします。
setState(function(previousState, currentProps) {
return {myInteger: previousState.myInteger + 1};
});
こちらもReactを使う上で重要になりそうなメソッドです。
チュートリアルではajaxでフェッチしたデータを受け取った際のsuccessコールバックの中で受け取った値をそのままthis.setState({data: data})していました。
setStateを行うことでコンポーネントが 自動的に再描画されるということは覚えておくべきポイントでしょう。
componentDidMount
リファレンス(componentDidMount)
ざっくりなリファレンス訳
最初のレンダリング時にクライアント(サーバーではない)に一度だけ呼び出されます。Reactのライフサイクルおいて、Componentは
React.findDOMNode(this)によってアクセスできるDOMを持っています。
もし他のJavaScriptフレームワークと同時に使う場合、setTimeout、setInterval、AJAXリクエストのいずれかを使ってタイマーをセットし、このメソッドの挙動を制御しましょう。
Componentがレンダリングされた直後に呼び出されるメソッドです。
チュートリアルではこのメソッドでajaxでデータをフェッチし、Componentが描画されると同時にデータを反映するという処理でしたね。
ReactComponentにはライフサイクルが存在し、どのタイミングで何を呼び出すかを都度考えながら実装していく必要があります。
このへん結構ネイティブアプリの感覚に近いかもしれない。
最初の描画はcomponentDidMountで行い、それ以降のUIの更新はsetStateで行うのが良さそうです。
React.findDOMNode
リファレンス(findDomNode)
ざっくりなリファレンス訳
DOMElement fincDOMNode(ReactComponent component)
Componentが事前にDOMにマウントされていれば、対応するブラウザのネイティブDOM要素を返します。このメソッドはformの値などDOMの外にある値を読むのに役立ちます。```render```がnullやfalseを帰す場合、findDOMNodeはnullを返します。
DOMを取得するのに利用するメソッドです。
チュートリアルではformのinput要素にref属性をもたせ、それを参照する形でinput要素を取得していました。
//authorにセットされている値を取得
var author = React.findDOMNode(this.refs.author).value.trim();
React13.1以降に登場したメソッドなのですが、なぜか12.7を読み込んでチュートリアルをやっていたので呼び出せなくて地味にハマりました。
書いてみた感想
いわゆるJavaScriptフレームワークに触れるのは初めてだったのですが、Componentを定義してそれを組み合わせてUIを作っていくという感覚は面白いですね。
ネイティブアプリのように高度に要素をコントロールしながらUIを組めるので、状態を管理して複雑な処理をする場合でもシンプルに実装できそうです。
ただ、Reactはまだjsxが使用できるのでマシな方なのですが、デザイナーさんがComponentを編集する際の敷居はまだまだ高いなぁという印象です。
また、可読性を持たせてメンテナブルなコードを保つテクニックなどもっと調べてみたいところです。
この辺ネイティブアプリの知見も活かせそう。
まだまだ黎明期なJSフレームワークですが、色々触って動きの早いフロントエンド界隈に追従していこうと思います。
あ、訳してる途中にいい感じにReactAPIを翻訳しているサイトもあったのでこちらに参考にされると良いかと思います。
http://js.studio-kingdom.com/react