React全部バケツリレー自動化

2016-03-21

THE バケツリレー

このようなコードを書くと、Contextのstateとpropsが合体したものが、各Componentにpropsとして配給される感じです。

let user = new User(JSON.parse(dom.getAttribute('data-user')));

ReactDOM.render(
  <Context {...{user}}>
    <Component/>
    <SubComponent/>
  </Context>
  , dom);

Contextのrenderをこうします。

render() {
  let props = Object.assign({}, this.props, this.state);
  delete props.children;

  let {children} = this.props;
  let elements = !!children.map ? children : [children];

  return <div className="context-wrapper">
    {elements.map((child, i)=> React.cloneElement(child, Object.assign(props, {key: i})))}
  </div>;
}

これで、最初の例だと、userはComponentにもSubComponentにも配給されて、並列関係として描画されます。

なぜ

現在作成中のものでは、SPAではなく、各機能ごとにReactでひとつのセットを作成しました。結果、12機能ぐらいに分割されましたが、最初に出したようなコードを機能ごとに書くことになりました。

その際、機能が違えば扱うstateもpropsも変わるわけですが、Contextの中にComponentが具体的に出てきたり、具体的にpropsを書くのはなんだかめんどくさいなぁと思ってこうなりました。

Contextは処理に集中、ComponentはUIに集中、ReactDOM.renderでどれを使っていくか決めるみたいな分け方ができて、比較的コードがとっちらからずに済んでよかったです。