先日から少しずつ触っているReactですが。

umi-uyura.hatenablog.com

とりあえず日本語で入門的な情報がまとまっている 一人React.js Advent Calendar 2014 - Qiita をざっと読んでみました。

後半のAdd-onsやServer-side rendering、テスト関係などはもう少し使ってみないとわからないところもありますが、前半のReactの基本的な使い方はとてもわかりやすかったです。

で、チュートリアルなどを読み進めたり、もう少し具体的な実装をするにあたり、どういったAPIがあるのかをざっと把握したくて、 Reactの公式サイト のREFERENCEを眺めていたのですが、ちょっと一覧性が悪かったので、Cheat Sheet的にまとめておくことにしました。

Top-Level API

React は、React Libraryのエントリポイント。

React.Component

API	概要
React.createClass()	React.Component クラスを生成する
React.createElement()	React.Element を生成する
React.cloneElement()	React.Element を複製する
React.createFactory()	指定した type の React.Element を生成する関数を返す
React.render()	DOMへ React.Element をレンダリングする
React.unmountComponentAtNode()	DOMからマウントしていた React.Component を削除し、イベントハンドラとステートをクリアする
React.renderToString()	React Element の初期HTMLを生成する。Server-side renderingで使用
React.renderToStaticMarkup()	React関連のDOM要素が付与されていないHTMLを生成する。静的ページ向け
React.isValidElement()	React Elementを検証する
React.findDOMNode()	指定したコンポーネントからDOMエレメントを取得する
React.DOM	React.createElement をラップした機能を提供する。非JSX時に利用する
React.PropTypes	コンポーネントの propTypes に設定できる型定数
React.initializeTouchEvents()	モバイルデバイス向けのタッチイベントを有効にする

React.Children

コンポーネントの内容にアクセスするためのAPI。

this.props.children でコンポーネントの内容にアクセスすることができ、以下のAPIにて透過的な操作を行うことができる。

API	概要
React.Children.map()	子要素全てに対して操作実施後、そのオブジェクトを返す
React.Children.forEach()	子要素全てに対して操作を実施する
React.Children.count()	子要素のコンポーネント数を取得する
React.Children.only()	children がひとつのコンポーネントの場合はそれを返し、それ以外の場合は例外を発生する

Component API

React.Component

API	概要
setState()	state を更新し、再レンダリングする。値はマージされる
replaceState()	state を更新し、再レンダリングする。値は置き換えられる
forceUpdate()	render() を再実行する。 this.state を直接変更した場合などに使用
getDOMNode()	DOMへの参照を取得する。Virtual DOMとの整合性を保つため、読み取りのみの使用が望ましい
isMounted()	コンポーネントがDOMにレンダリングされているかどうかを判定
setProps()	Componentに新しい props を渡して再レンダリングする。値はマージされる
replaceProps()	Componentに新しい props を渡して再レンダリングする。値は置き換えられる

Component Specs and Lifecycle

Component Specifications

React.createClass() で生成するコンポーネントに与えることができる要素。

API	概要
render()	必須要素。
getInitialState()	state の初期値を設定する
getDefaultProps()	props の初期値を設定する
propTypes	props のValidation用の方を設定する
mixins	複数のコンポーネント間で動作を共有するmixinを使用する
statics	コンポーネントに静的メソッドを定義する
displayName	デバッグメッセージに使用する。 JSXは自動的にこの値を設定する

Lifecycle Methods

タイミング	API	概要
Mounting	componentWillMount()	コンポーネントの最初のレンダリングが発生する前に呼ばれる
Mounting	componentDidMount()	最初のレンダリングが発生した後に呼ばれる
Updating	componentWillReceiveProps()	コンポーネントが新しい props を受け取った際に呼ばれる
Updating	shouldComponentUpdate()	新しい props もしくは state を受け取り、再レンダリングする前に呼ばれる。再レンダリングが必要かどうかを判断する
Updating	componentWillUpdate()	新しい props もしくは state を受け取り、再レンダリングする前に呼ばれる。更新に対する準備をする
Updating	componentDidUpdate()	コンポーネントの更新がDOMへ反映された後に呼ばれる
Unmounting	componentWillUnmount()	コンポーネントがDOMからアンマウントされる直前に呼ばれる

メモ

コンポーネント内で参照できる変数

変数	概要	備考
this.props.children	コンポーネントの内容にアクセスする	<hoge>xxx</hoge> → this.props.children => xxx
this.props.属性名	コンポーネントの 属性名 にアクセスする	<hoge name='fuga' /> → this.props.name
this.state.状態名	コンポーネントの 状態名 にアクセスする	―
this.refs.子コンポーネント名	子コンポーネントを参照する	<hoge ref='hogege' /> → this.refs.hogege

this.refs の使用は div や button などの組み込みコンポーネントに限ることが望ましい。

PropとState

• prop - 親コンポーネントから渡されるもの。外部とのインターフェイスとして機能する。コンポーネント内で変更はしない。
• state - コンポーネントが変更を管理するもの。これが変更されると再レンダリングが走る。

Stateの更新

• render() を走らせるために、基本的には直接変更せず、 setState() を使用する。
• this.state を直接変更する必要がある場合は、 forceUpdate() を呼び出す。

HTMLタグ

Reactでは、通常のHTMLタグもReact Componentとして提供されている。

サポートされているタグや属性、イベントはこのあたりを見る。

• Tags and Attributes
• Event System

参考

• 一人React.js Advent Calendar 2014 - Qiita
• Getting Started | React

うん、入門React欲しくなってきた。