React入门--循环绑定

React是由数据驱动的，简单来说React中最重要的props以及state服务的最终对象都是数据。props作为数据传输的管道，state则是数据存放的地址。数据可以由人为添加上去，也可以由Ajax动态获取，创建一个简单的React应用，我们首先要拿到的是数据。
　　假设我们需要创建一个类似于微博评论列表的组件

示例

//首先我们拿到一段包含微博用户名以及评论内容的数据
var comment=[
{
  user:"Anarchus",
  context:"让一盘而已，EG无敌"
},
{
  user:"Tatsyta33",
  context:"EG，强，无敌！ 破产哥，我这波奶的可以吧"
},
{
  user:"长得又黑又胖又丑的人",
  context:"eg让一追二，苏跳跳卫冕成功，骑到中国队脖子上打"
}
];
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>
            {/*这里存放循环绑定后的评论内容子组件*/}
            {data}
          </ul>
      </div>
    );
  }
});
var CommentItem=React.createClass({
    {/*评论子组件*/}
    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')
);

上面这个例子中，我们先拿到了评论列表这个组件的一些基本数据。在应用程序一开始，创建了一个CommentBox组件，它包含一个用div标签包裹着的ul无序列表，而ul中的li则单独提取出来作为一个子组件被创建，也就是下面的CommentItem。而在父组件中并没有直接引用子组件，而是循环将数据绑定后再插入到ul中。
　　CommentBox组件的render方法中，定义了一个data变量，这个变量通过调用this.props.commentData从而获得了一开始传入的comment属性，然后再使用数组的map方法遍历其中的每个元素，将得到的item再使用props传递给子组件CommentItem。
　　而这时data变量的结果实际上就是一组循环绑定数据之后的CommentItm组件，再将它直接插入到ul列表中，这样就实现了数据的单向绑定。