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

從屬關系

1. 上面例子中，Avatar 擁有 ProfilePic 和 ProfileLink 的實例 ， 擁有者 就是給其它組件設置 props 的那個組件
2. 正式地說， 如果組件 Y 在 render() 方法是創建了組件 X，那麽 Y 就擁有 X
3. 組件不能修改自身的 props - 它們總是與它們擁有者設置的保持一致。這是保持用戶界面一致性的關鍵性原則
4. 把從屬關系與父子關系加以區別至關重要。從屬關系是 React 特有的，而父子關系簡單來講就是 DOM 裏的標簽的關系
5. 例子中，Avatar 擁有 div、ProfilePic 和 ProfileLink 實例，div 是 ProfilePic 和 ProfileLink實例的父級（但不是擁有者）

子級

實例化 React 組件時，你可以在開始標簽和結束標簽之間引用在 React 組件或者 Javascript 表達式：

<Parent><Child /></Parent>

Parent 能通過專門的 this.props.children props 讀取子級。

動態子級

如果子組件位置會改變（如在搜索結果中）或者有新組件添加到列表開頭（如在流中）情況會變得更加復雜。如果子級要在多個渲染階段保持自己的特征和狀態，在這種情況下，你可以通過給子級設置惟一標識的 key 來區分

  render: function() {
    var results = this.props.results;
    return (
      <ol>
        {results.map(function(result) {
          return <li key={result.id}>{result.text}</li>;
        })}
      </ol>
    );
  }

當 React 校正帶有 key 的子級時，它會確保它們被重新排序（而不是破壞）或者刪除（而不是重用）。 務必 把 key添加到子級數組裏組件本身上，而不是每個子級內部最外層 HTML 上：

/ 錯誤！
var ListItemWrapper = React.createClass({
  render: function() {
    return <li key={this.props.data.id}>{this.props.data.text}</li>;
  }
});
var MyComponent = React.createClass({
  render: function() {
    return (
      <ul>
        {this.props.results.map(function(result) {
          return <ListItemWrapper data={result}/>;
        })}
      </ul>
    );
  }
});

// 正確 :)
var ListItemWrapper = React.createClass({
  render: function() {
    return <li>{this.props.data.text}</li>;
  }
});
var MyComponent = React.createClass({
  render: function() {
    return (
      <ul>
        {this.props.results.map(function(result) {
           return <ListItemWrapper key={result.id} data={result}/>;
        })}
      </ul>
    );
  }
});

• 也可以傳遞 object 來做有 key 的子級。object 的 key 會被當作每個組件的 key。
• 要牢記 JavaScript 並不總是保證屬性的順序會被保留。實際情況下瀏覽器一般會保留屬性的順序，除了 使用 32 位無符號數字做為 key 的屬性。
• 數字型屬性會按大小排序並且排在其它屬性前面。
• React 渲染組件的順序就是混亂。可以在 key 前面加一個字符串前綴來避免：

  render: function() {
    var items = {};
    this.props.results.forEach(function(result) {
      // 如果 result.id 看起來是一個數字（比如短哈希），那麽對象字面量的順序就得不到保證。這種情況下，需要添加前綴，來確保 key 是字符串。
      items[‘result-‘ + result.id] = <li>{result.text}</li>;
    });
    return (
      <ol>
        {items}
      </ol>
    );
  }

React 復合組件