var data = [
  {"id":1,"author":"stone","text":"换一个位置瞎比比"},
  {"id":2,"author":"mpanda","text":"不喜欢你瞎比比"},
]
//传递数据到CommentBox
ReactDOM.render(
  ,document.getElementById("content")
);
//直接传递数据到CommentList
var CommentBox = React.createClass({
  render:function(){
    return (
      

        
Comments
        
        
      
    )
  }
});
//在CommentList重新完成组件的组装，刷新浏览器看效果
var CommentList = React.createClass({
  render:function(){
    var commentNodes = this.props.data.map(function(comment){
      return (
        
          {comment.text}
        
      )
    });
    return (
      

        {commentNodes}
      
    )
  }
});

12、从组件封装来说我们已经封装了一个很不错的组件，只需要传递相关json数据到CommentBox即可。不过所有的数据都是在组件创建的时候，利用不可变量参数props一次性传递给组件。state同样为组件的私有变量，可以通过this.setState()来设置变量的值，每次设置变量的值，组件都会重新渲染一遍自己。利用state修改我们的程序，让其动态渲染页面。

//为了方便进行ajax请求，引入jquery，当然完全可以不引入
var $ = require("jquery")
var CommentBox = React.createClass({
  //getInitialState函数在组件的整个生命周期只会执行一次，我们在里面初始化数据
  getInitialState:function(){
    return {data:[]}
  },
  //componentDidMount函数同样是有React自动调用，时间是在组件第一渲染完毕后。当然因为data在初始化的时候数据为空，实际上这时候渲染的组件没有内容。
  componentDidMount:function(){
    $.ajax({
      url:this.props.url,
      //因我本地server是php，且跨域，所以我们使用jsonp解决跨域问题，具体jsonp实现，请自行google
      dataType:"jsonp",
      cache:false,
      jsonp:"callback",
      jsonpCallback:"getComment",
      success:function(data){
        //获取到数据后，通过setState设置数据，组件会自动再次渲染
        this.setState({"data":data})
      }.bind(this),
      error:function(xhr,status,err){
        console.log(this.props.url,status,err.toString())
      }.bind(this)
    })
  },
  render:function(){
    return (
      

        
Comments
        
        
      
    )
  }
});
//将URL地址传递个组件
ReactDOM.render(
  ,document.getElementById("content")
);

13、我们在浏览器看效果的时候因为数据请求都是在毫秒级别完成不方便看到重新渲染的效果，我们引入一个定时器。刷新浏览器，哈哈，2s后自动载入了评论数据。

var CommentBox = React.createClass({
  getInitialState:function(){
    return {data:[]}
  },
  loadCommentsFromServer:function(){
    $.ajax({
      url:this.props.url,
      dataType:"jsonp",
      cache:false,
      jsonp:"callback",
      jsonpCallback:"getComment",
      success:function(data){
        this.setState({"data":data})
      }.bind(this),
      error:function(xhr,status,err){
        console.log(this.props.url,status,err.toString())
      }.bind(this)
    })
  },
  componentDidMount:function(){
    setInterval(this.loadCommentsFromServer,2000)
  },
  render:function(){
    return (
      

        
Comments
        
        
      
    )
  }
});

14、官方教程中评论提交分两种完成。第一种完成了提交完成后，需要刷新，再次从服务器获取评论数据，第二种提交评论后直接把提交的数据附加到评论后面，利用setState重新渲染页面。显然第二种体验更好，直接实现第二种。
先做分析，在CommentForm组件中，如果完成数据的提交，那么需要重新设置CommentList中的数据，但是CommentList的数据又是CommentBox传递过去的，那么提交数据的操作不如直接在CommentBox中完成，然后利用setState重新设置CommentList的数据，CommentList完成自动刷新。

//之前获取评论接口利用的是jsonp，但是提交评论必须post方法，所以jsonp无法完成，但是有不能通过跨域操作。webpack支持proxy（代理）模式，可以把一部分接口直接转发到后端，修改webpack配置，请自行替换后端服务。
    devServer:{
        contentBase:"./build",
        proxy:{
            "/api/*":{
                target:"http://***.local.com:80",
                host:"***.local.com",
                secure: false,
            },
            bypass: function(req, res, proxyOptions) {
                if (req.headers.accept.indexOf("html") !== -1) {
                    console.log("Skipping proxy for browser request.");
                    return "/index.html";
                }
            },
        }
    }

//注意传递的url，会自动转发到http://***.local.com:80/api/comment
ReactDOM.render(
  ,document.getElementById("content")
);

var CommentBox = React.createClass({
  //增加评论提交方法，后台服务  
  handleSubmitComment:function(data){
    $.ajax({
      //请注意，后台接口我把评论和获取评论放到了一起，只是提交方式不一样，一个是get，一个是post
      url:this.props.url,
      type:"POST",
      data:data,
      dataType:"json",
      cache:false,
      success:function(data){
        //测试接口直接返回了我提交的内容，所以可以直接附加数据，让CommentList自动刷新
        this.setState({data:this.state.data.concat(data)});
      }.bind(this),
      error:function(xhr,status,err){
        console.log(this.props.url,status,err.toString())
      }.bind(this)
    })
  },
  render:function(){
    return (
      

        
Comments
        
        //将评论提交接口传递个CommentForm组件
        
      
    )
  }
});

var CommentForm = React.createClass({
  getInitialState:function() {
    return {author:"",text:""}
  },
  //完成数据的绑定，通过setState也能保证跟此数据相关的UI完成重新的渲染
  handleAuthorChange:function(event){
    this.setState({author:event.target.value})
  },
  handleTextChange:function(event){
    this.setState({text:event.target.value})
  },
  handleSubmit:function(event){
    //组织表单默认的submit提交
    event.preventDefault();
    var author = this.state.author.trim()
    var text = this.state.text.trim()
    if(!text||!author) {
      return;
    }
    //调用CommentBox上的评论提交方法
    this.props.onSubmitComment({author:author,text:text});
    this.setState({author:"",text:""})
  },

  render:function(){
    return (
      

        
         
         
      
    )
  }
});

到此整个示例联系完成！之后要完成用es6语法重构该项目。