酒飲み与太話メモ

技術系日記 javascript

日曜日の夜に勢いにまかせて書いたエントリです。

今日は3人で集まってLTしてもくもく会やってお酒を飲んだ。

@keicy_silurusがReactについて僕よりも先輩だったのでいろいろ話を聞けてよかった。
酒の席での話もあるので書き残すのも無粋な気はするが明日になったら記憶が維持できない気がするので残しておく。

Stateとイベント伝播

Reactを書いていて気になるのがstateとイベント伝播について。

Reactではimmutableなものについてはpropsで親から子にデータを渡し、mutableなものはstateで管理する、のが一般的なように見える(違ったらすみません)。 そうしたときに、stateはなるべく一箇所に固めたい、と僕は思っている。 仮想DOMが差分を吸収してくれるのだから、ルート要素が状態(=state ってまんまか)をもち枝葉の部分では状態を気にしない。
渡されたものだけ処理すればよくなっているというのが安定なコンポーネントだと思う。

一方でイベント伝播について。 例えば<ul>が1つのReact Componentであり、なおかつその子の<li>要素1つ1つもReactComponentであるとき。どれがいまクリックされてるかを管理したいとする。
(メニューのリストなどでよくあるアレ)

「誰がクリックされているか」は親要素に伝えなきゃいけないがそのstateは子の<li>要素から直接<ul>要素を示すReact Componentには伝えられない。
ハンドラを引き渡すのがよくあるパターンのようだ。

var Menu = React.createClass({
  clickHandler: function() {
    // propに伝えてあげるだけ
    this.props.clickHandler(this.props.menuName);
  },
  render: function() {
    return (
      <li onClick={this.clickHandler}>
        {this.props.menuName}
      </li>
    );
  }
});

var MenuList = React.createClass({
  // 実際のclick時の処理用
  clickHandler: funciton(name) {
    var newMenus = this.state.menus.map(function(e) {
      return {
        name: e.name,
        selected: e.name === name
      };
    });
    this.setState({
      menus: newMenus
    });
  },
  getInitialState: function() {
    return {menus: [{ name: "menu1", selected: false},
                    { name: "menu2", selected: false}]};
  },
  render: function() {
    var menuElms = this.state.menus.map(function(e, i) {
      return (
        <Menu key={i} menuName={e.name} 
          clickHandler={this.clickHandler} // propで引き渡してあげる
          selected={e.selected} />
      );
    }.bind(this));
    return (
      <ul className="menuList">
        {menuElms}
      </ul>
    );
  }
});

この程度だったらかわいいものだが、大概メニューなんてのは更に大きなものの一部だったりするわけで。

「stateをルート要素にもたせたい」と「stateをいじるためにはそこまで伝播させる必要がある」の2つの間に挟まれて今日もprop定義する日が続いた。

flux

お互いわからんで終わった。
たぶん上に書いたようなナニカを綺麗にしてくれるんじゃないだろうか。
たぶん。

公式にfluxのtutorialもあると聞いたので概念を知りたいところ。

.bind(this)

高階関数とかを使うと普通はthisが変わってしまうが(そりゃそうだ)React Componentにおいてthisはかなり重要なものなので.bind(this)を連打する羽目になる。

まああるいはthisやthisを通じてアクセスするプロパティを変数にキャプチャしてクロージャでとってくればいいのだが。
なんかいいやり方ないの？と聞いてみたが結論はes6のarrow function使えだった。なるほどね

テスト

Reactでテスト書くときって、そもそも何をテストしておくべきなのかという疑問があった(テスト観点の話)。
あと、テストは普通にmocha + powerassertとかで殴ればいいのかもよくわからんかった。

ので、keicy先輩に聞いたら第一の答えが「これ嫁」だった

reactkungfu.com

折を見て読んで、さらに折を見て訳したい。

第二の答えはjestにのっかるかmochaで殴るかは好みでいいんじゃないかと言われた。

とりあえずはmochaで殴りにいく予定。

結局Reactどーなの

巨大になるとイベント伝播地獄とかがありそうでびみょいなーと思っている。
たぶんReactをベースにしたナニカが必要。 さらにたぶんが重なるが、fluxがそこに適合する考え方のはずなのでいくつか実装を漁ってからじゃないと評価できないかも。

ReactComponentの資産価値がいまいちわからなくてそこが評価しにくい。

stateの変化をいい感じに察して書いてくれるのはとてもよいと思う。

微妙にはてなを浮かべつつもReactがんばろーかなと思えた。

蛇足

コードはKobitoでそのまま書いたので間違ってたらごめんなさい