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

对于这样的情况,组件没有状态,如果我不打算使用jsx：是否有任何缺点(性能或其他方面)只使用函数而不是创建组件？ IE,将它减少到这样的东西(用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'))