2015-02-12 18 views
8

hiçbir devlet ile bileşenlerle, böyle durumlar için React.js docsReactjs: React bileşenlerini normal işlevler üzerinde kullanmanın avantajları var mı? (Herhangi bir dezavantajları vardır:

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') 
); 

örneğin this sample için alarak, ve benJSX kullanacağız olmadığımı performans veya başka türlü) sadece bileşenleri oluşturmak yerine işlevleri kullanmak için mi? IE, o zaman JSX kullanmıyorsanız (ES6 yazılmış) böyle bir şey

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')) 

cevap

1

indirgeyerek ve çekirdek sınıfların çalışma zamanı özelliklerinden herhangi (gibi componentDidMount, vs) gerekmez Sınıfları gereksiz yere yaratmanın bir avantajı yoktur ve aslında, (biraz) genel olarak daha verimli olacaktır.

Avatar ile yaptığınız gibi beton (henüz çok basit) sarmalayıcı işlevleri oluşturarak, kod okunabilirliğini artırır. Bununla birlikte, eğer JSX'i kullanmaya başlıyorsanız, createClass'a geçmeniz gerekir, böylece özellikler düzgün bir şekilde iletilir (çünkü başlangıç ​​özellikleri kodunuzda olduğu gibi yapıcı işlevine aktarılmaz).

+0

Cevabınız için çok teşekkürler! – Steve

İlgili konular