基本的な部品と反応することを使用する - ベストプラクティス

Question

このようなもののようなボタンのための反応コンポーネントの作成について考えています：

var Button = React.createClass({
    getDefaultProps: function() {
        return {
            classString: '',
            disabled:'',
            text:'',
            link:'',
            onPropagateClick: function(){}
        };
    },
    handleClick: function () {
        this.props.onPropagateClick(this.props.link);
    },
    render: function () {
        return (
            <button className={this.props.classString} onClick={this.handleClick} disabled={this.props.disabled} >
                {(React.Children.count(this.props.children) === 0) ? this.props.text : this.props.children}
            </button>
        );
    }
}); 

.

およびスパンコンポーネントを作成します。

var Span = React.createClass({
    getDefaultProps: function() {
        return {
            classString: '',
            text:''
        };
    },
    render: function () {
        console.log(this.props);
        return (
                <span className={this.props.classString}>
                    {this.props.text}
                </span>
            );
    }
});

.

およびボタンの子としてスパンを渡す必要がある場合

これが私のパフォーマンスにどのように影響するかを誰もが知っていますか？ これは非常に多くの多層の部品を持つのが良い習慣ですか？

あなたの考えをありがとう

Answer 1

パフォーマンスに影響を与えるでしょうが、それをすることからあなたを元に戻すことはできません。それはただのJavaScriptのちょっとしたJavaScriptであり、JavaScriptは速いです。

組成と建物の抽象化反応のベニの大きな部分。ヘルパーコンポーネントを書くと、他のコンポーネントがわかりやすくなるか、変更や変更が簡単になります。