コンポーネントについて

Reactではコンポーネントと呼ばれる部品のようなものを単位としてUIを構築していきます。

見ている方の多くは気づいているかもしれませんが、そもそも論としてここで書かれているような書き方はレガシーになってしまっているようです。なので参考程度にしてください。一応記録として残しておきます

基本のキ

基本的な定義は以下のようになります。

component

var Component = React.createClass({
  render: function() {
    return React.DOM.span(null, "Component");
  }
});

これが一番簡単なコンポーネントになります。React.createElement(Component)で呼び出し、表示できます。

プロパティ

コンポーネントにはプロパティを渡すことができます。その値に応じて振る舞いを変化させることができます。

component_props

var Component = React.createClass({
  render: function() {
    return React.DOM.span(null, "Contents:" + this.props.content);
  }
});

React.Dom.render(
  React.createElement(Component, {
    content: "Hage Hage",
  }),
  document.getEle...
);

こんな感じで、渡されたプロパティに応じて表示される内容が変わります。また、this.propsは基本的に読み取り専用として扱うそうです。

プロパティに型の制限を加える

component_props_restr

var Component = React.createClass({
  propTypes: {
    content: React.PropTypes.string.isRequired,
  },
  render: function() {
    return React.DOM.span(null, "Contents:" + this.props.content);
  }
});

こうやって定義されたプロパティに指定された型以外の値を渡すとエラー警告が表示されます。こうした仕組みで下の階層でもプロパティの質を担保するということですね。

プロパティのデフォルト値を設定する

さて、省略可能なプロパティがあるときを考えます。そのプロパティが指定されていなくても正しく機能するためには、引数が存在しているかどうか確かめながら処理を書かないといけません。それは大変なので、簡潔に書くことのできる仕組みが用意されています。

component_props_default

var Component = React.createClass({
  propTypes: {
    name: React.PropTypes.string.isRequired,
    address: React.PropTypes.string,
  },
  
  getDefaultProps: function() {
    return {
      middleName: '',
      address: 'なし',
    },
  },

  render: function() {
    return ..
  }
});

ステート

ステートとは、各コンポーネントが独自にもつプライベート変数のようなものです。クリックされるなど、コンポーネントの持つ情報が動的に変わるときにその情報を管理するイメージだと思います。

基礎のキ

State


      var TextAreaCounter = React.createClass({
        propTypes: {
            defaultValue: React.PropTypes.string,
        },

        getDefaultProps: function() {
            return {
                text: '',
            };
        },

        getInitialState: function() {
            return {
                text: this.props.defaultValue,
            };
        },

        _textChange: function(ev) {
            this.setState({
                text: ev.target.value,
            });
        },

        render: function() {
          return React.DOM.div(null,
            React.DOM.textarea({
                value: this.state.text,
                onChange: this._textChange,
            }),
            React.DOM.h3(null, this.state.text.length)
          );
        }

このコンポーネントは、フォームに入力されている文字列の長さをひょうじすコンポーネントになっています。
各パーツごとに見ていきます。

getInitialState:ステートの初期状態を設定します。今回の例では、外から呼び出されるときに渡されるdefaultValueの値をステートに設定します。

_textChange:何かイベントが起こったときにステートを更新する役割を持ちます。

render: valueがstate.textであるようなフォームを生成します。まず、最初に呼び出したときのstate.textの値は、さっきgetInitialStateで定義したようにdefaultValueの値になります。なので、この段階ではdefaultValueで渡した文字列が入ったフォームと、その長さが表示されます。
ユーザーがフォームの値を変えると、それに応じて_textChangeが呼び出されstate.textの値を更新します。そしてフォームのvalueの値が更新されます(ここの解釈は怪しいかもしれません。細かい挙動については現段階では理解できていません、ごめんなさい)。そしてstate.textの値が更新されると、h3タグの値もそれに伴い更新されます。
このとき注意しないといけないのは、当然ですがpropsの値は何も変わらないということです。つまり、state.textの値は入力された値に応じて変化しますが、props.textの値は全く変化しません。とまあこういう具合にプロパティとステートを使い分けましょうという話です。

メモ書き

関数はアロー関数の記法が使える（はず）なのでそっちを使っていきたい。
まだJSXに入ってないのでそこまでいったらどれくらいサクサク書けるのか楽しみですね。
あと、javascriptをちゃんとやったことなくてふらふら〜と理解しているのでどんな型があるとか、固有の構文だとかにもっと慣れたいかな。

参考文献:『React ビギナーズガイド』(Stoyan Stefanov)