# React.jsをちょっとだけ調べたので残しとく

うちの奥さんが珍しく子どもと出かけたのでこのチャンスを利用して話題のReact.jsを調べてみた。 前に pocket に突っ込んでいた記事を手がかりに開始。

上記記事によると、今から学ぶには以下が良いそうなので、素直に読む。

まだ1行もコード書いてないけど、把握したものを残します。

Component

React.jsは、コンポーネントと呼ばれる単位でオブジェクトを実装する。

  • 以下のサンプルコードの var CommentBoxコンポーネント
  • コンポーネントは、必ず1つの <div> を戻り値として返す。
  • ネストした <div> ならOK
  • JSの中に普通にHTMLが記述されているように見えるが、これはJSX
  • ようするにこのコードはコンパイルしないと動かない(JSXを使わない書き方も出来るがかなり冗長なので微妙な気がした)
  • 以下のサンプルコードだと、React.render で、 #contentコンポーネントが描画される。
  • コンポーネントはDOMの様に見えるけどこれは仮想的なもので、JSがメモリ上にDOMツリーを持っていて React.render するまで描画はされない。
  • 変化したDOMだけを再描画出来るためハイパフォーマンス。これはReactが勝手にやってくれる。
  • これらのコンポーネントを組み合わせてページを構築していく
  • とても再利用性が高い仕組み。ただし設計をミスると今よりつらいかもしれない。
// http://facebook.github.io/react/docs/tutorial.html
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
React.render(
  <CommentBox />,
  document.getElementById('content')
);

PropとState

Propとは、Componentに外から渡せるImmutableなデータ。 サーバーから取得したJSONデータだと思っていいと思う。

Stateとはその逆で、Component自身が管理しているMutableなデータ。 フォームへのユーザー入力などが該当すると思う。

これらはどちらも直接変更することは出来ない。変更は、setProp, setState replaceProp, replaceState メソッドを使う。 上記メソッドを呼び出した場合、コンポーネントは再描画される。 つまり、これによりDOMと仮想DOMのデータ整合性を取っているんだろうと思う。

Immutableと言いつつPropには変更を許容するI/Fが定義されている。 これはちょっと納得行ってない。まぁコンポーネント内で、

  • これはCompornent管理だから変えてもOK
  • これは外からもらったものだから変えちゃダメ

という風にわかりやすいのは良いことだと思った。

コンポーネント間のやりとり

こっちのコンポーネントでの操作をトリガーし、あっちのコンポーネントでフックする、という話。 これは、コンポーネント間で親子関係を作っておいて、

  • 子のイベントを親がフックして別の子へ
  • 親でStateを管理し、子のPropとして使う

みたいな感じらしい。わかりやすくて良い。

その他

などなど色々ある。理由は後述するが調査はここまでとした。

調べてみて

調査前の印象として、HTMLとJSの密結合って実際どうなんだ、というのがあった。ただ実際はコンポーネントという再利用性の高い仕組みによってDRYが実現可能で、より見通しの良いコードになるなーという印象に変わった。これは良い。

ただこう来ると、CSSコンポーネントに含めてしまいたくなった。 それについて少し調べてみると、以下の記事が見つかった。

CSSをComponentのPropとして定義出来るようにすればいいじゃん!的な内容だった。将来的には含まれるかもしれない。そうなったら本格的に触ってみようという気持ちになり、調査はここまで。 楽しかった。

おまけ

調査の過程をTwitterでつぶやいてたので貼っとく。