Reactのコンポーネント内にCSSを書いています。実行速度の問題で悩んでいます。

Question

CSSをReactの各コンポーネントのrenderメソッド内に定義しているのですが、
コメント一覧を表示するような場合にCSSどこに書くべきかで悩んでいます。

ループする子コンポーネントのrenderメソッド内に定義すると、何度もループされるためあまり良くないでしょうか？
対策として、親コンポーネントで定義してpropsで渡す方法を考えていますが、どちらが良いでしょうか？

追記: イベントハンドラのメソッドに関してもどちらのコンポーネントに定義すべきか、同様に悩んでいます。

Answer 1

ループする子コンポーネントのrenderメソッド内に定義すると、何度もループされるためあまり良くないでしょうか？

render 内に定義するという状況があまりよくわからないですが、Component配下ではあっても render 内に定義しているわけではないのではないでしょうか。

敢えて render 内に定義すると

var Timer = React.createClass({
  // 略
  render: function() {
    var divStyle = {
      color: 'white',
      };
    return (
      <div style={divStyle}>Seconds Elapsed</div>
    );
  }
});

ReactDOM.render(<Timer />, mountNode);

のようには書けますが、適切ではないと思います。

対策として、親コンポーネントで定義してpropsで渡す方法を考えていますが、どちらが良いでしょうか？

上述の内容とも関連しますが、props でコード例の divStyle Object を渡すメリットはありません。逆に、Component と Style が分離してしまうので inline-style のメリットが薄れるのではないでしょうか。

追記: イベントハンドラのメソッドに関してもどちらのコンポーネントに定義すべきか、同様に悩んでいます。

これも同様なのですが、メソッドを render() 内に定義することは通常ないと思いますので、親 Component の操作に関するメソッドなら親Componentに定義して子に props として渡す。子の Component の操作に関するメソッドなら子の Component に渡すという判断で宜しいと思われます。

Component 全体を提示していただくと具体的なコメントができるかも知れません。

Answer 2

CSSをrenderメソッド内で定義しているとは、DOMに直接styleを指定しているということでしょうか？

もしそうなら、CSS in JSもしくはCSS Modulesを試してみてはどうでしょうか？
https://facebook.github.io/react/tips/inline-styles.html
http://postd.cc/modular-css-with-react/

Comments

[退会済みユーザー]

Inline Stylesのやり方をしていますが、これがループされるコンポーネントだった場合、このサンプルコードでいうdivStyle(CSSを色々と書いている変数)は親コンポーネントに定義したほうが良いのでしょうか？

[k.tada]

すでにiktakahiroさんも回答している内容ですが、親コンポーネントで子のデザインを定義して渡すのはメリットはないと思います。
子コンポーネントのrenderではなくconstructorで定義すればいいのではないでしょうか？