1、組合實例：
var Avatar =React.createClass({
render: function() {
return (
<div>
<ProfilePicusername={this.props.username} />
<ProfileLinkusername={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')
);
上面例子中，Avatar 擁有 ProfilePic 和 ProfileLink 的實例。
組件不能修改自身的 props -它們總是與它們擁有者設置的保持一致。這是保持用戶界面一致性的關鍵性原則。Avatar 擁有 div、ProfilePic 和ProfileLink 實例，div 是 ProfilePic 和 ProfileLink 實例的父級（但不是擁有者）。
2、子級
可以編寫<Parent><Child/></Parent>,使兩個節點進行嵌套，Parent通過專門的this.props.children props讀取子級。this.props.children是不透明的
React.Children工具類：
React.Children 爲處理 this.props.children 這個封閉的數據結構提供了有用的工具。
React.Children.map
object React.Children.map(object children, function fn [, objectcontext])
在每一個直接子級（包含在 children 參數中的）上調用 fn 函數，此函數中的 this 指向 上下文。如果 children 是一個內嵌的對象或者數組，它將被遍歷：不會傳入容器對象到 fn 中。如果 children參數是 null 或者 undefined，那麼返回 null 或者undefined 而不是一個空對象。
React.Children.forEach
React.Children.forEach(object children, function fn [, object context])
類似於 React.Children.map()，但是不返回對象。
React.Children.count
numberReact.Children.count(object children)
返回 children 當中的組件總數，和傳遞給 map 或者 forEach 的回調函數的調用次數一致。
React.Children.only
objectReact.Children.only(object children)
返回 children 中僅有的子級。否則拋出異常。
3、子組件狀態管理
對於大多數狀態沒有什麼關係，但是對於使用this.state來在多次渲染過程中裏維持數據的狀態化組件，這樣做潛在很多問題。多數情況下，可以通過隱藏組件而不是刪除他們來繞過這些問題。
// 第一次渲染 <Card> <p>Paragraph 1</p> <p>Paragraph 2</p> </Card> // 第二次渲染 <Card> <p style={{display: 'none'}}>Paragraph 1</p> <p>Paragraph 2</p> </Card>
4、動態子級
如果子組件的位置會改變，或者有新的組件添加到列表開頭情況會變得複雜。如果子集要在多個渲染階段保持自己的特徵和狀態，這種情況下，你可以通過子集設置唯一標識key來區分。
render：function（）{
var results =this.props.results;
return(
<ol>
{results.map{function(result){
return <li keyi={result.id}>{result..text}</li>
})}
</ol>
);
}
當 React校正帶有 key 的子級時，它會確保它們被重新排序（而不是破壞）或者刪除（而不是重用）。 務必 把 key 添加到子級數組裏組件本身上，而不是每個子級內部最外層HTML 上：
// 錯誤！
var ListItemWrapper= React.createClass({
render: function() {
return <likey={this.props.data.id}>{this.props.data.text}</li>;
}
});
var MyComponent =React.createClass({
render: function() {
return (
<ul>
{this.props.results.map(function(result) {
return <ListItemWrapperdata={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 <ListItemWrapperkey={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>
);
}
5、數據流
React；裏，數據通過上面介紹的props從擁有着流向歸屬者。這就是高效的單向數據綁定（one-way data binding）：擁有着通過他的props或者state計算出一些值，並把這些值綁定到他們擁有的組件props上。因爲這個過程會遞歸地調用，所以數據變化會自動在所有被使用的地方自動反應出來。
