読者です 読者をやめる 読者になる 読者になる

Umi Uyuraのブログ

Titaniumを使ったスマートフォンアプリ開発を中心に、プログラミング関連の作業ログ。

ReactのAPIを眺めてみた

React

先日から少しずつ触っている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() 指定した typeReact.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 の使用は divbutton などの組み込みコンポーネントに限ることが望ましい。

PropとState

Stateの更新

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

HTMLタグ

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

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

参考

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

入門 React ―コンポーネントベースのWebフロントエンド開発

入門 React ―コンポーネントベースのWebフロントエンド開発