目次

• Stateless functional componentsとは
• デザイナーにも優しい構文
• Stateless functional componentsのプロパティ
• 注意点: Stateless functional componentsにはref属性は付与できず
• まとめ

Stateless functional componentsとは

Stateless functional components（SFC / Stateless function components）は、React v0.14で新たに追加されたシンプルに書けるコンポーネントとなります。Reactを書いていると、共通ヘッダーやフッターとして使うようなコンポーネントなど機能にはほとんど関係なく状態を持たない（ステートレスな）シンプルなコンポーネントを書くことも多々あるかと思います。

こうしたシンプルなコンポーネントを書くための新しい構文として、Stateless functional componentsがReact v0.14で追加されました。Stateless functional componentsは、その名の通り関数で書くコンポーネントで、引数でpropsを受け取り、戻り値としてレンダリングしたい要素（DOM）を返すだけのものとなっています。

• Stateless Functions – Reusable Components | React

デザイナーにも優しい構文

Reactの場合、テンプレートの部分もすべてJavaScriptファイル内に書くため、デザイナーで特にJavaScriptを書かない方には、難しく思われがちです。

基本構文

ただ、このStateless functional componentsはその名の通り、JavaScriptの関数を使って以下のように簡単にコンポーネントを書けるようになっています。JavaScriptが苦手な方も、書き方さえ覚えてしまえばさほど恐れる心配はありません。簡単に言えば「DOMを関数の戻り値に書く」だけです。

function HelloMessage(props) {
  return <div>Hello {props.text}</div>;
}

ReactDOM.render(
  <HelloMessage text="World" />,
  document.querySelector('content')
);

Stateless functional componentsを書くポイントは以下の通りです。

上記を通常のReact.createClass()を使ったコンポーネントの書き方で書くと以下のようになります。オブジェクトリテラル形式で書いたり、render()メソッドを使ったりだとか、Stateless functional componentsと比べると若干複雑であることがわかります。

var HelloMessage = React.createClass({
  render: function () {
    return (
      <div>Hello {this.props.text}</div>
    );
  }
});

ES6のAllow Functionで書くと

ちなみに、Stateless functional componentsはES6（ES2015）のアローファンクションを使って書くこともできます。以下のようによりシンプルに書くことができます。

const HelloMessage = (props) => <div>Hello {props.text}</div>;

ReactDOM.render(
  <HelloMessage text="World" />,
  document.querySelector('content')
);

JSXを複数行で書く場合は、以下のようにも書けます。

const HelloMessage = (props) => (
  <div>
    Hello {props.text}
  </div>
);

変数などを指定する場合は、以下のように書きます。

const HelloMessage = (props) => {
  let text = props.text;
  return (
    <div>
      Hello {text}
    </div>
  );
};

ファイルを分割して書く場合（エクスポート）

ファイルを分割して書く場合は、他のファイルで読み込めるように関数を以下のようにES6のexportを使ってエクスポートしておく必要があります。

import React from 'react';

function HelloMessage(props) {
  return <div>Hello {props.text}</div>;
}

export default HelloMessage;

Stateless functional componentsのプロパティ

Stateless functional componentsは、その中で状態を持たないため、通常のComponentで使えるcomponentWillMount()メソッドのようなライフサイクルメソッドを持っていません。Stateless functional componentsが持つのは以下の2つのプロパティのみとなります。

これらのプロパティを使って、以下のようにValidationやpropsのデフォルト値を定義することができます。

function HelloMessage(props) {
  return <div>{props.text} {props.children}</div>;
};
// Validationを定義
HelloMessage.propTypes = {
  text: React.PropTypes.string.isRequired, // string型で必須
  children: React.PropTypes.string.isRequired // string型で必須
};
// propsのデフォルト値を定義
HelloMessage.defaultProps = {
 text: 'Hello',
 children: 'World'
};

ReactDOM.render(
  <HelloMessage text='Hello'>World</HelloMessage>,
  document.querySelector('.content')
);

PropのValidationについては、以下をご参照ください。

• Prop Validation – Reusable Components | React

注意点: Stateless functional componentsにはref属性は付与できず

Stateless functional componentsは、ref属性を使ってコンポーネントのDOMを参照するためのBacking Instanceを持っていないため、ref属性をコンポーネントに設定することができません。ref属性を付与したとしてもnullが返されます。

ただ、どうしてもStateless functional componentsのDOMにアクセスしたい場合の方法について、Reactのドキュメントに以下のような記述があります。

if a user wants to find the DOM node of a stateless function component, they must wrap the component in a stateful component (eg. ES6 class component) and attach the ref to the stateful wrapper component.

つまり、通常の状態を持ったComponentでStateless functional componentsをラップして、状態を持ったComponentにref属性を設置しなくてはいけないと書いています。

どういうことかいまいちわからなかったので、以下のようなサンプルを作ってみました。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {val: this.props.val};
  }
  handleChange() {
    this.setState({val: this.refs.myInput.value});
    console.log(this.refs.myComponent.childNodes[0].textContent);
  }
  render() {
    return (
      <div ref="myComponent">
        <HelloMessage>{this.state.val}</HelloMessage>
        <input
          type="text" value={this.state.val} ref="myInput"
          onChange={this.handleChange.bind(this)}
        />
      </div>
    );
  }
}

function HelloMessage(props) {
  return <div>{props.text} {props.children}</div>;
};

ReactDOM.render(
  <App val='world' />,
  document.querySelector('.content')
);

親コンポーネントとして通常の状態を持ったコンポーネントを作って、Stateless functional componentsを子コンポーネントとして設定し、さらに親コンポーネントにテキストフォームを設置して、そこに入力されたものを子コンポーネントに渡して表示するといったものです。

親コンポーネントに「myComponent」という値のref属性を付けて、テキストが入力されるたびに「this.refs.myComponent.childNodes[0].textContent」というプロパティで子コンポーネントの値を取得させるようにしました。一応、Stateless functional componentsのDOMにアクセスすることはできましたが、こういうことを言っているのでしょうかね？と言ったところです。

まとめ

Stateless functional componentsを一通り見てきましたが、結構使い道はあるんじゃないかなと思っています。とてもシンプルに書けるところがなんだかんだで一番の魅力です。この書き方は、Reactの開発元のFacebookでも推奨している書き方のようです。

次回以降のバージョンにおいて、不必要なチェックやメモリの割り当てを避けられるようになり、Stateless functional componentsに特化したパフォーマンスの最適化がなされるようです。書く側の負担も減らせるし、Stateless functional componentsはどんどん使っていきたいところですね。