प्रतिक्रियाएं: क्या सामान्य कार्यों पर प्रतिक्रिया घटकों का उपयोग करने के फायदे हैं? वहाँ किसी भी नुकसान कर रहे हैं (:

Question

React.js डॉक्स

var Avatar = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <ProfilePic username={this.props.username} /> 
     <ProfileLink username={this.props.username} /> 
     </div> 
    ); 
    } 
}); 

var ProfilePic = React.createClass({ 
    render: function() { 
    return (
     <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} /> 
    ); 
    } 
}); 

var ProfileLink = React.createClass({ 
    render: function() { 
    return (
     <a href={'http://www.facebook.com/' + this.props.username}> 
     {this.props.username} 
     </a> 
    ); 
    } 
}); 

React.render(
    <Avatar username="pwh" />, 
    document.getElementById('example') 
); 

से कोई राज्य के साथ उदाहरण this sample के लिए ले रहा है इस तरह के मामलों के लिए, घटकों के साथ, और अगर मैं कर रहा हूँ नहीं jsx का उपयोग करने जा प्रदर्शन या अन्यथा) घटकों को बनाने के बजाय कार्यों का उपयोग करने के लिए? आईई, आप JSX का उपयोग नहीं कर रहे हैं, तो कुछ इस तरह (ES6 में लिखा)

var { a, div, img } = React.DOM; 

var Avatar = (username) => 
    div({}, ProfilePic(username), ProfileLink(username)); 

var ProfilePic = (username) => 
    img({src: `http://graph.facebook.com/${username}/picture`}); 

var ProfileLink = (username) => 
    a({href: `http://www.facebook.com/${username}`}, username); 

React.render(Avatar(username), document.getElementById('example')) 

Answer 1

करने के लिए इसे कम करने, और कोर वर्गों के रन-टाइम सुविधाओं के किसी भी (जैसे componentDidMount, आदि) की जरूरत नहीं है, तो कक्षाओं को अनावश्यक रूप से बनाने का कोई फायदा नहीं है, और वास्तव में, यह कुल (थोड़ा) अधिक कुशल होगा।

कंक्रीट (अभी तक बहुत सरल) रैपर फ़ंक्शन बनाकर जैसे आपने Avatar के साथ किया है, यह कोड पठनीयता में सुधार करता है। हालांकि, यदि आपने कभी भी जेएसएक्स का उपयोग करना शुरू किया है, तो आपको createClass पर स्विच करने की आवश्यकता होगी ताकि गुण ठीक से पारित हो जाएं (क्योंकि प्रारंभिक गुण कन्स्ट्रक्टर फ़ंक्शन को आपके कोड में नहीं भेजे जाते हैं)।