기본 구성 요소와 반응 사용 - 모범 사례

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가 빠릅니다.

컴포지션 및 건물 추상적 인 반응의 베르기의 큰 부분.다른 구성 요소를 더 쉽게 이해하거나 변경할 때마다 도우미 구성 요소를 작성하십시오.