使用基本组件的反应 - 最佳实践

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很快。

作曲和建立反应的大部分反应的益处。每当他们让其他组件更容易理解或更改时，写辅助组件。