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

//為了方便進(jìn)行ajax請求，引入jquery，當(dāng)然完全可以不引入
var $ = require("jquery")
var CommentBox = React.createClass({
  //getInitialState函數(shù)在組件的整個(gè)生命周期只會執(zhí)行一次，我們在里面初始化數(shù)據(jù)
  getInitialState:function(){
    return {data:[]}
  },
  //componentDidMount函數(shù)同樣是有React自動調(diào)用，時(shí)間是在組件第一渲染完畢后。當(dāng)然因?yàn)閐ata在初始化的時(shí)候數(shù)據(jù)為空，實(shí)際上這時(shí)候渲染的組件沒有內(nèi)容。
  componentDidMount:function(){
    $.ajax({
      url:this.props.url,
      //因我本地server是php，且跨域，所以我們使用jsonp解決跨域問題，具體jsonp實(shí)現(xiàn)，請自行g(shù)oogle
      dataType:"jsonp",
      cache:false,
      jsonp:"callback",
      jsonpCallback:"getComment",
      success:function(data){
        //獲取到數(shù)據(jù)后，通過setState設(shè)置數(shù)據(jù)，組件會自動再次渲染
        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地址傳遞個(gè)組件
ReactDOM.render(
  ,document.getElementById("content")
);

13、我們在瀏覽器看效果的時(shí)候因?yàn)閿?shù)據(jù)請求都是在毫秒級別完成不方便看到重新渲染的效果，我們引入一個(gè)定時(shí)器。刷新瀏覽器，哈哈，2s后自動載入了評論數(shù)據(jù)。

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

//之前獲取評論接口利用的是jsonp，但是提交評論必須post方法，所以jsonp無法完成，但是有不能通過跨域操作。webpack支持proxy（代理）模式，可以把一部分接口直接轉(zhuǎn)發(fā)到后端，修改webpack配置，請自行替換后端服務(wù)。
    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，會自動轉(zhuǎn)發(fā)到http://***.local.com:80/api/comment
ReactDOM.render(
  ,document.getElementById("content")
);

var CommentBox = React.createClass({
  //增加評論提交方法，后臺服務(wù)  
  handleSubmitComment:function(data){
    $.ajax({
      //請注意，后臺接口我把評論和獲取評論放到了一起，只是提交方式不一樣，一個(gè)是get，一個(gè)是post
      url:this.props.url,
      type:"POST",
      data:data,
      dataType:"json",
      cache:false,
      success:function(data){
        //測試接口直接返回了我提交的內(nèi)容，所以可以直接附加數(shù)據(jù)，讓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
        
        //將評論提交接口傳遞個(gè)CommentForm組件
        
      
    )
  }
});

var CommentForm = React.createClass({
  getInitialState:function() {
    return {author:"",text:""}
  },
  //完成數(shù)據(jù)的綁定，通過setState也能保證跟此數(shù)據(jù)相關(guān)的UI完成重新的渲染
  handleAuthorChange:function(event){
    this.setState({author:event.target.value})
  },
  handleTextChange:function(event){
    this.setState({text:event.target.value})
  },
  handleSubmit:function(event){
    //組織表單默認(rèn)的submit提交
    event.preventDefault();
    var author = this.state.author.trim()
    var text = this.state.text.trim()
    if(!text||!author) {
      return;
    }
    //調(diào)用CommentBox上的評論提交方法
    this.props.onSubmitComment({author:author,text:text});
    this.setState({author:"",text:""})
  },

  render:function(){
    return (
      

        
         
         
      
    )
  }
});

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