var data = [
  {"id":1,"author":"stone","text":"換一個位置瞎比比"},
  {"id":2,"author":"mpanda","text":"不喜歡你瞎比比"},
]
//傳遞數(shù)據到CommentBox
ReactDOM.render(
  ,document.getElementById("content")
);
//直接傳遞數(shù)據到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數(shù)據到CommentBox即可。不過所有的數(shù)據都是在組件創(chuàng)建的時候，利用不可變量參數(shù)props一次性傳遞給組件。state同樣為組件的私有變量，可以通過this.setState()來設置變量的值，每次設置變量的值，組件都會重新渲染一遍自己。利用state修改我們的程序，讓其動態(tài)渲染頁面。

//為了方便進行ajax請求，引入jquery，當然完全可以不引入
var $ = require("jquery")
var CommentBox = React.createClass({
  //getInitialState函數(shù)在組件的整個生命周期只會執(zhí)行一次，我們在里面初始化數(shù)據
  getInitialState:function(){
    return {data:[]}
  },
  //componentDidMount函數(shù)同樣是有React自動調用，時間是在組件第一渲染完畢后。當然因為data在初始化的時候數(shù)據為空，實際上這時候渲染的組件沒有內容。
  componentDidMount:function(){
    $.ajax({
      url:this.props.url,
      //因我本地server是php，且跨域，所以我們使用jsonp解決跨域問題，具體jsonp實現(xiàn)，請自行google
      dataType:"jsonp",
      cache:false,
      jsonp:"callback",
      jsonpCallback:"getComment",
      success:function(data){
        //獲取到數(shù)據后，通過setState設置數(shù)據，組件會自動再次渲染
        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、我們在瀏覽器看效果的時候因為數(shù)據請求都是在毫秒級別完成不方便看到重新渲染的效果，我們引入一個定時器。刷新瀏覽器，哈哈，2s后自動載入了評論數(shù)據。

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、官方教程中評論提交分兩種完成。第一種完成了提交完成后，需要刷新，再次從服務器獲取評論數(shù)據，第二種提交評論后直接把提交的數(shù)據附加到評論后面，利用setState重新渲染頁面。顯然第二種體驗更好，直接實現(xiàn)第二種。
先做分析，在CommentForm組件中，如果完成數(shù)據的提交，那么需要重新設置CommentList中的數(shù)據，但是CommentList的數(shù)據又是CommentBox傳遞過去的，那么提交數(shù)據的操作不如直接在CommentBox中完成，然后利用setState重新設置CommentList的數(shù)據，CommentList完成自動刷新。

//之前獲取評論接口利用的是jsonp，但是提交評論必須post方法，所以jsonp無法完成，但是有不能通過跨域操作。webpack支持proxy（代理）模式，可以把一部分接口直接轉發(fā)到后端，修改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，會自動轉發(fā)到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){
        //測試接口直接返回了我提交的內容，所以可以直接附加數(shù)據，讓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:""}
  },
  //完成數(shù)據的綁定，通過setState也能保證跟此數(shù)據相關的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 (
      

        
         
         
      
    )
  }
});

到此整個示例聯(lián)系完成！之后要完成用es6語法重構該項目。