Reactコンポーネントを純粋な関数で書こう

　Reactコンポーネントの書き方は色々あり、es6を使う場合の選択肢は以下の2つがあると思います；

• クラス
• 純粋な関数

クラス

　classの構文を使う場合、React.Componentクラスを継承してコンポーネントを定義します。

class App extends React.Component {
  render() {
    return (
      <div className="app-component">
        {this.props.hello}
      </div>
    );
  }
}

純粋な関数

純粋な関数としてコンポーネントを定義する場合、JSX記法で書いたDOMを返すような関数を記述します。なかなか直感的に書くことができます、親コンポーネントから渡されるpropsも引数として宣言します。

const App = ({ text }) => (
  <div className="app-component">
    {text}
  </div>
);

違いは？

　ざっくり言うと状態(state)を持つか持たないかのようです。クラス構文であればstateを持ったコンポーネントを作ることができますが、純粋な関数のコンポーネントではできません。純粋な関数のコンポーネントは引数(props)のみ使用し、実際それはコード上で関数の引数として表現されます。(2つの例でのtextの扱いの違いのような感じです)

　また純粋な関数のコンポーネントではrefが使えないそうです。その理由は説明によるとbacking instanceを持っていないから、だそうです。 静的 なコンポーネント、というイメージでしょうか。申し訳ないですが詳しくはこちらを参照くださいStateless functions

例：コンストラクタ内でstateを定義する。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ...
    };
  }
  ...
  render() {
    ...
  }
}

感想

　reduxのチュートリアルで初めてStateless functionで書かれたReactコンポーネントを見ましたが、状態管理をreduxに任せる立場からするとそれは当然なんだろうな、と今になって思いました。

　ReactのStatelessなコンポーネントを作ることは、新しいhtmlのタグを定義することに近い気がしました。