ReactのAPIを眺めてみた
先日から少しずつ触っているReactですが。
とりあえず日本語で入門的な情報がまとまっている 一人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
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として提供されている。
サポートされているタグや属性、イベントはこのあたりを見る。
参考
うん、入門React欲しくなってきた。
入門 React ―コンポーネントベースのWebフロントエンド開発
- 作者: Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen,宮崎空
- 出版社/メーカー: オライリージャパン
- 発売日: 2015/04/03
- メディア: 大型本
- この商品を含むブログ (2件) を見る
