React是由數(shù)據(jù)驅(qū)動(dòng)的扣囊，簡(jiǎn)單來(lái)說React中最重要的props以及state服務(wù)的最終對(duì)象都是數(shù)據(jù)休蟹。props作為數(shù)據(jù)傳輸?shù)墓艿兰俣幔瑂tate則是數(shù)據(jù)存放的地址唤殴。數(shù)據(jù)可以由人為添加上去，也可以由Ajax動(dòng)態(tài)獲取捐下，創(chuàng)建一個(gè)簡(jiǎn)單的React應(yīng)用账锹，我們首先要拿到的是數(shù)據(jù)。
假設(shè)我們需要?jiǎng)?chuàng)建一個(gè)類似于微博評(píng)論列表的組件
//首先我們拿到一段包含微博用戶名以及評(píng)論內(nèi)容的數(shù)據(jù)
var comment=[
{
user:"Anarchus",
context:"讓一盤而已坷襟，EG無(wú)敵"
},
{
user:"Tatsyta33",
context:"EG奸柬，強(qiáng)，無(wú)敵婴程！ 破產(chǎn)哥廓奕，我這波奶的可以吧"
},
{
user:"長(zhǎng)得又黑又胖又丑的人",
context:"eg讓一追二，蘇跳跳衛(wèi)冕成功，騎到中國(guó)隊(duì)脖子上打"
}
];
var CommentBox=React.createClass({
render:function (){
var data=this.props.commentData.map(function (item,index){
return (
<CommentItem user={item.user} context={item.context}></CommentItem>
{/*遍歷并綁定*/}
)
});
return (
<div className="comment-box">
<ul>
{/*這里存放循環(huán)綁定后的評(píng)論內(nèi)容子組件*/}
{data}
</ul>
</div>
);
}
});
var CommentItem=React.createClass({
{/*評(píng)論子組件*/}
render:function (){
return (
<li>
<p>{this.props.user}: <span>{this.props.context}</span></p>
</li>
)
}
});
ReactDOM.render(
{/*將comment通過props傳遞給子組件*/}
<CommentBox commentData={comment}/>,
document.getElementById('app')
);
上面這個(gè)例子中桌粉，我們先拿到了評(píng)論列表這個(gè)組件的一些基本數(shù)據(jù)蒸绩。在應(yīng)用程序一開始，創(chuàng)建了一個(gè)CommentBox組件铃肯，它包含一個(gè)用div標(biāo)簽包裹著的ul無(wú)序列表患亿，而ul中的li則單獨(dú)提取出來(lái)作為一個(gè)子組件被創(chuàng)建，也就是下面的CommentItem押逼。而在父組件中并沒有直接引用子組件步藕，而是循環(huán)將數(shù)據(jù)綁定后再插入到ul中。
CommentBox組件的render方法中挑格，定義了一個(gè)data變量咙冗，這個(gè)變量通過調(diào)用this.props.commentData從而獲得了一開始傳入的comment屬性，然后再使用數(shù)組的map方法遍歷其中的每個(gè)元素漂彤，將得到的item再使用props傳遞給子組件CommentItem雾消。
而這時(shí)data變量的結(jié)果實(shí)際上就是一組循環(huán)綁定數(shù)據(jù)之后的CommentItm組件，再將它直接插入到ul列表中显歧，這樣就實(shí)現(xiàn)了數(shù)據(jù)的單向綁定仪或。
